/* EasyFama - melhorias de UX e conversao (base) */

html {

    scroll-behavior: smooth;

}

/* Header com estado ao rolar */

.header {

    transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;

}

body.theme-ig .header.is-scrolled {

    background: rgba(11, 12, 16, 0.92);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

}

body.theme-ig .header .container {

    justify-content: space-between;

    gap: 16px;

}

.logo {

    scale: 1.15;

}

body.theme-ig .logo h1 {

    font-size: clamp(1.6rem, 4vw, 2.2rem);

    line-height: 1;

}

body.theme-ig .logo span {

    color: #8f9bad;

    font-size: 0.72rem;

    font-weight: 600;

    margin-left: 0;

    text-align: left;

    -webkit-text-fill-color: #8f9bad;

}

/* Nav + CTA no header */

.nav-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 18px !important;

    margin-left: 6px !important;

    border-radius: 999px !important;

    font-size: 0.9rem !important;

    font-weight: 800 !important;

    color: #fff !important;

    background: linear-gradient(90deg, var(--accent-hot, #ff4d7d), var(--accent-sun, #ffb84d)) !important;

    box-shadow: 0 10px 28px rgba(255, 77, 125, 0.28);

    white-space: nowrap;

}

.nav-cta:hover {

    filter: brightness(1.06);

    transform: translateY(-1px);

    background: linear-gradient(90deg, var(--accent-hot, #ff4d7d), var(--accent-sun, #ffb84d)) !important;

}

/* Corrige titulos de secao (regra global antiga quebrava cores) */

body.theme-ig .section-header h2,

body.theme-ig .contact-panel h2,

body.theme-ig .final-cta h2,

body.theme-ig .orders h2,

body.theme-ig .faq h2,

body.theme-ig .hero-title,

body.theme-ig .service-header h3,

body.theme-ig .feature h3,

body.theme-ig .process-card h3,

body.theme-ig .footer h3,

body.theme-ig .footer h4 {

    color: #f7f8fb !important;

    background: none !important;

    -webkit-text-fill-color: #f7f8fb !important;

}

.hero-content {

    left: auto !important;

}

/* Hero - prova social */

.hero-social-proof {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    max-width: 520px;

}

.hero-avatar-stack {

    display: flex;

    align-items: center;

}

.hero-avatar-stack span {

    width: 36px;

    height: 36px;

    margin-left: -10px;

    border-radius: 50%;

    border: 2px solid #0f1219;

    display: grid;

    place-items: center;

    font-size: 0.85rem;

    background: linear-gradient(135deg, #feda75, #fa7e1e, #d62976);

    color: #fff;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}

.hero-avatar-stack span:first-child {

    margin-left: 0;

}

.hero-social-proof p {

    margin: 0;

    font-size: 0.92rem;

    line-height: 1.45;

    color: #aab4c3;

}

.hero-social-proof strong {

    color: #fff;

    font-weight: 800;

}

.hero-social-proof .stars {

    color: #ffb84d;

    letter-spacing: 1px;

    font-size: 0.8rem;

}

/* Abas de plataforma - scroll suave no mobile */

.platform-tabs-wrap {

    position: relative;

    margin: 24px 0 28px;

}

.platform-tabs {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 6px 4px 12px;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}

.platform-tabs::-webkit-scrollbar {

    display: none;

}

body.theme-ig .tab-button {

    flex: 0 0 auto;

    scroll-snap-align: start;

    padding: 12px 18px;

    font-size: 0.92rem;

    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}

body.theme-ig .tab-button i {

    font-size: 1.1rem;

}

body.theme-ig .tab-button.active {

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(214, 41, 118, 0.22);

}

/* Cards de servico - destaque de preco e CTA */

body.theme-ig .service-card {

    position: relative;

    overflow: hidden;

    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

}

body.theme-ig .service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--accent-sun, #feda75), var(--accent-orange, #fa7e1e), var(--accent-rose, #d62976), var(--accent-purple, #833ab4));

    opacity: 0;

    transition: opacity 0.22s ease;

}

body.theme-ig .service-card:hover::before {

    opacity: 1;

}

body.theme-ig .service-card:hover {

    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);

}

body.theme-ig .service-card::after {

    content: "";

    position: absolute;

    inset: -1px;

    background: radial-gradient(560px 220px at 30% 0%, rgba(61, 214, 208, 0.12), transparent 60%);

    opacity: 0;

    transition: opacity 0.22s ease;

    pointer-events: none;

}

body.theme-ig .service-card:hover::after {

    opacity: 1;

}

body.theme-ig .price-info .price {

    font-size: 1.35rem;

    font-weight: 900;

    background: linear-gradient(90deg, #fff 0%, #f9a8d4 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}

body.theme-ig .service-button {

    width: 100%;

    margin-top: auto;

    padding: 15px 20px;

    font-size: 0.95rem;

    letter-spacing: 0.02em;

}

body.theme-ig .service-button .button-text {

    font-weight: 800;

}

body.theme-ig .service-button:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow: 0 16px 36px rgba(61, 214, 208, 0.28);

}

body.theme-ig .hero-buttons .cta-button:hover {

    filter: brightness(1.06);

    box-shadow: 0 22px 52px rgba(255, 77, 125, 0.24);

}

body.theme-ig .order-button {

    width: 100%;

    padding: 16px 24px;

    font-size: 1.05rem;

    margin-top: 8px;

    border-radius: 999px;

    background: linear-gradient(90deg, var(--accent-hot, #ff4d7d), var(--accent-sun, #ffb84d)) !important;

    box-shadow: 0 16px 40px rgba(255, 77, 125, 0.3);

}

body.theme-ig .order-button:hover {

    transform: translateY(-2px);

    filter: brightness(1.05);

}

body.theme-ig .price-display {

    font-size: 1.25rem;

    font-weight: 800;

    padding: 14px 16px;

    margin: 12px 0;

    border-radius: 12px;

    background: rgba(61, 214, 208, 0.08);

    border: 1px solid rgba(61, 214, 208, 0.2);

    text-align: center;

}

.trust-strip {

    position: relative;

    overflow: hidden;

}

.trust-grid div {

    transition: background 0.2s ease, border-color 0.2s ease;

}

.trust-grid div:hover {

    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(61, 214, 208, 0.25);

}

.process-card span {

    font-size: 2rem;

    line-height: 1;

    opacity: 0.9;

}

body.theme-ig .faq-question {

    transition: background 0.2s ease;

}

body.theme-ig .faq-item.open .faq-question,

body.theme-ig .faq-question:hover {

    background: rgba(255, 255, 255, 0.06);

}

.final-cta-inner .cta-button {

    min-width: 200px;

    justify-content: center;

    padding: 16px 28px !important;

    font-size: 1rem;

}

body.theme-ig .footer a {

    color: #9ca8ba;

    transition: color 0.2s ease;

}

body.theme-ig .footer a:hover {

    color: var(--accent-orange, #fa7e1e);

}

body.theme-ig .social-links a {

    width: 42px;

    height: 42px;

    display: inline-grid;

    place-items: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: transform 0.2s ease, background 0.2s ease;

}

body.theme-ig .social-links a:hover {

    transform: translateY(-2px);

    background: rgba(61, 214, 208, 0.15);

    color: var(--accent-orange, #fa7e1e);

}

.mobile-buy-bar {

    display: none;

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 9998;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));

    background: rgba(11, 12, 16, 0.96);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);

    transform: translateY(110%);

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

}

.mobile-buy-bar.is-visible {

    transform: translateY(0);

}

.mobile-buy-bar__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    max-width: 520px;

    margin: 0 auto;

}

.mobile-buy-bar__text {

    flex: 1;

    min-width: 0;

}

.mobile-buy-bar__text strong {

    display: block;

    color: #fff;

    font-size: 0.95rem;

}

.mobile-buy-bar__text span {

    color: #8f9bad;

    font-size: 0.78rem;

}

.mobile-buy-bar__btn {

    flex-shrink: 0;

    padding: 12px 20px;

    border-radius: 999px;

    font-weight: 800;

    font-size: 0.9rem;

    color: #fff;

    background: linear-gradient(90deg, var(--accent-hot, #ff4d7d), var(--accent-sun, #ffb84d));

    box-shadow: 0 10px 24px rgba(255, 77, 125, 0.35);

    white-space: nowrap;

}

@media (max-width: 900px) {

    .nav .nav-cta {

        display: none !important;

    }

}

@media (max-width: 768px) {

    .mobile-buy-bar {

        display: block;

    }

    body.has-mobile-bar {

        padding-bottom: 76px;

    }

    body.has-mobile-bar .whatsapp-float {

        bottom: 88px;

    }

    .hero-social-proof {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}

a:focus-visible,

button:focus-visible,

.tab-button:focus-visible {

    outline: 2px solid var(--accent-rose, #d62976);

    outline-offset: 3px;

}

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        transition-duration: 0.01ms !important;

    }

}

body.theme-ig #typing {

    font-size: clamp(1.9rem, 4.4vw, 3.7rem) !important;

    line-height: 0.96 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: clip !important;

}

@media (max-width: 768px) {

    body.theme-ig #typing {

        font-size: clamp(1.45rem, 7.4vw, 2.7rem) !important;

    }

}

@media (max-width: 450px) {

    body.theme-ig #typing {

        font-size: clamp(1.2rem, 8.3vw, 2.05rem) !important;

    }

}

/* ==========================================================

   REDUZ MOVIMENTO (override completo para prefers-reduced-motion)

   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    [data-aos] {
        transform: none !important;
        filter: none !important;
        transition: opacity 220ms ease !important;
    }

    [data-aos]:not(.aos-animate) { opacity: 0 !important; }

    [data-aos].aos-animate { opacity: 1 !important; }

    i.fas, i.fab, i.far, i.bi, i.fa,

    .service-card, .feature, .process-card,

    .contact-item, .pricing-card, .testimonial-card,

    .network-card, .option-card, .step,

    .variant-card, .plan-card, .category, .container-card,

    .panel, .accordion-item, .collapsible, .expandable,

    .badge, .tag, .label, .pill, .chip,

    h1, h2, h3, h4 {

        transition: none !important;

        animation: none !important;

    }

    .bg-orb { animation: none !important; }

}

/* ---------- HERO - typing text shimmer + glow ---------- */

body.theme-ig #typing {

    background: linear-gradient(90deg, #fff 0%, #feda75 18%, #fa7e1e 38%, #d62976 62%, #c13584 82%, #fff 100%);

    background-size: 200% 100%;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    animation: textShimmer 4s linear infinite;

    text-shadow: 0 0 40px rgba(139, 92, 246, 0.3);

}

@keyframes textShimmer {

    0%   { background-position: 0% 50%; }

    100% { background-position: 200% 50%; }

}

body.theme-ig #static-word {

    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    animation: none !important;
    filter: none !important;

}

@keyframes glow {

    from { filter: drop-shadow(0 0 8px rgba(255, 77, 125, 0.4)); }

    to   { filter: drop-shadow(0 0 18px rgba(255, 184, 77, 0.7)); }

}

body.theme-ig .hero-title { position: relative; }

body.theme-ig .hero-title::after {

    content: '';

    position: absolute;

    bottom: -6px; left: 0;

    width: 0; height: 3px;

    background: linear-gradient(90deg, #ff4d7d, #ffb84d);

    border-radius: 2px;

    animation: underlineGrow 1.4s 0.3s var(--ease-out) forwards;

}

@keyframes underlineGrow {

    to { width: 100%; max-width: 200px; }

}

/* Hero badge pulse (se existir) */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(214, 41, 118, 0.12);

    border: 1px solid rgba(214, 41, 118, 0.32);

    color: #f9a8d4;

    font-size: 0.8rem;

    font-weight: 600;

    margin-bottom: 18px;

    animation: badgeFloat 3s ease-in-out infinite;

}

.hero-badge::before {

    content: '';

    width: 8px; height: 8px;

    border-radius: 50%;

    background: #d62976;

    box-shadow: 0 0 12px rgba(214, 41, 118, 0.75);

    animation: badgePulse 1.6s ease-in-out infinite;

}

@keyframes badgeFloat {

    0%, 100% { transform: translateY(0); }

    50%      { transform: translateY(-3px); }

}

@keyframes badgePulse {

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

    50%      { transform: scale(1.4); opacity: 0.6; }

}

/* ---------- CTA BUTTONS - nao duplica ::before (style.css ja tem shine) ---------- */

/* Adiciona apenas box-shadow glow no hover (nao usa transform) */

body.theme-ig .cta-button:hover,

.nav-cta:hover {

    box-shadow: 0 12px 32px rgba(255, 77, 125, 0.35);

}

/* ---------- SHINE SWEEP (NAO aplicado a elementos que ja tem ::after em style.css) ---------- */

/* Aplicado apenas a elementos sem pseudo-elementos pre-existentes */

body.theme-ig .cta-button.shine-sweep {

    overflow: hidden;

    isolation: isolate;

}

/* ---------- ANIMATED GRADIENT BORDER ---------- */

.gradient-border {

    position: relative;

    background: var(--card, #14161e);

    border-radius: 16px;

}

.gradient-border::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1.5px;

    background: linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4, #d62976);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation: borderRotate 6s linear infinite;

    pointer-events: none;

}

@keyframes borderRotate {

    0%   { background-position: 0% 50%; }

    100% { background-position: 300% 50%; }

}

/* ---------- 3D TILT - REMOVIDO ----------

/* Conflitava com transitions CSS de .service-card, .process-card, .feature (.hero-stat ja tem hover translateY). */

/* ---------- MAGNETIC HOVER (botoes) - JS-driven ---------- */

.magnetic {

    transition: transform 0.3s var(--ease-out);

    will-change: transform;

}

/* ---------- SECTION TITLE - reveal underline ---------- */

.reveal-title {

    position: relative;

    display: inline-block;

    padding-bottom: 12px;

}

.reveal-title::after {

    content: '';

    position: absolute;

    bottom: 0; left: 50%;

    transform: translateX(-50%);

    width: 0; height: 3px;

    background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4);

    border-radius: 2px;

    transition: width 0.8s var(--ease-out) 0.2s;

}

.reveal-title.is-visible::after { width: 80px; }

/* ---------- FADE-IN STAGGER ---------- */

.stagger-item,

.fade-up {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);

}

.stagger-item.is-visible,

.fade-up.is-visible {

    opacity: 1;

    transform: translateY(0);

}

/* ---------- FADE-IN (sem transform, so opacidade) ---------- */

.fade-in {

    opacity: 0;

    transition: opacity 0.7s var(--ease-out);

}

.fade-in.is-visible { opacity: 1; }

/* ---------- POP-IN (scale + opacity) ---------- */

.pop-in {

    opacity: 0;

    transform: scale(0.85);

    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring);

}

.pop-in.is-visible { opacity: 1; transform: scale(1); }

/* ---------- SLIDE-IN LEFT / RIGHT ---------- */

.slide-left {

    opacity: 0;

    transform: translateX(-30px);

    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);

}

.slide-left.is-visible { opacity: 1; transform: translateX(0); }

.slide-right {

    opacity: 0;

    transform: translateX(30px);

    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);

}

.slide-right.is-visible { opacity: 1; transform: translateX(0); }

/* ---------- DRAW LINE (linha horizontal que "desenha") ---------- */

.draw-line {

    width: 0;

    height: 3px;

    background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4);

    border-radius: 2px;

    margin: 12px auto 0;

    transition: width 0.9s var(--ease-out) 0.2s;

}

.draw-line.is-visible { width: 80px; max-width: 80%; }

.draw-line.is-full.is-visible { width: 100%; }

/* ---------- HOVER LIFT (so box-shadow, sem transform - nao conflita) ---------- */

.hover-lift {

    transition: box-shadow 0.3s var(--ease-out), border-color 0.3s ease;

}

.hover-lift:hover {

    box-shadow: 0 16px 40px rgba(139, 92, 241, 0.25), 0 0 0 1px rgba(139, 92, 241, 0.15);

    border-color: rgba(139, 92, 241, 0.3);

}

/* ---------- LINK UNDERLINE (sublinhado animado no hover) ---------- */

.animated-link {

    position: relative;

    display: inline-block;

    transition: color 0.2s;

}

.animated-link::after {

    content: '';

    position: absolute;

    left: 0; bottom: -2px;

    width: 0; height: 2px;

    background: linear-gradient(90deg, #ff4d7d, #a855f7);

    transition: width 0.3s var(--ease-out);

}

.animated-link:hover { color: #fff; }

.animated-link:hover::after { width: 100%; }

/* ---------- SECTION DIVIDER (linha fina que se expande) ---------- */

.section-divider {

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(139, 92, 241, 0.4), transparent);

    margin: 60px 0;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.9s var(--ease-out);

}

.section-divider.is-visible { transform: scaleX(1); }

/* ---------- IMAGE REVEAL (se houver imagens) ---------- */

.img-reveal {

    opacity: 0;

    transform: scale(0.95);

    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);

}

.img-reveal.is-visible { opacity: 1; transform: scale(1); }

/* ---------- NAV ACTIVE LINK (highlight na nav ao scrollar) ---------- */

.nav-link {

    position: relative;

    transition: color 0.2s;

}

.nav-link::after {

    content: '';

    position: absolute;

    left: 12px; right: 12px;

    bottom: 6px;

    height: 2px;

    background: linear-gradient(90deg, #ff4d7d, #a855f7);

    border-radius: 2px;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.3s var(--ease-out);

}

.nav-link.is-active { color: #fff; }

.nav-link.is-active::after { transform: scaleX(1); }

.cta-button.nav-link::after,
.cta-button.nav-link.is-active::after,
.nav-cta.nav-link::after,
.nav-cta.nav-link.is-active::after {
    content: none !important;
    display: none !important;
}

/* ---------- ICON BOUNCE (icones em cards fazem um "pop" no scroll) ---------- */

.icon-bounce {

    display: inline-block;

    transition: transform 0.4s var(--ease-spring);

}

.fade-up.is-visible .icon-bounce,

.stagger-item.is-visible .icon-bounce {

    animation: iconPop 0.6s var(--ease-spring) 0.2s both;

}

@keyframes iconPop {

    0%   { transform: scale(0.5) rotate(-15deg); }

    60%  { transform: scale(1.15) rotate(5deg); }

    100% { transform: scale(1) rotate(0); }

}

/* ---------- BADGE PULSE-ONCE (badge faz pulse ao aparecer) ---------- */

.pulse-once {

    animation: pulseOnce 1.2s var(--ease-spring) 0.3s both;

}

@keyframes pulseOnce {

    0%   { transform: scale(0.8); }

    50%  { transform: scale(1.1); }

    100% { transform: scale(1); }

}

/* ---------- GRADIENT TEXT (estatico, sem flow) ---------- */

.gradient-text {

    background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

}

/* ---------- SCROLL REVEAL CONTAINER (pai que aplica fade-up a todos os filhos diretos) ---------- */

.reveal-children > * {

    opacity: 0;

    transform: translateY(16px);

    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);

}

.reveal-children.is-visible > * {

    opacity: 1;

    transform: translateY(0);

}

.reveal-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }

.reveal-children.is-visible > *:nth-child(2) { transition-delay: 80ms; }

.reveal-children.is-visible > *:nth-child(3) { transition-delay: 160ms; }

.reveal-children.is-visible > *:nth-child(4) { transition-delay: 240ms; }

.reveal-children.is-visible > *:nth-child(5) { transition-delay: 320ms; }

.reveal-children.is-visible > *:nth-child(6) { transition-delay: 400ms; }

.reveal-children.is-visible > *:nth-child(7) { transition-delay: 480ms; }

.reveal-children.is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* ---------- DIVIDER AFTER SECTION ---------- */

.section-marker {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin: 24px auto 0;

    opacity: 0;

    transform: translateY(10px);

    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);

}

.section-marker.is-visible { opacity: 1; transform: translateY(0); }

.section-marker span {

    width: 40px;

    height: 2px;

    background: linear-gradient(90deg, transparent, #a855f7, transparent);

}

.section-marker i {

    color: #a855f7;

    font-size: 14px;

}

/* ---------- TRUST STRIP MARQUEE ---------- */

.trust-marquee {

    display: flex;

    overflow: hidden;

    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);

    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);

}

.trust-marquee__track {

    display: flex;

    gap: 48px;

    flex-shrink: 0;

    padding-right: 48px;

    animation: marquee 30s linear infinite;

}

.trust-marquee__item {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.95rem;

    font-weight: 500;

    white-space: nowrap;

}

.trust-marquee__item i {

    font-size: 1.1rem;

    color: #ffb84d;

}

@keyframes marquee {

    0%   { transform: translateX(0); }

    100% { transform: translateX(-100%); }

}

.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }

/* ---------- COUNTER UP ---------- */

.counter {

    display: inline-block;

    font-variant-numeric: tabular-nums;

    font-weight: 800;

    background: linear-gradient(90deg, #fff, #f9a8d4);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}

/* ---------- HERO STAT FLOAT ---------- */

.hero-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 16px 22px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;

}

.hero-stat:hover {

    transform: translateY(-4px);

    border-color: rgba(139, 92, 246, 0.4);

    box-shadow: 0 16px 40px rgba(139, 92, 246, 0.2);

}

.hero-stat .value {

    font-size: clamp(1.5rem, 2.5vw, 2rem);

    font-weight: 900;

    background: linear-gradient(90deg, #ff4d7d, #ffb84d);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}

.hero-stat .label {

    color: #8f9bad;

    font-size: 0.8rem;

    margin-top: 4px;

}

/* ---------- FAQ - chevron rotate smooth ---------- */

body.theme-ig .faq-item .faq-icon {

    transition: transform 0.4s var(--ease-spring), background 0.3s, color 0.3s;

    display: inline-grid;

    place-items: center;

    width: 28px; height: 28px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    color: var(--accent-orange, #fa7e1e);

    font-size: 1.2rem;

    font-weight: 700;

    line-height: 1;

}

body.theme-ig .faq-item.open .faq-icon {

    transform: rotate(135deg);

    background: var(--accent-rose, #d62976);

    color: #0a0b0f;

}

body.theme-ig .faq-content {

    overflow: hidden;

    transition: max-height 0.4s var(--ease-out), padding 0.3s;

}

/* ---------- NETWORK CARDS (abas de plataforma) ---------- */

body.theme-ig .network-card {

    transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s, background 0.3s;

    position: relative;

}

body.theme-ig .network-card.selected {

    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.3), 0 0 0 2px rgba(139, 92, 246, 0.4);

}

body.theme-ig .network-card:not(.selected):hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}

body.theme-ig .network-card .network-icon {

    transition: transform 0.4s var(--ease-spring);

}

body.theme-ig .network-card:hover .network-icon {

    transform: scale(1.15) rotate(-5deg);

}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */

/* NAO interfere com o WhatsApp ja existente em style.css (que tem transform: scale(1.2) inline). */

/* Sem animacao, sem pulse ring, sem hover override. O estilo original permanece intacto. */

/* ---------- INPUTS (forms) com glow no focus ---------- */

body.theme-ig input:focus,

body.theme-ig textarea:focus,

body.theme-ig select:focus {

    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 0 24px rgba(139, 92, 246, 0.15);

    border-color: #a855f7;

}

/* ---------- MODAL OVERLAY com blur progressivo ---------- */

.modal-overlay {

    backdrop-filter: blur(8px) saturate(1.2);

    -webkit-backdrop-filter: blur(8px) saturate(1.2);

    background: rgba(5, 6, 10, 0.78) !important;

}

.modal-overlay .modal {

    animation: modalShow 0.4s var(--ease-spring);

}

@keyframes modalShow {

    from { opacity: 0; transform: translateY(20px) scale(0.96); }

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

}

/* ---------- FOOTER - gradient top border animado ---------- */

body.theme-ig .footer {

    position: relative;

    margin-top: 80px;

    border-top: 1px solid transparent;

    background:

        linear-gradient(rgba(11, 12, 16, 0.95), rgba(11, 12, 16, 0.95)) padding-box,

        linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4) border-box;

    border-top: 1px solid transparent;

    background-size: 100% 100%, 300% 100%;

    animation: footerBorder 8s linear infinite;

}

@keyframes footerBorder {

    0%   { background-position: 0 0, 0% 50%; }

    100% { background-position: 0 0, 300% 50%; }

}

/* ---------- SCROLL TO TOP BUTTON ---------- */

.scroll-top {

    position: fixed;

    bottom: 96px; right: 24px;

    width: 44px; height: 44px;

    border-radius: 50%;

    background: linear-gradient(135deg, #a855f7, #ec4899);

    color: #fff;

    display: grid;

    place-items: center;

    font-size: 18px;

    border: none;

    cursor: pointer;

    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);

    z-index: 9980;

    opacity: 0;

    transform: translateY(20px) scale(0.8);

    pointer-events: none;

    transition: opacity 0.3s, transform 0.3s var(--ease-spring), box-shadow 0.3s;

}

.scroll-top.is-visible {

    opacity: 1;

    transform: translateY(0) scale(1);

    pointer-events: auto;

}

.scroll-top:hover {

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 14px 32px rgba(168, 85, 247, 0.6);

}

/* ---------- PIX QR Code container glow ---------- */

.pix-qr-container {

    position: relative;

    background: #fff;

    padding: 16px;

    border-radius: 16px;

    display: inline-block;

    box-shadow: 0 0 0 4px rgba(61, 214, 208, 0.15), 0 20px 50px rgba(61, 214, 208, 0.25);

    animation: pixGlow 2.4s ease-in-out infinite alternate;

}

@keyframes pixGlow {

    from { box-shadow: 0 0 0 4px rgba(61, 214, 208, 0.15), 0 20px 50px rgba(61, 214, 208, 0.25); }

    to   { box-shadow: 0 0 0 6px rgba(61, 214, 208, 0.3), 0 30px 70px rgba(61, 214, 208, 0.5); }

}

/* ---------- PIX countdown pulse ---------- */

.pix-countdown {

    font-variant-numeric: tabular-nums;

    font-weight: 800;

    color: #ffb84d;

    text-shadow: 0 0 12px rgba(255, 184, 77, 0.5);

    animation: countdownPulse 1.6s ease-in-out infinite;

}

@keyframes countdownPulse {

    0%, 100% { opacity: 1; }

    50%      { opacity: 0.65; }

}

/* ---------- DISCOUNT BADGE swing ---------- */

@keyframes swingIn {

    0%   { transform: rotate(-12deg) scale(0.4); opacity: 0; }

    60%  { transform: rotate(8deg) scale(1.15); opacity: 1; }

    100% { transform: rotate(0deg) scale(1); opacity: 1; }

}

#discountBadge {

    animation: swingIn 0.6s var(--ease-spring);

}

/* ---------- Card "Tarifa ativa" (mostrado quando ha desconto configurado) ---------- */

.active-rate-card {

    margin: 0 0 14px 0;

    padding: 10px 14px;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(236, 72, 153, 0.08));

    border: 1px solid rgba(139, 92, 246, 0.30);

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.active-rate-card:hover {

    border-color: rgba(236, 72, 153, 0.45);

    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.15);

}

.active-rate-header {

    font-size: 0.70rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: rgba(196, 181, 253, 0.95);

    margin-bottom: 2px;

}

.active-rate-main {

    font-size: 1.15rem;

    font-weight: 800;

    color: #fff;

    line-height: 1.15;

    margin-bottom: 1px;

}

.active-rate-main .active-rate-sep {

    color: rgba(196, 181, 253, 0.6);

    font-weight: 500;

    margin: 0 2px;

}

.active-rate-equiv {

    font-size: 0.78rem;

    color: rgba(229, 231, 235, 0.75);

    margin-bottom: 4px;

}

.active-rate-note {

    font-size: 0.78rem;

    color: rgba(196, 181, 253, 0.85);

    line-height: 1.35;

}

.active-rate-note strong {

    color: #fff;

    font-weight: 700;

}

/* ---------- FINAL CTA gradient background animated ---------- */

body.theme-ig .final-cta {

    position: relative;

    overflow: hidden;

}

body.theme-ig .final-cta::before {

    content: '';

    position: absolute;

    inset: -50%;

    background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4, #feda75);

    filter: blur(80px);

    opacity: 0.25;

    animation: finalCtaRotate 18s linear infinite;

    z-index: 0;

}

body.theme-ig .final-cta > * { position: relative; z-index: 1; }

@keyframes finalCtaRotate {

    to { transform: rotate(360deg); }

}

/* ---------- HEADER LOGO pulse + spin on hover ---------- */

body.theme-ig .logo h1 {

    background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4);

    background-size: 200% 100%;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    animation: logoGradient 6s linear infinite;

}

@keyframes logoGradient {

    0%   { background-position: 0% 50%; }

    100% { background-position: 200% 50%; }

}

body.theme-ig .logo:hover h1 { animation-duration: 2s; }

/* ---------- SERVICE CARD image float ---------- */

body.theme-ig .service-card .service-icon,

body.theme-ig .service-card .service-emoji,

body.theme-ig .service-card i.service-ico {

    transition: transform 0.4s var(--ease-spring);

}

body.theme-ig .service-card:hover .service-icon,

body.theme-ig .service-card:hover .service-emoji,

body.theme-ig .service-card:hover i.service-ico {

    transform: scale(1.2) rotate(-8deg);

}

/* ---------- PRICING - contador de preco em update ---------- */

body.theme-ig .price-display,

body.theme-ig .price-info .price,

body.theme-ig #totalPrice,

body.theme-ig #comboTotalPrice {

    transition: color 0.2s, transform 0.2s var(--ease-spring);

}

.price-flash {

    animation: priceFlash 0.5s var(--ease-spring);

}

@keyframes priceFlash {

    0%   { transform: scale(1); }

    35%  { transform: scale(1.15); color: #feda75; }

    100% { transform: scale(1); }

}

/* ==========================================================

   ANIMACOES PARADAS (override das animacoes infinitas do style.css

   que causavam "tremor" visual - tracos coloridos fluindo, icones piscando)

   ========================================================== */

/* .feature i tem `animation: gradientFlow 10s infinite` no style.css

   - o gradient fica fluindo, parece "piscando". Para. */

.feature i,

.feature > i,

.features i {

    animation: none !important;

    background: var(--grad-vibrant, linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b)) !important;

    background-size: 100% 100% !important;

}

/* .down-hint i tem `animation: bounceY 1s infinite` no style.css

   - a seta fica pulando 6px a cada segundo. Para. */

.down-hint i,

.down-hint .bi {

    animation: none !important;

    transform: none !important;

}

/* .btn-cta tem `animation: ctaPulse 2s infinite` - box-shadow pulse que pode

   parecer "respiracao" e contribuir para sensacao de tremor. Parando tambem. */

.btn-cta,

.btn-cta-tk,

.btn-cta-kw,

.btn-cta-tg {

    animation: none !important;

}

/* REDEFINE as keyframes `gradientFlow` e `floatSlow` do style.css para serem no-op.

   Isso para TODOS os elementos que usam essas animacoes de uma vez

   (logo, section titles, cta-button, tab-button, service-button, contact-item,

    faq, footer, etc. - todos os "tracos coloridos" que ficam fluindo). */


@keyframes floatSlow {

    0%, 100% { transform: translate(0, 0); }

}

/* Tambem para o `pulse` e `pulseGlow` que ficam piscando em barras de progresso

   e status (nao funcionais, so decorativos). */

@keyframes pulse {

    0%, 100% { /* parado */ }

}

@keyframes pulseGlow {

    0%, 100% { /* parado */ }

}

/* ==========================================================

   SISTEMA DE ANIMACOES DE INTERACAO (LENTO + FLUIDO)

   ==========================================================

   Tudo aqui e centrado em:

   - Duracoes longas (0.4-0.7s) para sensacao de "premium"

   - cubic-bezier(0.16, 1, 0.3, 1) (spring-out) para entradas

   - cubic-bezier(0.4, 0, 0.2, 1) (ease-in-out) para estados

   - SOMENTE opacity/transform/box-shadow (nao mexe em layout)

   - JS detecta display:none ? block e troca classes (is-open / is-closing)

   ========================================================== */

/* ---------- MODAIS: animacao suave de entrada/saida ---------- */

/* Usa display:none/block controlado pelo script.js */

/* O CSS so anima opacity/transform quando a classe is-open esta presente */

.modal {

    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important,

                backdrop-filter 0.7s ease !important;

}

.modal.is-open {

    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,

                backdrop-filter 0.8s ease !important;

}

/* Conteudo do modal: slide + scale + fade */

.modal-content {

    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),

                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.modal.is-open .modal-content {

    animation: modalContentIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;

}

@keyframes modalContentIn {

    from { opacity: 0; transform: translateY(40px) scale(0.95); }

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

}

/* Filhos diretos aparecem em cascata (LENTO + GRADUAL) */

.modal.is-open .modal-content > * {

    animation: modalChildIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

}

.modal.is-open .modal-content > *:nth-child(1) { animation-delay: 0.2s; }

.modal.is-open .modal-content > *:nth-child(2) { animation-delay: 0.3s; }

.modal.is-open .modal-content > *:nth-child(3) { animation-delay: 0.4s; }

.modal.is-open .modal-content > *:nth-child(4) { animation-delay: 0.5s; }

.modal.is-open .modal-content > *:nth-child(5) { animation-delay: 0.6s; }

.modal.is-open .modal-content > *:nth-child(6) { animation-delay: 0.7s; }

.modal.is-open .modal-content > *:nth-child(7) { animation-delay: 0.8s; }

.modal.is-open .modal-content > *:nth-child(8) { animation-delay: 0.9s; }

@keyframes modalChildIn {

    from { opacity: 0; transform: translateY(20px); }

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

}

/* Botao de fechar gira ao abrir */

.modal.is-open .modal-close,

.modal.is-open .close {

    animation: closeSpinIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;

}

@keyframes closeSpinIn {

    from { opacity: 0; transform: rotate(-180deg) scale(0.5); }

    to   { opacity: 1; transform: rotate(0) scale(1); }

}

/* ---------- FORMULARIOS: focus suave, glow + leve scale ---------- */

input[type="text"],

input[type="number"],

input[type="email"],

input[type="tel"],

input[type="url"],

input[type="search"],

input[type="password"],

textarea,

select,

.form-control,

.form-input,

input.input-field {

    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),

                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),

                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),

                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

input[type="text"]:focus,

input[type="number"]:focus,

input[type="email"]:focus,

input[type="tel"]:focus,

input[type="url"]:focus,

input[type="search"]:focus,

input[type="password"]:focus,

textarea:focus,

select:focus,

.form-control:focus,

.form-input:focus,

input.input-field:focus {

    transform: scale(1.008) !important;

    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18),

                0 4px 18px rgba(168, 85, 247, 0.10) !important;

}

input[type="checkbox"]:focus,

input[type="radio"]:focus {

    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;

    outline: none;

}

/* Checkbox toggle (enableMultiLinks) - smooth transition */

input[type="checkbox"] {

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),

                background 0.3s ease,

                box-shadow 0.3s ease !important;

}

input[type="checkbox"]:hover {

    transform: scale(1.12);

}

input[type="checkbox"]:checked {

    animation: checkboxPop 0.45s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes checkboxPop {

    0%   { transform: scale(1); }

    40%  { transform: scale(1.25); }

    100% { transform: scale(1); }

}

/* ---------- BOTOES: hover lift + click compress + ripple ---------- */

button,

.btn,

a.btn,

input[type="submit"],

input[type="button"],

.service-button,

.order-button,

.add-cart-button,

.cta-button,

.nav-cta,

.mobile-buy-bar__btn,

.copy-btn,

.copy-pix-btn,

.variant-button,

.quantity-controls button {

    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.55s ease,

                background 0.55s ease,

                color 0.55s ease,

                border-color 0.55s ease,

                filter 0.55s ease !important;

    will-change: transform;

}

button:hover:not(.hamburger):not(#hamburgerBtn),

.btn:hover,

a.btn:hover,

.service-button:hover,

.order-button:hover,

.add-cart-button:hover,

.cta-button:hover,

.nav-cta:hover,

.copy-btn:hover,

.copy-pix-btn:hover,

.variant-button:hover,

.quantity-controls button:hover {

    transform: translateY(-2px) !important;

    filter: brightness(1.06);

}

button:active:not(.hamburger):not(#hamburgerBtn),

.btn:active,

a.btn:active,

.service-button:active,

.order-button:active,

.add-cart-button:active,

.cta-button:active,

.nav-cta:active,

.copy-btn:active,

.copy-pix-btn:active,

.variant-button:active,

.quantity-controls button:active {

    transform: translateY(0) scale(0.97) !important;

    transition-duration: 0.15s !important;

}

button:hover:not(.hamburger):not(#hamburgerBtn),

.btn:hover,

a.btn:hover,

.service-button:hover,

.order-button:hover,

.add-cart-button:hover,

.cta-button:hover,

.nav-cta:hover,

.copy-btn:hover,

.copy-pix-btn:hover,

.variant-button:hover,

.quantity-controls button:hover {

    transform: translateY(-2px) !important;

    filter: brightness(1.06);

}

button:active:not(.hamburger):not(#hamburgerBtn),

.btn:active,

a.btn:active,

.service-button:active,

.order-button:active,

.add-cart-button:active,

.cta-button:active,

.nav-cta:active,

.copy-btn:active,

.copy-pix-btn:active,

.variant-button:active,

.quantity-controls button:active {

    transform: translateY(0) scale(0.97) !important;

    transition-duration: 0.12s !important;

}

/* Ripple effect (criado dinamicamente pelo JS) */

.btn-ripple {

    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.45);

    pointer-events: none;

    transform: scale(0);

    animation: ripple 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

@keyframes ripple {

    to {

        transform: scale(4);

        opacity: 0;

    }

}

/* ---------- QUANTITY SLIDER: thumb pulsante + track gradient ---------- */

input[type="range"] {

    -webkit-appearance: none;

    appearance: none;

    background: transparent;

    transition: filter 0.3s ease !important;

}

input[type="range"]:hover {

    filter: brightness(1.1);

}

input[type="range"]::-webkit-slider-runnable-track {

    height: 6px;

    border-radius: 3px;

    background: linear-gradient(to right,

        var(--primary, #a855f7) 0%,

        var(--secondary, #ec4899) var(--slider-fill, 50%),

        rgba(255,255,255,0.10) var(--slider-fill, 50%),

        rgba(255,255,255,0.10) 100%);

    transition: background 0.2s ease;

}

input[type="range"]::-moz-range-track {

    height: 6px;

    border-radius: 3px;

    background: rgba(255,255,255,0.10);

}

input[type="range"]::-moz-range-progress {

    height: 6px;

    border-radius: 3px;

    background: linear-gradient(to right, #a855f7, #ec4899);

}

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: linear-gradient(135deg, #a855f7, #ec4899);

    border: 3px solid #fff;

    margin-top: -8px;

    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.45);

    cursor: pointer;

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.3s ease !important;

}

input[type="range"]::-webkit-slider-thumb:hover {

    transform: scale(1.25);

    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.7);

}

input[type="range"]::-webkit-slider-thumb:active {

    transform: scale(1.4);

}

input[type="range"]::-moz-range-thumb {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: linear-gradient(135deg, #a855f7, #ec4899);

    border: 3px solid #fff;

    cursor: pointer;

    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.45);

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

input[type="range"]::-moz-range-thumb:hover {

    transform: scale(1.25);

}

/* ---------- NETWORK CARDS (selecao de rede social) ---------- */

.network-card {

    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                border-color 0.6s ease,

                box-shadow 0.6s ease,

                background 0.6s ease !important;

}

.network-card:hover {

    transform: translateY(-6px) scale(1.02) !important;

    box-shadow: 0 14px 36px rgba(168, 85, 247, 0.22) !important;

}

.network-card.is-selected,

.network-card.selected,

.network-card.active {

    transform: scale(1.04) !important;

    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.45),

                0 14px 40px rgba(168, 85, 247, 0.32) !important;

}

@keyframes networkPulse {

    0%   { transform: scale(1); }

    40%  { transform: scale(1.07); }

    100% { transform: scale(1.04); }

}

.network-card.is-pulsing {

    animation: networkPulse 1s cubic-bezier(0.16, 1, 0.3, 1) 1 !important;

}

/* ---------- TAB CONTENT SWITCH (profile-preview, form sections) ---------- */

/* select-lead e faq-answer: controlado por [data-aos] */

.tab-content,

.profile-preview,

.network-content,

.tab-pane,

.form-section,

.modal-content > div {

    animation: tabFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes tabFadeIn {

    from { opacity: 0; transform: translateY(18px); }

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

}

/* ---------- PROFILE PREVIEW: scale + fade in ---------- */

.profile-preview,

#profilePreview,

[id*="profilePreview"] {

    animation: profileReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes profileReveal {

    from { opacity: 0; transform: scale(0.9) translateY(20px); }

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

}

.profile-preview img,

#profilePreview img {

    animation: profileImgPop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;

}

@keyframes profileImgPop {

    from { opacity: 0; transform: scale(0.7); }

    to   { opacity: 1; transform: scale(1); }

}

/* ---------- COMMENT ITEMS: slide + fade quando adicionados ---------- */

.comment-item,

.comments-list > *,

.comment,

.generated-comment {

    animation: commentSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes commentSlideIn {

    from { opacity: 0; transform: translateX(-18px) scale(0.96); }

    to   { opacity: 1; transform: translateX(0) scale(1); }

}

/* ---------- ORDER CARD: entrada quando adicionado a lista ---------- */

.order-card,

.cart-item,

.orders-list > * {

    animation: orderCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes orderCardIn {

    from { opacity: 0; transform: translateX(28px) scale(0.96); }

    to   { opacity: 1; transform: translateX(0) scale(1); }

}

/* ---------- MULTI-LINK FIELDS: smooth add/remove ---------- */

.multi-link-field,

.multi-link-row,

.multi-links-fields > * {

    animation: multiLinkIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes multiLinkIn {

    from { opacity: 0; transform: translateY(-12px) scale(0.97); }

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

}

/* ---------- ERROR / SUCCESS MESSAGES: slide in from right ---------- */

.error-message,

.success-message,

.toast,

.notification {

    animation: notifSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes notifSlideIn {

    from { opacity: 0; transform: translateX(40px) scale(0.94); }

    to   { opacity: 1; transform: translateX(0) scale(1); }

}

.error-message.show,

.success-message.show {

    animation: notifShake 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes notifShake {

    0%   { opacity: 0; transform: translateX(40px) scale(0.94); }

    60%  { opacity: 1; transform: translateX(-6px) scale(1.02); }

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

}

/* ---------- VARIANT CARDS (curtidas/visualizacoes/seguidores) ---------- */

.variant-card,

.variant-option,

.variant-button {

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s ease,

                border-color 0.4s ease,

                background 0.4s ease !important;

}

.variant-card:hover,

.variant-option:hover,

.variant-button:hover {

    transform: translateY(-4px) scale(1.015) !important;

    box-shadow: 0 10px 28px rgba(168, 85, 247, 0.20) !important;

}

.variant-card.selected,

.variant-option.selected,

.variant-button.selected,

.variant-card.is-selected,

.variant-option.is-selected {

    transform: scale(1.02) !important;

    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.5),

                0 12px 32px rgba(168, 85, 247, 0.30) !important;

    animation: variantPop 0.55s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes variantPop {

    0%   { transform: scale(1); }

    50%  { transform: scale(1.06); }

    100% { transform: scale(1.02); }

}

/* ---------- COUNTERS / NUMEROS: pulse + glow ao mudar ---------- */

.counter,

[data-counter],

.price,

#totalPrice { color: #fff; transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; }

.total-price,

#comboTotalPrice,

#totalLinksCount,

#totalMultiQuantity,

.price-display {

    transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.counter.flash,

[data-counter].flash,

.price.flash,

.total-price.flash,

#totalPrice.flash,

#comboTotalPrice.flash {

    animation: numberFlash 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes numberFlash {

    0%   { transform: scale(1); color: var(--text, #fff); }

    35%  { transform: scale(1.18); color: #fbbf24; text-shadow: 0 0 18px rgba(251, 191, 36, 0.7); }

    100% { transform: scale(1); color: var(--text, #fff); text-shadow: none; }

}

/* ---------- PIX MODAL: QR code zoom + glow ---------- */

#pixQRCode img,

.pix-qr-container img,

.pix-qr img {

    animation: qrZoomIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes qrZoomIn {

    from { opacity: 0; transform: scale(0.6) rotate(-6deg); }

    to   { opacity: 1; transform: scale(1) rotate(0); }

}

.pix-info,

.pix-copy,

.pix-timer {

    animation: tabFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;

}

/* ---------- SELECT LEAD: smooth card expansion ---------- */

.lead-badge,

.select-lead h3,

.select-lead p {

    transition: color 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.select-lead:hover h3 {

    color: #a855f7;

    transform: translateX(4px);

}

/* ---------- FAQ: smooth height transition (mantem aria-expanded) ---------- */

.faq-item .faq-answer,

.faq-answer {

    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1),

                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                padding 0.7s ease !important;

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

}

.faq-item[aria-expanded="true"] .faq-answer,

.faq-item.open .faq-answer,

.faq-item.is-open .faq-answer {

    max-height: 600px;

    opacity: 1;

    padding-top: 16px !important;

    padding-bottom: 16px !important;

}

/* Pergunta do FAQ: hover suave */

.faq-question,

.faq-item summary,

.faq-item .faq-question,

.faq-item > div:first-child {

    transition: background 0.35s ease, color 0.35s ease, transform 0.3s ease !important;

    cursor: pointer;

}

.faq-item:hover .faq-question,

.faq-item summary:hover {

    background: rgba(168, 85, 247, 0.06);

    transform: translateX(4px);

}

/* Seta do FAQ gira */

.faq-item .faq-arrow,

.faq-item::after,

.faq-question .arrow,

.faq-question::after {

    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.faq-item[aria-expanded="true"] .faq-arrow,

.faq-item.open .faq-arrow,

.faq-item[aria-expanded="true"]::after,

.faq-item.open::after {

    transform: rotate(180deg) !important;

}

/* ---------- HEADINGS TIPO "DRAW TITLE": underline animado ---------- */

.reveal-title,

h2.draw-title {

    position: relative;

    display: inline-block;

    padding-bottom: 10px;

}

.reveal-title::after,

h2.draw-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 3px;

    border-radius: 2px;

    background: linear-gradient(90deg, #a855f7, #ec4899);

    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;

}

.reveal-title.is-visible::after,

h2.draw-title.is-visible::after {

    width: 80px;

}

/* ---------- HEADINGS GERAIS: leve slide + fade no scroll ---------- */

.reveal-section h2,

.reveal-section h3 {

    animation: headingSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes headingSlideIn {

    from { opacity: 0; transform: translateY(16px); }

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

}

/* ---------- SECOES: fade in no scroll (background) ---------- */

.reveal-section.is-visible {

    animation: sectionFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;

}

@keyframes sectionFadeIn {

    from { opacity: 0.5; }

    to   { opacity: 1; }

}

/* ---------- TABS (abas) underline transition ---------- */

.tab,

.tab-link,

.tab-item {

    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease !important;

}

.tab:hover,

.tab-link:hover,

.tab-item:hover {

    transform: translateY(-2px);

}

.tab.active,

.tab-link.active,

.tab-item.active {

    animation: tabBounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes tabBounce {

    0%   { transform: scale(1); }

    40%  { transform: scale(1.1); }

    100% { transform: scale(1); }

}

/* ---------- LINKS GERAIS: smooth color transition ---------- */

a {

    transition: color 0.3s ease, opacity 0.3s ease !important;

}

/* ---------- IMG: zoom suave no hover em cards ---------- */

.service-card img,

.process-card img,

.network-card img,

.profile-preview img {

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.service-card:hover img,

.process-card:hover img,

.network-card:hover img {

    transform: scale(1.08);

}

/* ---------- SCROLL SUAVE PARA ANCORAS (ja tem no html, reforcar) ---------- */

html { scroll-behavior: smooth; }

/* ---------- ANIMACOES DE BADGES E TAGS ---------- */

.badge,

.tag,

.label,

.pill {

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.3s ease !important;

}

.badge:hover,

.tag:hover,

.label:hover,

.pill:hover {

    transform: scale(1.08) translateY(-1px);

}

/* ---------- PROCESS / TIMELINE STEPS ---------- */

.process-step,

.process-card,

.step {

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s ease,

                border-color 0.4s ease !important;

}

.process-step:hover,

.process-card:hover,

.step:hover {

    transform: translateY(-6px) !important;

    box-shadow: 0 14px 36px rgba(168, 85, 247, 0.18) !important;

}

/* ---------- HEADER LOGO: subtle pulse on hover ---------- */

.logo a,

.logo h1,

.logo span {

    transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.logo a:hover,

.logo h1:hover {

    filter: brightness(1.15) drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));

    transform: scale(1.04);

}

/* ---------- MOBILE BUY BAR: slide in from bottom ---------- */

.mobile-buy-bar {

    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),

                opacity 0.4s ease !important;

}

.mobile-buy-bar.is-visible {

    transform: translateY(0) !important;

    opacity: 1 !important;

}

.mobile-buy-bar:not(.is-visible) {

    transform: translateY(100%) !important;

    opacity: 0 !important;

}

/* ---------- COPY BUTTONS: feedback visual ---------- */

.copy-btn.copied,

.copy-pix-btn.copied,

.copy-coupon.copied {

    animation: copySuccess 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes copySuccess {

    0%   { transform: scale(1); background: inherit; }

    30%  { transform: scale(1.12); background: rgba(34, 197, 94, 0.25); }

    100% { transform: scale(1); background: inherit; }

}

/* ---------- INPUT FLASH (number change) ---------- */

.flash-num {

    animation: inputFlash 0.55s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes inputFlash {

    0%   { background-color: inherit; transform: scale(1); }

    35%  { background-color: rgba(168, 85, 247, 0.15); transform: scale(1.03); }

    100% { background-color: inherit; transform: scale(1); }

}

/* ---------- PROFILE PREVIEW replay ---------- */

.profile-replay {

    animation: profileReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;

}

/* ---------- HERO TYPING replay ---------- */

.replay-typing {

    animation: typeShimmer 0.6s ease;

}

@keyframes typeShimmer {

    0%   { opacity: 0.4; filter: blur(2px); }

    100% { opacity: 1; filter: blur(0); }

}

/* ---------- SCROLL-TOP click feedback ---------- */

.scroll-top:active {

    transform: scale(0.92) !important;

}

/* ---------- CARDS GERAIS (pricing, testimonials, features) ---------- */

.pricing-card,

.testimonial-card,

.feature,

.service-card {

    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.8s ease,

                border-color 0.8s ease !important;

}

.pricing-card:hover,

.testimonial-card:hover {

    transform: translateY(-8px) !important;

    box-shadow: 0 18px 44px rgba(168, 85, 247, 0.25) !important;

}

/* ---------- HERO BADGE / CALLOUTS ---------- */

.hero-badge,

.callout,

.alert,

.info-banner {

    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.hero-badge:hover,

.callout:hover {

    transform: scale(1.04) translateY(-2px);

}

/* ---------- DIVIDERS: largura animada ---------- */

hr,

.divider,

.section-divider {

    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                opacity 0.6s ease !important;

}

/* ==========================================================

   .options-wrap - EXPANSAO LENTA E FLUIDA (SIMPLES)

   ==========================================================

   Usa display:block com max-height + opacity. SEM duplicar.

   A classe .expanded (controlada pelo app.js) e o gatilho.

   ========================================================== */

/* RESET: anula todas as regras antigas conflitantes */

.options-wrap,

.network-card .options-wrap,

#card-instagram .options-wrap,

#card-tiktok .options-wrap,

#card-kwai .options-wrap,

#card-youtube .options-wrap {

    display: block !important;

    max-height: 0 !important;

    opacity: 0 !important;

    overflow: hidden !important;

    margin-top: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    transform: translateY(-8px) !important;

    grid-template-rows: 0fr !important;

    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important,

                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s !important,

                margin-top 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important,

                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change: max-height, opacity, transform;

    visibility: hidden !important;

    pointer-events: none !important;

}

/* Quando o card pai tem .expanded, mostra as opcoes */

.network-card.expanded > .options-wrap,

.network-card.expanded .options-wrap,

#card-instagram.expanded .options-wrap,

#card-tiktok.expanded .options-wrap,

#card-kwai.expanded .options-wrap,

#card-youtube.expanded .options-wrap {

    max-height: 3000px !important;

    opacity: 1 !important;

    margin-top: 14px !important;

    transform: translateY(0) !important;

    grid-template-rows: 1fr !important;

    visibility: visible !important;

    pointer-events: auto !important;

}

/* ==========================================================

   BORDER-RADIUS MAIOR - MODAIS E CARDS MAIS ARREDONDADOS

   ==========================================================

   Deixa modais e cards com cantos mais suaves

   ========================================================== */

.modal {

    border-radius: 0 !important;

    overflow: hidden !important;

    -webkit-overflow-scrolling: touch;

}

#howItWorksModal .modal-content,

#serviceModal .modal-content,

#customerDataModal .modal-content,

#pixModal .modal-content,

#variantModal .modal-content,

#comboModal .modal-content,

#generateCommentsModal .modal-content,

.modal-content {

    border-radius: 28px !important;

    display: flex !important;

    flex-direction: column !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    max-height: calc(100dvh - 32px) !important;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

}

/* Botao de acao sempre visivel no rodape do card */

.modal-content > .order-button,

#serviceModal .modal-content > button.order-button,

#comboModal .modal-content > button.order-button {

    margin-top: auto !important;

    flex-shrink: 0 !important;

}

/* Modal como flex container: centraliza o card quando o conteudo e menor que a tela */

.modal[style*="display: flex"],

.modal[style*="display:flex"] {

    align-items: center !important;

    justify-content: center !important;

}

@media (max-width: 600px) {

    /* === Modal base - compactar tudo === */
    #howItWorksModal .modal-content,
    #serviceModal .modal-content,
    #customerDataModal .modal-content,
    #pixModal .modal-content,
    #variantModal .modal-content,
    #comboModal .modal-content,
    #generateCommentsModal .modal-content,
    .modal-content {
        border-radius: 18px !important;
        padding: 12px !important;
        max-height: calc(100dvh - 16px) !important;
    }

    /* === serviceModal - compactacao agressiva === */
    #serviceModal h2 {
        font-size: 1.0rem !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.2 !important;
    }

    /* IMPORTANTE / alerts */
    #serviceModal .alert,
    #serviceModal [class*="importante"],
    #serviceModal [class*="warning"],
    #serviceModal .warning-box,
    #serviceModal .notice {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
    }

    /* Botao tutorial - esconder em mobile */
    #serviceModal #serviceTutorialButton,
    #serviceModal .tutorial-button {
        display: none !important;
    }

    /* Input do link do perfil - mais compacto */
    #serviceModal #serviceProfileLink,
    #serviceModal input[type="url"],
    #serviceModal input[type="text"] {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        height: auto !important;
        margin-bottom: 6px !important;
    }

    /* Banner de desconto - compacto */
    #discountInfoBanner {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
    }

    /* Card de tarifa ativa - super compacto */
    .active-rate-card {
        padding: 6px 10px !important;
        margin: 0 0 6px 0 !important;
    }
    .active-rate-header { font-size: 0.62rem !important; margin-bottom: 2px !important; }
    .active-rate-main   { font-size: 0.95rem !important; }
    .active-rate-equiv  { font-size: 0.68rem !important; margin-bottom: 2px !important; }
    .active-rate-note   { font-size: 0.68rem !important; }

    /* Form groups - sem espaco */
    #serviceModal .form-group {
        margin-bottom: 8px !important;
    }
    #serviceModal label {
        font-size: 0.78rem !important;
        margin-bottom: 3px !important;
        font-weight: 600 !important;
    }

    /* Quantity controls - compactos */
    #serviceModal .quantity-controls {
        display: flex !important;
        gap: 4px !important;
        align-items: center !important;
        margin-bottom: 6px !important;
    }
    #serviceModal .quantity-controls input {
        height: 34px !important;
        font-size: 0.9rem !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    #serviceModal .quantity-controls button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 0.9rem !important;
    }

    /* Slider - compacto */
    #serviceModal input[type="range"] {
        height: 24px !important;
        margin: 4px 0 !important;
    }
    #serviceModal .slider-container,
    #serviceModal [class*="slider"] {
        margin: 0 0 6px 0 !important;
    }
    #serviceModal .slider-labels,
    #serviceModal .range-labels {
        font-size: 0.7rem !important;
        margin-top: 2px !important;
    }

    /* Price display - compacto */
    #serviceModal .price-display,
    #serviceModal #priceDisplay {
        padding: 8px 12px !important;
        margin: 6px 0 !important;
        font-size: 0.95rem !important;
    }
    #serviceModal #totalPrice { font-size: 1.1rem !important; }

    /* Comments section - esconder em mobile */
    #serviceModal .comments-section,
    #serviceModal [class*="comment"] {
        display: none !important;
    }

    /* Botao de acao - compacto mas nao sticky */
    #serviceModal .modal-content > .order-button,
    #customerDataModal .modal-content > .order-button,
    #comboModal .modal-content > .order-button,
    #variantModal .modal-content > .order-button,
    #pixModal .modal-content > .order-button,
    .modal-content > .order-button {
        padding: 10px 14px !important;
        font-size: 0.92rem !important;
        margin-top: 6px !important;
        width: 100% !important;
    }

    /* Combo modal e variant modal - compactar */
    #comboModal .modal-content,
    #variantModal .modal-content {
        padding: 12px !important;
    }
    #comboModal .variant-card,
    #variantModal .variant-card,
    #comboModal .option-card,
    #variantModal .option-card {
        padding: 10px !important;
        margin-bottom: 6px !important;
    }
    #comboModal .variant-card h3,
    #variantModal .variant-card h3,
    #comboModal h3,
    #variantModal h3 {
        font-size: 0.9rem !important;
        margin: 0 0 4px 0 !important;
    }
}

/* ---------- Cards com border-radius maior ---------- */

.service-card,

.feature,

.process-card,

.contact-item,

.pricing-card,

.testimonial-card,

.network-card,

.option-card,

.variant-card,

.plan-card,

.tier-card,

.faq-item,

.step,

.process-step {

    border-radius: 22px !important;

}

.service-card .service-header,

.service-card .price-info,

.service-card .price-display,

.network-card .options-wrap > * {

    border-radius: 18px !important;

}

.feature i,

.contact-item i,

.option-icon,

.network-card .ig-icon,

.network-card .tk-icon {

    border-radius: 16px !important;

}

.faq-item {

    border-radius: 18px !important;

}

.faq-question {

    border-radius: 18px !important;

}

.mobile-menu-sheet,

#mobileMenuSheet {

    border-radius: 28px 28px 0 0 !important;

}

.service-card img,

.feature img,

.process-card img,

.network-card img,

.profile-preview img,

.testimonial-card img {

    border-radius: 16px;

}

/* ==========================================================

   RESPONSIVIDADE + ANIMACAO DO MENU HAMBURGUER MOBILE

   ==========================================================

   - Corrige alinhamento vertical do botao hamburguer

   - Animacao lenta e fluida ao abrir/fechar o sheet

   - Links do menu aparecem em cascata ao abrir

   - Responsivo em todas as larguras

   ========================================================== */

/* ---------- Hamburguer: alinhamento perfeito no header ---------- */

.hamburger,

#hamburgerBtn {

    display: none;

    width: 44px;

    height: 44px;

    min-width: 44px;

    min-height: 44px;

    max-width: 44px;

    max-height: 44px;

    border: 0;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    flex-shrink: 0;

    z-index: 1002;

    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s ease,

                border-radius 0.4s ease;

}

.hamburger:hover,

#hamburgerBtn:hover {

    background: rgba(255, 255, 255, 0.15);

    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);

}

.hamburger span,

.hamburger .bar,

#hamburgerBtn span,

#hamburgerBtn .bar {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 22px;

    height: 2.5px;

    margin-left: -11px;

    margin-top: -1.25px;

    background: #fff;

    border-radius: 2px;

    transform-origin: center center;

    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),

                opacity 0.5s ease,

                top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.hamburger span:nth-child(1),

.hamburger .bar:nth-child(1),

#hamburgerBtn span:nth-child(1),

#hamburgerBtn .bar:nth-child(1) { top: calc(50% - 7px); }

.hamburger span:nth-child(2),

.hamburger .bar:nth-child(2),

#hamburgerBtn span:nth-child(2),

#hamburgerBtn .bar:nth-child(2) { top: 50%; }

.hamburger span:nth-child(3),

.hamburger .bar:nth-child(3),

#hamburgerBtn span:nth-child(3),

#hamburgerBtn .bar:nth-child(3) { top: calc(50% + 7px); }

.hamburger.is-open span,

.hamburger.is-open .bar,

#hamburgerBtn.is-open span,

#hamburgerBtn.is-open .bar {

    top: 50%;

    margin-top: -1.25px;

}

.hamburger.is-open span:nth-child(1),

.hamburger.is-open .bar:nth-child(1),

#hamburgerBtn.is-open span:nth-child(1),

#hamburgerBtn.is-open .bar:nth-child(1) {

    transform: rotate(45deg);

}

.hamburger.is-open span:nth-child(2),

.hamburger.is-open .bar:nth-child(2),

#hamburgerBtn.is-open span:nth-child(2),

#hamburgerBtn.is-open .bar:nth-child(2) {

    opacity: 0;

    transform: scaleX(0);

}

.hamburger.is-open span:nth-child(3),

.hamburger.is-open .bar:nth-child(3),

#hamburgerBtn.is-open span:nth-child(3),

#hamburgerBtn.is-open .bar:nth-child(3) {

    transform: rotate(-45deg);

}

/* ---------- Overlay: fade in lento e fluido ---------- */

.mobile-menu-overlay,

#mobileMenuOverlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(10px) saturate(1.2);

    -webkit-backdrop-filter: blur(10px) saturate(1.2);

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                backdrop-filter 0.7s ease,

                -webkit-backdrop-filter 0.7s ease;

}

.mobile-menu-overlay.open,

#mobileMenuOverlay.open {

    opacity: 1;

    pointer-events: auto;

}

/* ---------- Sheet: slide UP lento e fluido com spring ---------- */

.mobile-menu-sheet,

#mobileMenuSheet {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(160deg, #14161e, #0a0b0f);

    border-top: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 24px 24px 0 0;

    transform: translateY(100%);

    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.9s ease;

    z-index: 1000;

    padding: 70px 24px calc(36px + env(safe-area-inset-bottom, 0px));

    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);

    max-height: 85vh;

    overflow-y: auto;

    overscroll-behavior: contain;

}

.mobile-menu-sheet.open,

#mobileMenuSheet.open {

    transform: translateY(0);

    box-shadow: 0 -30px 80px rgba(139, 92, 246, 0.25);

}

/* ---------- Botao de fechar: gira devagar ---------- */

.mobile-menu-close,

#mobileMenuClose {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 40px;

    height: 40px;

    border: 0;

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: background 0.4s ease,

                transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.mobile-menu-close:hover,

#mobileMenuClose:hover {

    background: rgba(255, 255, 255, 0.18);

    transform: rotate(90deg) scale(1.08);

}

.mobile-menu-close:active,

#mobileMenuClose:active {

    transform: rotate(180deg) scale(0.92);

}

/* ---------- Mobile menu: CTAs + redes sociais ---------- */

.mobile-menu-content {

    margin-top: 72px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.mobile-menu-cta {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 14px;

    padding: 0 18px;

    background: #000;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    color: #fff;

    font-size: 1.05rem;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

    width: 100%;

    height: 64px;

    box-sizing: border-box;

    text-decoration: none;

    opacity: 0;

    transform: translateY(20px);

    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.5s ease !important;

}

.mobile-menu-cta:hover,

.mobile-menu-cta:active {

    background: #111;

    border-color: rgba(255, 255, 255, 0.2);

    transform: translateX(4px) !important;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);

}

.mobile-menu-cta-secondary {

    background: #000;

}

.mobile-menu-cta-icon {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #1a1a1a;

    border: 1px solid rgba(255, 255, 255, 0.06);

    color: #fff;

    font-size: 1.15rem;

    flex-shrink: 0;

    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.mobile-menu-cta:hover .mobile-menu-cta-icon {

    transform: scale(1.1) rotate(-8deg);

}

.mobile-menu-cta-text {

    flex: 1;

}

/* cascata lenta ao abrir */

#mobileMenuSheet.open .mobile-menu-cta,

.mobile-menu-sheet.open .mobile-menu-cta {

    opacity: 1;

    transform: translateY(0);

    animation: mobileMenuCtaIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

}

#mobileMenuSheet.open .mobile-menu-cta:nth-child(1) { animation-delay: 0.25s; }

#mobileMenuSheet.open .mobile-menu-cta:nth-child(2) { animation-delay: 0.35s; }

#mobileMenuSheet.open .mobile-menu-cta:nth-child(3) { animation-delay: 0.45s; }

#mobileMenuSheet.open .mobile-menu-cta:nth-child(4) { animation-delay: 0.55s; }

@keyframes mobileMenuCtaIn {

    from { opacity: 0; transform: translateY(24px) scale(0.96); }

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

}

/* Redes sociais no rodape do menu */

.mobile-menu-social {

    margin-top: 22px;

    display: flex;

    justify-content: center;

    gap: 14px;

    opacity: 0;

    transform: translateY(16px);

    transition: opacity 0.6s ease 0.65s, transform 0.6s ease 0.65s;

}

#mobileMenuSheet.open .mobile-menu-social,

.mobile-menu-sheet.open .mobile-menu-social {

    opacity: 1;

    transform: translateY(0);

}

.mobile-menu-social-link {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #000;

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #fff;

    font-size: 1.25rem;

    text-decoration: none;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);

    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important,

                background 0.5s ease !important,

                box-shadow 0.5s ease !important;

}

.mobile-menu-social-link:hover {

    transform: translateY(-4px) scale(1.1) !important;

    background: #111;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);

}

.mobile-menu-social-link:active {

    transform: scale(0.95) !important;

}

/* ---------- RESPONSIVIDADE: hamburguer visivel em telas pequenas ---------- */

@media (max-width: 1099px) {

    .hamburger,

    #hamburgerBtn {

        display: inline-flex !important;

    }

    .nav,

    #primaryNav {

        display: none !important;

    }

    .header .container {

        position: relative;

        padding-right: 70px;

    }

}

@media (max-width: 768px) {

    .hamburger,

    #hamburgerBtn {

        right: 14px;

        width: 42px;

        height: 42px;

    }

    .header .container {

        padding-right: 64px;

        height: 72px;

    }

    .mobile-menu-sheet,

    #mobileMenuSheet {

        padding: 64px 18px calc(32px + env(safe-area-inset-bottom, 0px));

        border-radius: 20px 20px 0 0;

    }

}

@media (max-width: 480px) {

    .hamburger,

    #hamburgerBtn {

        right: 12px;

        width: 40px;

        height: 40px;

    }

    .header .container {

        padding-right: 58px;

    }

}

@media (max-width: 360px) {

    .hamburger,

    #hamburgerBtn {

        right: 10px;

        width: 38px;

        height: 38px;

    }

    .header .container {

        padding-right: 54px;

    }

}

/* ---------- Bloquear scroll quando menu aberto ---------- */

body.menu-open {

    overflow: hidden;

    position: fixed;

    width: 100%;

}

/* ---------- Feature icons (escudo, relogio, headset, grafico) ---------- */

.feature {

    display: flex !important;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.feature i,

.feature > i,

.features .feature i {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 64px !important;

    height: 64px !important;

    min-width: 64px !important;

    min-height: 64px !important;

    max-width: 64px !important;

    max-height: 64px !important;

    border-radius: var(--r-lg) !important;

    font-size: 1.7rem !important;

    line-height: 1 !important;

    margin: 0 auto 20px !important;

    padding: 0 !important;

    text-align: center;

    /* Centraliza o glyph vertical/horizontal */

    vertical-align: middle;

    /* Garante que o flex interno do FontAwesome seja centralizado */

    -webkit-font-smoothing: antialiased;

}

/* ---------- Contact-item icons (WhatsApp, Email, Telegram) ---------- */

.contact-item {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 18px;

}

.contact-item i,

.contact-info .contact-item i {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 56px !important;

    height: 56px !important;

    min-width: 56px !important;

    min-height: 56px !important;

    max-width: 56px !important;

    max-height: 56px !important;

    flex-shrink: 0;

    border-radius: var(--r-md) !important;

    font-size: 1.5rem !important;

    line-height: 1 !important;

    padding: 0 !important;

    text-align: center;

    -webkit-font-smoothing: antialiased;

}

/* Garante que o flex-wrap em telas pequenas nao quebre o alinhamento */

@media (max-width: 600px) {

    .feature i,

    .feature > i {

        width: 56px !important;

        height: 56px !important;

        min-width: 56px !important;

        min-height: 56px !important;

        max-width: 56px !important;

        max-height: 56px !important;

        font-size: 1.5rem !important;

    }

    .contact-item i {

        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        min-height: 48px !important;

        max-width: 48px !important;

        max-height: 48px !important;

        font-size: 1.3rem !important;

    }

}

/* ==========================================================

   ANIMACOES LENTAS E DRAMATICAS - SCROLL, HOVER, CATEGORIAS

   ==========================================================

   Estas animacoes sao mais lentas e suaves para criar uma

   sensacao premium ao rolar a pagina e interagir com cards.

   ========================================================== */

/* ---------- 1) SLOW SCROLL REVEAL - Textos e cards aparecem MUITO lentamente ---------- */

[data-aos] {

    transition: opacity 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),

                transform 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),

                filter 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms) !important;

}

/* Translates mais longos para sentir a "viagem" ao aparecer */

[data-aos="fade-up"] { transform: translate3d(0, 60px, 0) !important; }

[data-aos="fade-down"] { transform: translate3d(0, -60px, 0) !important; }

[data-aos="fade-left"] { transform: translate3d(-50px, 0, 0) !important; }

[data-aos="fade-right"] { transform: translate3d(50px, 0, 0) !important; }

[data-aos="zoom-in"] { transform: scale(0.82) !important; }

[data-aos="flip-up"] { transform: perspective(800px) rotateX(-12deg) translateY(36px) !important; }

/* ---------- 2) ICON HOVER - Lentos e expressivos ---------- */

i.fas, i.fab, i.far, i.bi, i.fa,

.feature i, .service-card i, .process-card i,

.contact-item i, .faq-icon, .network-icon,

.option-icon i, .step i, .tab-button i,

.cta-button i, .btn i, .order-button i,

.hamburger i, .logo i, .nav-cta i {

    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),

                color 0.5s ease,

                filter 0.5s ease,

                text-shadow 0.5s ease !important;

    display: inline-block;

    will-change: transform;

}

/* Hover em cards/buttons faz o icone "saltar" e girar levemente */

.service-card:hover i,

.feature:hover i,

.process-card:hover i,

.contact-item:hover i,

.network-card:hover i,

.option-card:hover i,

.step:hover i,

.cta-button:hover i,

.btn:hover i:not(.fa-spin),

.tab-button:hover i,

.faq-item:hover .faq-icon {

    transform: scale(1.35) rotate(-12deg) translateY(-3px);

    filter: drop-shadow(0 6px 12px rgba(168, 85, 247, 0.55));

}

/* Variacao: icones rotacionam sentido contrario em alguns elementos */

.process-card:hover i,

.contact-item:hover i,

.tab-button:hover i {

    transform: scale(1.3) rotate(8deg) translateY(-2px);

}

/* Icones dentro de botoes fazem um leve "punch" */

button:hover i,

.order-button:hover i,

.add-cart-button:hover i,

.service-button:hover i,

.cta-button:hover i {

    animation: iconPunch 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}

@keyframes iconPunch {

    0%   { transform: scale(1) rotate(0); }

    35%  { transform: scale(1.5) rotate(-15deg); }

    65%  { transform: scale(1.15) rotate(8deg); }

    100% { transform: scale(1.25) rotate(-8deg); }

}

/* ---------- 3) CONTAINERS / CATEGORIAS - abertura lenta e suave ---------- */

/* category, container, panel, accordion, collapsible */

.category, .container-card, .panel, .accordion-item,

.collapsible, .expandable, .dropdown-panel,

.section-content, .collapse-content,

.tabs-content, .tab-body {

    transition: max-height 0.9s cubic-bezier(0.16, 1, 0.3, 1),

                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                padding 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.7s ease,

                border-color 0.7s ease !important;

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transform: translateY(-8px);

    will-change: max-height, opacity, transform;

}

.category.is-open, .container-card.is-open, .panel.is-open,

.accordion-item.is-open, .collapsible.is-open, .expandable.is-open,

.dropdown-panel.is-open, .section-content.is-open,

.collapse-content.is-open, .tabs-content.is-open, .tab-body.is-open,

.category.open, .container-card.open, .panel.open,

.accordion-item.open, .collapsible.open, .expandable.open,

[aria-expanded="true"].category,

[aria-expanded="true"].container-card,

[aria-expanded="true"].panel,

[aria-expanded="true"].accordion-item {

    max-height: 2000px;

    opacity: 1;

    transform: translateY(0);

    padding-top: 16px;

    padding-bottom: 16px;

}

/* Filhos diretos aparecem em cascata (mais lentos) */

.category.is-open > *, .category.open > *,

.container-card.is-open > *, .container-card.open > *,

.panel.is-open > *, .panel.open > *,

.accordion-item.is-open > *, .accordion-item.open > * {

    animation: categoryChildIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;

}

.category.is-open > *:nth-child(1), .category.open > *:nth-child(1),

.container-card.is-open > *:nth-child(1), .container-card.open > *:nth-child(1) { animation-delay: 0.1s; }

.category.is-open > *:nth-child(2), .category.open > *:nth-child(2),

.container-card.is-open > *:nth-child(2), .container-card.open > *:nth-child(2) { animation-delay: 0.2s; }

.category.is-open > *:nth-child(3), .category.open > *:nth-child(3),

.container-card.is-open > *:nth-child(3), .container-card.open > *:nth-child(3) { animation-delay: 0.3s; }

.category.is-open > *:nth-child(4), .category.open > *:nth-child(4),

.container-card.is-open > *:nth-child(4), .container-card.open > *:nth-child(4) { animation-delay: 0.4s; }

.category.is-open > *:nth-child(5), .category.open > *:nth-child(5),

.container-card.is-open > *:nth-child(5), .container-card.open > *:nth-child(5) { animation-delay: 0.5s; }

.category.is-open > *:nth-child(6), .category.open > *:nth-child(6),

.container-card.is-open > *:nth-child(6), .container-card.open > *:nth-child(6) { animation-delay: 0.6s; }

@keyframes categoryChildIn {

    from { opacity: 0; transform: translateY(20px) scale(0.96); }

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

}

/* ---------- 4) CARDS LENTOS no hover (mais "premium") ---------- */

.service-card, .feature, .process-card,

.contact-item, .pricing-card, .testimonial-card,

.network-card, .option-card, .step,

.variant-card, .plan-card {

    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1),

                border-color 0.85s ease,

                background 0.85s ease !important;

    will-change: transform, box-shadow;

}

.service-card:hover, .feature:hover, .process-card:hover,

.contact-item:hover, .pricing-card:hover, .testimonial-card:hover,

.network-card:hover, .option-card:hover, .step:hover,

.variant-card:hover, .plan-card:hover {

    transform: translateY(-10px) scale(1.012) !important;

    box-shadow: 0 28px 70px rgba(168, 85, 247, 0.28),

                0 0 0 1px rgba(168, 85, 247, 0.18) !important;

}

/* ---------- 5) TEXTOS em headers/paragrafos aparecem com "viagem" maior ---------- */

section p, section li, section span, section a,

.hero-content p, .lead-text, .intro-text, .text-block,

.section-subtitle, .section-description, .description {

    transition: opacity 0.6s ease, transform 0.6s ease !important;

}

/* ---------- 6) BORDAS ANIMADAS nos cards (aparecem devagar no hover) ---------- */

.service-card::before, .feature::before, .process-card::before,

.network-card::before, .option-card::before {

    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),

                width 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

/* ---------- 7) SECTION BACKGROUNDS - fade in super lento ---------- */

section, .section {

    transition: background 1.2s ease, opacity 1.2s ease !important;

}

/* ---------- 8) LINKS SUAVES no hover (sublinhado lento) ---------- */

.animated-link, section a:not(.btn):not(.cta-button):not(.service-button) {

    transition: color 0.5s ease, transform 0.5s ease !important;

}

.animated-link::after {

    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

/* ---------- 9) BADGES, TAGS, PILLS - aparecimento lento ---------- */

.badge, .tag, .label, .pill, .chip {

    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.6s ease,

                background 0.6s ease,

                color 0.6s ease !important;

}

/* ---------- 10) HEADINGS TITULOS - underline lento e dramatico ---------- */

h1, h2, h3, h4 {

    transition: color 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

/* ---------- 11) DETALHES ESPECIAIS: card com glow persistente ---------- */

.service-card::after, .feature::after, .pricing-card::after {

    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

/* ---------- 12) SCROLL REVEAL - mais lento e mais "viagem" ---------- */

[data-aos].aos-animate {

    transition: opacity 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),

                transform 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),

                filter 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms) !important;

}

/* ==========================================================

   ANIMACOES LENTAS DE EXPANSAO - FAQ, CATEGORIAS, CARDS

   ==========================================================

   Substitui transicoes rapidas (0.35s) por lentas e fluidas

   ========================================================== */

/* ---------- FAQ: abertura lenta e suave (substitui 0.35s do style.css) ---------- */

.faq-item .faq-content,

.faq-content {

    transition: max-height 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important,

                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s !important,

                padding 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important,

                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;

    transform: translateY(-6px);

}

.faq-item.open .faq-content,

.faq-item[aria-expanded="true"] .faq-content,

.faq-item.is-open .faq-content {

    transform: translateY(0);

}

/* Filhos do FAQ aparecem em cascata ao abrir */

.faq-item.open .faq-content > *,

.faq-item.is-open .faq-content > *,

.faq-item[aria-expanded="true"] .faq-content > * {

    animation: faqChildIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

}

.faq-item.open .faq-content > *:nth-child(1),

.faq-item.is-open .faq-content > *:nth-child(1) { animation-delay: 0.15s; }

.faq-item.open .faq-content > *:nth-child(2),

.faq-item.is-open .faq-content > *:nth-child(2) { animation-delay: 0.25s; }

.faq-item.open .faq-content > *:nth-child(3),

.faq-item.is-open .faq-content > *:nth-child(3) { animation-delay: 0.35s; }

@keyframes faqChildIn {

    from { opacity: 0; transform: translateY(12px); }

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

}

/* ---------- Network-card: chevron gira devagar ---------- */

.network-card .bi-chevron-down {

    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

/* Chevron gira devagar */

.network-card .bi-chevron-down {

    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

/* ---------- Option-chip / option-card: cascata ao expandir ---------- */

.network-card.expanded .options-wrap > * {

    animation: optionIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

}

.network-card.expanded .options-wrap > *:nth-child(1) { animation-delay: 0.2s; }

.network-card.expanded .options-wrap > *:nth-child(2) { animation-delay: 0.3s; }

.network-card.expanded .options-wrap > *:nth-child(3) { animation-delay: 0.4s; }

.network-card.expanded .options-wrap > *:nth-child(4) { animation-delay: 0.5s; }

.network-card.expanded .options-wrap > *:nth-child(5) { animation-delay: 0.6s; }

.network-card.expanded .options-wrap > *:nth-child(6) { animation-delay: 0.7s; }

.network-card.expanded .options-wrap > *:nth-child(7) { animation-delay: 0.8s; }

.network-card.expanded .options-wrap > *:nth-child(8) { animation-delay: 0.9s; }

@keyframes optionIn {

    from { opacity: 0; transform: translateY(16px) scale(0.96); }

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

}

/* ---------- Tab-button (abas de plataforma) ---------- */

.tab-button,

.platform-tabs button {

    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.5s ease,

                background 0.5s ease,

                color 0.4s ease,

                border-color 0.4s ease !important;

}

.tab-button:hover {

    transform: translateY(-3px) scale(1.02) !important;

}

.tab-button.active {

    animation: tabActiveIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

}

@keyframes tabActiveIn {

    0%   { transform: scale(0.92); }

    50%  { transform: scale(1.08); }

    100% { transform: scale(1); }

}

@media (prefers-reduced-motion: reduce) {

    .scroll-progress,

    .bg-orb,

    .cursor-glow,

    .pix-qr-container,

    .pix-countdown,

    .hero-badge,

    body.theme-ig #typing,

    body.theme-ig #static-word,

    body.theme-ig .final-cta::before,

    body.theme-ig .logo h1,

    body.theme-ig .footer,

    .reveal-section,

    .stagger-item,

    .reveal-title::after,

    .trust-marquee__track,

    #discountBadge,

    .modal,

    .modal-content,

    .modal.is-open .modal-content > *,

    .modal.is-open .close,

    .profile-replay,

    .replay-typing,

    .flash-num,

    .network-card.is-selected,

    .variant-card.selected,

    .variant-card.is-selected,

    .counter.flash,

    [data-counter].flash,

    .price.flash,

    .total-price.flash,

    #totalPrice.flash,

    #comboTotalPrice.flash,

    .copy-btn.copied,

    .copy-pix-btn.copied,

    .comment-item,

    .order-card,

    .multi-link-field,

    .error-message,

    .success-message,

    .tab.active,

    .tab-link.active,

    input[type="checkbox"]:checked,

    #pixQRCode img,

    .pix-qr-container img,

    .tab-content,

    .profile-preview,

    .faq-item .faq-answer { animation: none !important; }

    .reveal-section, .stagger-item,

    .modal-content,

    .modal,

    .profile-preview,

    .tab-content { opacity: 1 !important; transform: none !important; }

    .reveal-title::after { width: 80px !important; }

    .modal { visibility: visible !important; pointer-events: auto !important; }

    .scroll-top, .cursor-glow { transition: opacity 0.3s !important; }

    .faq-item .faq-answer { max-height: none !important; opacity: 1 !important; padding: inherit !important; }

    .options-wrap, .network-card .options-wrap { max-height: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }

    .hamburger, #hamburgerBtn, .mobile-menu-sheet, #mobileMenuSheet, .mobile-menu-overlay, #mobileMenuOverlay, .mobile-menu-cta, .mobile-menu-social, .mobile-menu-social-link { transition: none !important; animation: none !important; }

}

/* ==========================================================

   TOGGLE SWITCH (checkbox estilizado)

   ========================================================== */

.toggle-container {

    display: flex;

    align-items: center;

    gap: 12px;

}

.toggle-checkbox {

    appearance: none;

    -webkit-appearance: none;

    position: relative;

    width: 48px;

    height: 26px;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    cursor: pointer;

    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                border-color 0.4s ease;

    flex-shrink: 0;

    margin: 0;

    padding: 0;

    outline: none;

}

.toggle-checkbox::before {

    content: '';

    position: absolute;

    top: 2px;

    left: 2px;

    width: 20px;

    height: 20px;

    background: #fff;

    border-radius: 50%;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.toggle-checkbox:checked {

    background: linear-gradient(135deg, #8b5cf6, #ec4899);

    border-color: transparent;

}

.toggle-checkbox:checked::before {

    transform: translateX(22px);

}

.toggle-checkbox:focus-visible {

    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);

}

.toggle-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    color: #fff;

    font-weight: 600;

}

.toggle-icon { font-size: 1.1rem; }

.toggle-description,

.toggle-text {

    color: #cbd5e1;

}

/* ==========================================================

   INPUTS DE TEXTO / NUMERO (link + quantidade)

   ========================================================== */

#linkInput,

input[type="text"]:not(.toggle-checkbox):not(.network-search-input),

input[type="number"] {

    width: 100%;

    padding: 12px 14px;

    background: #0d0e14;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    font-size: 0.95rem;

    font-family: inherit;

    outline: none;

    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                background 0.4s ease;

    box-sizing: border-box;

}

#linkInput::placeholder,

input[type="text"]::placeholder,

input[type="number"]::placeholder {

    color: rgba(255, 255, 255, 0.4);

}

#linkInput:hover,

input[type="text"]:hover,

input[type="number"]:hover {

    border-color: rgba(139, 92, 246, 0.4);

}

#linkInput:focus,

input[type="text"]:focus,

input[type="number"]:focus {

    border-color: rgba(139, 92, 246, 0.7);

    background: #11121a;

    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);

}

/* ==========================================================

   MULTI-LINKS: layout horizontal organizado

   ========================================================== */

.multi-links-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

    gap: 10px;

    flex-wrap: wrap;

}

.multi-links-header label {

    color: #fff;

    font-weight: 600;

}

.add-link-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 14px;

    background: linear-gradient(135deg, #8b5cf6, #ec4899);

    color: #fff;

    border: none;

    border-radius: 10px;

    font-weight: 700;

    font-size: 0.9rem;

    cursor: pointer;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s ease,

                filter 0.4s ease;

}

.add-link-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.4);

    filter: brightness(1.08);

}

.add-link-btn:active {

    transform: translateY(0) scale(0.97);

}

.multi-link-field {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    flex-wrap: wrap;

    padding: 8px;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

}

.multi-link-field .field-label {

    color: #cbd5e1;

    font-weight: 600;

    font-size: 0.88rem;

    min-width: 56px;

}

.multi-link-field input[type="text"] {

    flex: 1 1 220px;

    min-width: 180px;

}

.multi-link-field input[type="number"] {

    flex: 0 0 90px;

    min-width: 80px;

}

.remove-link-btn {

    width: 38px;

    height: 38px;

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.3);

    color: #fca5a5;

    border-radius: 10px;

    cursor: pointer;

    font-size: 1rem;

    transition: background 0.4s ease,

                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                color 0.4s ease;

    flex-shrink: 0;

}

.remove-link-btn:hover {

    background: rgba(239, 68, 68, 0.3);

    color: #fff;

    transform: scale(1.05);

}

.remove-link-btn:active {

    transform: scale(0.95);

}

.multi-links-summary {

    margin-top: 12px;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    padding: 10px 14px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    color: #cbd5e1;

    font-size: 0.9rem;

}

.multi-links-summary strong { color: #fff; }

/* ==========================================================

   THEME SELECT (Gerar Comentarios) - caixa clicavel

   ========================================================== */

.generate-modal .form-group:has(.theme-select) {

    position: relative;

    z-index: 5;

}

.theme-select {

    position: relative;

    width: 100%;

    background: #0d0e14;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    padding: 12px 14px;

    color: #fff;

    font-size: 0.95rem;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    user-select: none;

    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                background 0.4s ease;

    outline: none;

    box-sizing: border-box;

    z-index: 5;

}

.theme-select:hover {

    border-color: rgba(139, 92, 246, 0.4);

}

.theme-select:focus-visible,

.theme-select.open {

    border-color: rgba(139, 92, 246, 0.7);

    background: #11121a;

    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);

}

.theme-select__value {

    flex: 1;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.theme-select__chevron {

    width: 22px;

    height: 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #cbd5e1;

    font-size: 1.1rem;

    line-height: 1;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    flex-shrink: 0;

}

.theme-select.open .theme-select__chevron {

    transform: rotate(180deg);

}

.theme-select__list {

    position: absolute;

    top: calc(100% + 6px);

    left: 0;

    right: 0;

    margin: 0;

    padding: 6px;

    list-style: none;

    background: #11121a;

    border: 1px solid rgba(139, 92, 246, 0.4);

    border-radius: 12px;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);

    z-index: 9999;

    max-height: 0;

    overflow: hidden auto;

    opacity: 0;

    pointer-events: none;

    transform: translateY(-6px);

    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),

                opacity 0.3s ease,

                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.theme-select.open .theme-select__list {

    max-height: 320px;

    overflow-y: auto;

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);

}

.theme-select__list li {

    list-style: none;

    padding: 10px 12px;

    border-radius: 8px;

    color: #fff;

    font-size: 0.95rem;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: background 0.3s ease,

                color 0.3s ease,

                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}

.theme-select__list li::before {

    content: '';

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: rgba(139, 92, 246, 0.35);

    flex-shrink: 0;

    transition: background 0.3s ease, transform 0.3s ease;

}

.theme-select__list li:hover {

    background: rgba(139, 92, 246, 0.18);

    transform: translateX(4px);

}

.theme-select__list li:hover::before {

    background: #8b5cf6;

    transform: scale(1.25);

}

.theme-select__list li[aria-selected="true"] {

    background: rgba(139, 92, 246, 0.25);

}

.theme-select__list li[aria-selected="true"]::before {

    background: #ec4899;

    transform: scale(1.3);

}

/* Scrollbar do dropdown */

.theme-select__list::-webkit-scrollbar {

    width: 6px;

}

.theme-select__list::-webkit-scrollbar-track {

    background: transparent;

}

.theme-select__list::-webkit-scrollbar-thumb {

    background: rgba(139, 92, 246, 0.4);

    border-radius: 4px;

}

/* ==========================================================
   COMBOS SECTION
   ========================================================== */

.combos-section {

    padding: 86px 0 92px;

    background:
        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.22), transparent 34%),
        linear-gradient(180deg, #08090d 0%, #12141b 100%);

}

.combos-section .section-header {

    margin-bottom: 28px;

}

.combos-section .section-badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 999px;

    color: #c4b5fd;

    font-size: 0.85rem;

    font-weight: 700;

    margin-bottom: 12px;

}

.combos-section h3 {

    color: #fff;

    font-size: 2.2rem;

    font-weight: 800;

    margin-bottom: 8px;

}

.combos-section .text-muted {

    color: #94a3b8 !important;

    font-size: 1.05rem;

}

.combos-showcase-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(17, 19, 28, 0.92), rgba(9, 10, 16, 0.96)),
        radial-gradient(circle at 12% 0%, rgba(254, 218, 117, 0.14), transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(236, 72, 153, 0.2), transparent 30%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.combos-showcase-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, #feda75, #fa7e1e, #d62976, #c13584, #833ab4);
    opacity: 0.58;
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

.combos-showcase-card::after {
    content: '';
    position: absolute;
    top: -42%;
    left: -28%;
    width: 52%;
    height: 190%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: rotate(18deg);
    animation: comboShowcaseSweep 7s ease-in-out infinite;
    pointer-events: none;
}

.combos-showcase-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 4px;
}

.combos-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    color: #67e8f9;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.combos-showcase-header h4 {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
}

.combos-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(236, 72, 153, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes comboShowcaseSweep {
    0%, 52% { transform: translateX(0) rotate(18deg); opacity: 0; }
    64% { opacity: 1; }
    100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}

.combos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));

    gap: 18px;

    align-items: stretch;

    position: relative;

    z-index: 1;

}

.combo-card {
    background: linear-gradient(160deg, #14161e, #0d0e14);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s ease,
                box-shadow 0.5s ease;
    cursor: pointer;
}

.combo-card-item {
    background:
        linear-gradient(160deg, rgba(26, 28, 39, 0.96), rgba(11, 12, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 1px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 236px;
    isolation: isolate;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s ease,
                box-shadow 0.5s ease;
}

.combo-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border-radius: 11px;
    background:
        radial-gradient(circle at 12% 10%, rgba(139, 92, 246, 0.18), transparent 32%),
        linear-gradient(160deg, rgba(21, 23, 33, 0.98), rgba(11, 12, 18, 0.98));
}

.combo-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);

    opacity: 0.7;

    transition: opacity 0.4s ease;

}

.combo-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
    opacity: 0.85;
    transition: opacity 0.4s ease, height 0.4s ease;
    z-index: 2;
}

.combo-card-item::after {
    content: '';
    position: absolute;
    inset: auto -28% -44% 18%;
    height: 130px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.25), transparent 68%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.combo-card:hover {

    transform: translateY(-6px) scale(1.01);

    border-color: rgba(139, 92, 246, 0.5);

    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.25);

}

.combo-card:hover::before {

    opacity: 1;

}

.combo-card-item:hover {
    transform: translateY(-8px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.38),
        0 16px 38px rgba(139, 92, 246, 0.2);
}

.combo-card-item[data-aos].aos-animate:hover {
    transform: translateY(-8px) !important;
}

.combo-card-item:hover::before {
    opacity: 1;
    height: 4px;
}

.combo-card-item:hover::after {
    opacity: 1;
}

.combo-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

}

.combo-card h3 {

    color: #fff;

    font-size: 1.2rem;

    font-weight: 800;

    margin: 0;

    line-height: 1.3;

}

.combo-card-item h3 {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.25;
    max-width: 14ch;
}

.combo-platform-badge {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 10px;

    background: rgba(139, 92, 246, 0.18);

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 999px;

    color: #c4b5fd;

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    flex-shrink: 0;

}

.combo-card-description {

    color: #94a3b8;

    font-size: 0.9rem;

    line-height: 1.55;

    margin: 0;

    flex: 1;

}

.combo-card-features {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.combo-card-features li {

    color: #cbd5e1;

    font-size: 0.88rem;

    display: flex;

    align-items: center;

    gap: 8px;

}

.combo-card-features li::before {

    content: "\F26E";

    font-family: "bootstrap-icons";

    color: #8b5cf6;

    font-size: 0.9rem;

    flex-shrink: 0;

}

.combo-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}

.combo-card-item .combo-card-footer {
    margin-top: auto;
}

.combo-price {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.combo-price-value {

    color: #fff;

    font-size: clamp(1.38rem, 2vw, 1.75rem);

    font-weight: 800;

    line-height: 1;

}

.combo-price-currency {

    color: #94a3b8;

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.combo-buy-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 44px;

    padding: 10px 16px;

    background: linear-gradient(135deg, #8b5cf6, #ec4899);

    color: #fff;

    border: none;

    border-radius: 10px;

    font-weight: 700;

    font-size: 0.9rem;

    cursor: pointer;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.4s ease,

                filter 0.4s ease;

    font-family: inherit;

    white-space: nowrap;

}

.no-combos {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    color: #94a3b8;
    padding: 40px 16px;
    margin: 0;
}

.combo-buy-btn:hover {

    transform: translateY(-2px) scale(1.04);

    box-shadow: 0 10px 24px rgba(139, 92, 246, 0.45);

    filter: brightness(1.08);

}

.combo-buy-btn:active {

    transform: translateY(0) scale(0.97);

}

@media (max-width: 768px) {
    .combos-section {
        padding: 68px 0 76px;
    }

    .combos-showcase-card {
        padding: 18px;
        border-radius: 14px;
    }

    .combos-showcase-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .combos-showcase-header h4 {
        font-size: 1.18rem;
    }

    .combos-live-badge {
        width: 100%;
        justify-content: center;
    }

    .combo-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .combo-buy-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combos-showcase-card::after,
    .combo-card-item {
        animation: none !important;
    }
}

/* Scroll reveal final: suave, limpo e em cascata de cima para baixo. */
[data-aos] {
    opacity: 0 !important;
    filter: blur(1px) !important;
    transition:
        opacity var(--aos-duration, 760ms) cubic-bezier(0.22, 1, 0.36, 1) var(--aos-delay, 0ms),
        transform var(--aos-duration, 760ms) cubic-bezier(0.22, 1, 0.36, 1) var(--aos-delay, 0ms),
        filter var(--aos-duration, 760ms) cubic-bezier(0.22, 1, 0.36, 1) var(--aos-delay, 0ms) !important;
}

[data-aos="fade-up"] { transform: translate3d(0, 20px, 0) scale(0.99) !important; }
[data-aos="fade-down"] { transform: translate3d(0, -18px, 0) scale(0.99) !important; }
[data-aos="fade-left"] { transform: translate3d(-18px, 0, 0) scale(0.99) !important; }
[data-aos="fade-right"] { transform: translate3d(18px, 0, 0) scale(0.99) !important; }
[data-aos="zoom-in"] { transform: translate3d(0, 14px, 0) scale(0.975) !important; }

[data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0) !important;
}

.combos-loading {

    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 20px;

    color: #94a3b8;

}

.combos-loading .spinner {

    width: 40px;

    height: 40px;

    border: 3px solid rgba(139, 92, 246, 0.2);

    border-top-color: #8b5cf6;

    border-radius: 50%;

    margin: 0 auto 14px;

    animation: comboSpinner 0.8s linear infinite;

}

@keyframes comboSpinner {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .combos-grid {
        grid-template-columns: 1fr;
    }
    .combos-section h3 {
        font-size: 1.7rem;
    }
}

/* Ajuste de identidade: paleta antiga EasyFama, com gradientes vibrantes. */
body.theme-ig {
    --accent-hot: #ec4899;
    --accent-sun: #f59e0b;
    --accent-orange: #f97316;
    --accent-rose: #ec4899;
    --accent-magenta: #a855f7;
    --accent-purple: #8b5cf6;
    --accent-blue: #8b5cf6;
    --accent-cyan: #f97316;
    --primary: #8b5cf6;
    --grad-brand: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
    --grad-brand-soft: linear-gradient(120deg, #fbbf24, #f97316, #ec4899, #a855f7, #6366f1, #a855f7, #ec4899, #f97316, #fbbf24);
    --grad-vibrant: linear-gradient(90deg, #fbbf24 0%, #f97316 20%, #ec4899 45%, #a855f7 70%, #6366f1 100%);
    --grad-vibrant-soft: linear-gradient(120deg, #fbbf24, #f97316, #ec4899, #a855f7, #6366f1, #a855f7, #ec4899, #f97316, #fbbf24);
    --glow-primary: 0 8px 32px rgba(139, 92, 246, 0.40);
}

body.theme-ig .cta-button,
body.theme-ig .btn-cta,
body.theme-ig .service-button,
body.theme-ig .order-button,
body.theme-ig .nav-cta,
body.theme-ig .combo-buy-btn,
body.theme-ig .mobile-menu-cta:first-child {
    background: var(--grad-vibrant-soft) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    box-shadow: var(--glow-primary) !important;
}

body.theme-ig .hero-buttons .cta-button-secondary {
    background:
        linear-gradient(#0f1219, #0f1219) padding-box,
        var(--grad-vibrant-soft) border-box !important;
    background-size: auto, 300% 100% !important;
    border: 2px solid transparent !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.theme-ig .hero-buttons .cta-button-secondary:hover {
    background: var(--grad-vibrant-soft) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    box-shadow: var(--glow-primary) !important;
}

body.theme-ig .logo h1,
body.theme-ig .section-header h2,
body.theme-ig .section-header h3,
body.theme-ig .about h2,
body.theme-ig .faq h2,
body.theme-ig .orders h2 {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.theme-ig .logo h1,
body.theme-ig .hero-title {
    background: var(--grad-vibrant-soft) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

body.theme-ig .logo h1 {
    animation: gradientFlow 10s ease-in-out infinite !important;
}

body.theme-ig .price-info .price,
body.theme-ig #comboTotalPrice,
body.theme-ig .combo-card-price strong {
    color: #fff !important;
    background: var(--grad-vibrant-soft) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.theme-ig #totalPrice {
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.theme-ig #totalPrice.price-normal {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
}

body.theme-ig #totalPrice.price-discounted {
    color: #ff4d5e !important;
    -webkit-text-fill-color: #ff4d5e !important;
    font-weight: 900 !important;
    text-shadow: 0 0 18px rgba(255, 77, 94, 0.35) !important;
}

body.theme-ig .section-badge,
body.theme-ig .lead-badge {
    color: #f8fafc !important;
    background: rgba(139, 92, 246, 0.14) !important;
    -webkit-text-fill-color: #f8fafc !important;
}

body.theme-ig .section-badge,
body.theme-ig .lead-badge {
    border-color: rgba(236, 72, 153, 0.24) !important;
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.12) !important;
}

body.theme-ig .service-card::before,
body.theme-ig .combo-card::before,
body.theme-ig .combo-card-item::before,
body.theme-ig .reveal-title::after,
body.theme-ig #typing::after,
body.theme-ig .scroll-progress {
    background: var(--grad-vibrant-soft) !important;
    background-size: 300% 100% !important;
}

body.theme-ig .service-card:hover,
body.theme-ig .network-card.selected,
body.theme-ig .combo-card-item:hover,
body.theme-ig .feature:hover,
body.theme-ig .faq-item.open .faq-question,
body.theme-ig .faq-question:hover {
    border-color: rgba(236, 72, 153, 0.22) !important;
    box-shadow: 0 18px 42px rgba(139, 92, 246, 0.12) !important;
}

body.theme-ig .ig-gradient {
    background: radial-gradient(circle at 8% 8%, rgba(251, 191, 36, 0.28), transparent 28%),
                var(--grad-vibrant-soft) !important;
    background-size: auto, 300% 100% !important;
}

body.theme-ig .combos-showcase-card::before,
body.theme-ig .combo-card-content {
    background:
        radial-gradient(circle at 12% 10%, rgba(139, 92, 246, 0.1), transparent 28%),
        radial-gradient(circle at 88% 6%, rgba(236, 72, 153, 0.1), transparent 30%),
        linear-gradient(160deg, rgba(21, 23, 33, 0.98), rgba(11, 12, 18, 0.98)) !important;
}

body.theme-ig .combo-platform-badge,
body.theme-ig .combos-live-badge,
body.theme-ig .check-badge,
body.theme-ig .option-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(236, 72, 153, 0.12)) !important;
    color: #f8fafc !important;
    border-color: rgba(236, 72, 153, 0.18) !important;
}

body.theme-ig input:focus,
body.theme-ig textarea:focus,
body.theme-ig select:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16) !important;
}

/* Categorias de servico no tema antigo da referencia. */
body.theme-ig .service-select {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.theme-ig .network-card {
    position: relative !important;
    padding: 20px !important;
    margin: 0 0 46px !important;
    border: 3px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    outline: none !important;
    background: #050506 !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12),
                0 18px 42px rgba(0, 0, 0, 0.38) !important;
    transform: none !important;
}

body.theme-ig .network-card:hover {
    transform: translateY(-2px) !important;
    border-color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16),
                0 22px 48px rgba(0, 0, 0, 0.42) !important;
}

body.theme-ig .network-card.selected,
body.theme-ig .network-card.active,
body.theme-ig .network-card.is-selected {
    outline: none !important;
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12),
                0 18px 42px rgba(0, 0, 0, 0.38) !important;
}

body.theme-ig .network-card .ig-gradient,
body.theme-ig .network-card .tk-gradient,
body.theme-ig .network-card .kw-gradient,
body.theme-ig .network-card .yt-gradient,
body.theme-ig .network-card .tg-gradient {
    min-height: 84px !important;
    padding: 18px 28px 18px 18px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    color: #fff !important;
    overflow: visible !important;
}

body.theme-ig .network-card .ig-gradient {
    background: radial-gradient(120% 120% at 0% 100%, #feda75 0%, #fa7e1e 35%, #d62976 60%, #962fbf 80%, #4f5bd5 100%) !important;
}

body.theme-ig .network-card .tk-gradient {
    background:
        linear-gradient(135deg, #2dd4d0 0%, #0f766e 34%, #111116 54%, #881337 73%, #f43f5e 100%) !important;
}

body.theme-ig .network-card .ig-icon,
body.theme-ig .network-card .tk-icon,
body.theme-ig .network-card .kw-icon,
body.theme-ig .network-card .yt-icon,
body.theme-ig .network-card .tg-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 28px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

body.theme-ig .network-card .ig-title,
body.theme-ig .network-card .tk-title,
body.theme-ig .network-card .kw-title,
body.theme-ig .network-card .yt-title,
body.theme-ig .network-card .tg-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18) !important;
}

body.theme-ig .network-card small {
    display: block !important;
    margin-top: 6px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

body.theme-ig .network-card .bi-chevron-down {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 1.2rem !important;
}

body.theme-ig .network-card .check-badge {
    display: flex !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.42) !important;
    z-index: 3 !important;
}

@media (max-width: 768px) {
    body.theme-ig .network-card {
        padding: 14px !important;
        margin-bottom: 28px !important;
        border-radius: 18px !important;
    }

    body.theme-ig .network-card .ig-gradient,
    body.theme-ig .network-card .tk-gradient,
    body.theme-ig .network-card .kw-gradient,
    body.theme-ig .network-card .yt-gradient,
    body.theme-ig .network-card .tg-gradient {
        min-height: 78px !important;
        padding: 16px 42px 16px 14px !important;
        gap: 12px !important;
    }
}

/* Correcoes do menu hamburguer no celular. */
@media (max-width: 768px) {
    body.theme-ig #mobileMenuSheet,
    body.theme-ig .mobile-menu-sheet {
        top: 72px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: none !important;
        height: calc(100dvh - 72px) !important;
        padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: linear-gradient(180deg, #080910 0%, #10131b 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
    }

    body.theme-ig #mobileMenuClose,
    body.theme-ig .mobile-menu-close {
        top: -58px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 1 !important;
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.20) !important;
    }

    body.theme-ig #mobileMenuClose::before,
    body.theme-ig .mobile-menu-close::before {
        content: "x";
        color: #fff !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    body.theme-ig .mobile-menu-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    body.theme-ig .mobile-menu-cta {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 62px !important;
        height: 62px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: #050506 !important;
        color: #fff !important;
        text-align: left !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.theme-ig .mobile-menu-cta:first-child {
        background: linear-gradient(135deg, #fbbf24 0%, #f97316 26%, #ec4899 68%, #a855f7 100%) !important;
        border-color: transparent !important;
        box-shadow: 0 12px 30px rgba(236, 72, 153, 0.22) !important;
    }

    body.theme-ig .mobile-menu-cta:hover,
    body.theme-ig .mobile-menu-cta:active {
        transform: none !important;
    }

    body.theme-ig .mobile-menu-cta-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
        line-height: 1 !important;
        flex: 0 0 40px !important;
        transform: none !important;
    }

    body.theme-ig .mobile-menu-cta-icon i,
    body.theme-ig .mobile-menu-cta-icon svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        margin: 0 !important;
        color: currentColor !important;
        fill: currentColor !important;
        font-size: 22px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    body.theme-ig .mobile-menu-cta-text {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        color: inherit !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.theme-ig #mobileMenuSheet.open .mobile-menu-cta,
    body.theme-ig .mobile-menu-sheet.open .mobile-menu-cta {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    body.theme-ig .mobile-menu-cta .btn-ripple,
    body.theme-ig .mobile-menu-social-link .btn-ripple {
        display: none !important;
    }

    body.theme-ig .mobile-menu-social {
        margin: auto 0 0 !important;
        padding-top: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.theme-ig .mobile-menu-social-link {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #050506 !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        color: #fff !important;
        font-size: 0 !important;
        line-height: 1 !important;
        transform: none !important;
    }

    body.theme-ig .mobile-menu-social-link i {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        color: #fff !important;
        font-size: 22px !important;
        line-height: 22px !important;
        text-align: center !important;
        transform: none !important;
    }
}

/* Mobile: cards/modais sempre centralizados e sem estourar a tela. */
@media (max-width: 768px) {
    body.theme-ig .modal,
    body.theme-ig #serviceModal,
    body.theme-ig #customerDataModal,
    body.theme-ig #pixModal,
    body.theme-ig #variantModal,
    body.theme-ig #comboModal,
    body.theme-ig #generateCommentsModal {
        align-items: center !important;
        justify-content: center !important;
        padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.theme-ig .modal[style*="display: block"],
    body.theme-ig .modal[style*="display:block"] {
        display: flex !important;
    }

    body.theme-ig .modal .modal-content,
    body.theme-ig #serviceModal .modal-content,
    body.theme-ig #customerDataModal .modal-content,
    body.theme-ig #pixModal .modal-content,
    body.theme-ig #variantModal .modal-content,
    body.theme-ig #comboModal .modal-content,
    body.theme-ig #generateCommentsModal .modal-content {
        width: min(100%, 420px) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 28px) !important;
        margin: 0 auto !important;
        padding: 22px 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        box-sizing: border-box !important;
    }

    body.theme-ig #variantModal .modal-content {
        width: min(100%, 520px) !important;
    }

    body.theme-ig #howItWorksModal.modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)) !important;
    }

    body.theme-ig #howItWorksModal .modal-content {
        width: min(100%, 520px) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 28px) !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    body.theme-ig .variant-options,
    body.theme-ig #variantOptions {
        grid-template-columns: 1fr !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.theme-ig .comments-controls,
    body.theme-ig .modal-actions,
    body.theme-ig .pix-code-container,
    body.theme-ig .multi-links-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.theme-ig .comments-controls button,
    body.theme-ig .modal-actions button,
    body.theme-ig .pix-code-container button,
    body.theme-ig .multi-links-header button {
        width: 100% !important;
    }

    body.theme-ig .price-display {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    body.theme-ig .close {
        top: 12px !important;
        right: 12px !important;
    }

    body.theme-ig .service-select {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.theme-ig .network-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.theme-ig .network-card .options-wrap,
    body.theme-ig .options-wrap {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.theme-ig .network-card .options-wrap .row,
    body.theme-ig .options-wrap .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: 12px !important;
    }

    body.theme-ig .network-card .options-wrap [class*="col-"],
    body.theme-ig .options-wrap [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.theme-ig .option-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}