/* ============================================================
   SLABWARE — VIP LIST (Black Friday 2026)
   Estilos específicos da landing. Roda EM CIMA do
   slabware-core.css + Bootstrap 5.
   Nenhuma cor nova: tudo sai das variáveis do core.

   ÍNDICE
   01. Tokens / base
   02. Sistema de animação (reveal, stagger, parallax)
   03. Topbar + progresso de scroll + countdown
   04. Hero
   05. Formulário
   06. Marquee de reforço
   07. Slots de imagem
   08. Pilares
   09. Pricing
   10. Statement
   11. Passos
   12. Timeline
   13. FAQ chat (portado da SW.blackfriday)
   14. CTA final + footer
   15. Reduced motion
   ============================================================ */


/* ============================================================
   01. TOKENS / BASE
   ============================================================ */
:root {
    --vip-max: 1180px;
    --vip-section-y: 96px;
    --vip-ease: cubic-bezier(.22, 1, .36, 1);
    --vip-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--sw-amber-rgb), .18) 0%, rgba(0, 0, 0, 0) 70%);
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--sw-black);
    color: var(--sw-light);
    -webkit-font-smoothing: antialiased;
    /* clip, e não hidden: não cria contexto de rolagem, então a topbar
       continua grudando no topo. Segura o deslocamento lateral das
       animações de entrada sem virar scroll horizontal. */
    overflow-x: clip;
}

::selection { background: var(--sw-amber); color: #000; }

a { color: var(--sw-amber); }

.vip-section { padding: var(--vip-section-y) 0; }

@media (max-width: 767px) {
    :root { --vip-section-y: 64px; }
}

/* Rótulo de seção (ex.: "THE CONCEPT") */
.vip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sw-amber);
}
    .vip-eyebrow::before {
        content: "";
        width: 0;
        height: 1px;
        background: var(--sw-amber);
        transition: width .7s var(--vip-ease) .2s;
    }
    /* a linhinha do eyebrow "cresce" quando entra na tela */
    .is-visible .vip-eyebrow::before,
    .vip-eyebrow.is-visible::before { width: 24px; }

.vip-title {
    font-size: clamp(28px, 4.2vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sw-white);
}

.vip-lead {
    color: var(--sw-gray-500);
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.6;
}


/* ============================================================
   02. SISTEMA DE ANIMAÇÃO
   ============================================================ */

/* Entrada ao entrar na viewport. Direção via modificador. */
.vip-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--vip-ease), transform .8s var(--vip-ease);
    will-change: opacity, transform;
}
    .vip-reveal--left  { transform: translateX(-32px); }
    .vip-reveal--right { transform: translateX(32px); }

    /* no mobile a entrada é só vertical: tela estreita não tem folga lateral */
    @media (max-width: 767px) {
        .vip-reveal--left,
        .vip-reveal--right { transform: translateY(26px); }
    }
    .vip-reveal--zoom  { transform: scale(.93); }
    .vip-reveal--blur  { filter: blur(6px); transition: opacity .8s var(--vip-ease), transform .8s var(--vip-ease), filter .8s var(--vip-ease); }

.vip-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Atraso em cascata */
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

/* Número que sobe no título do hero.
   Largura reservada em 2 dígitos para o texto ao lado não pular. */
.vip-countup {
    display: inline-block;
    min-width: 2ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
    /* pulinho ao chegar no número final */
    .vip-countup.is-done { animation: vip-count-done .45s var(--vip-ease); }

@keyframes vip-count-done {
    0%   { transform: scale(1);    }
    45%  { transform: scale(1.14); }
    100% { transform: scale(1);    }
}

/* Linha que se desenha sob um trecho do texto */
.vip-underline {
    position: relative;
    display: inline-block;
}
    .vip-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: .04em;
        height: .07em;
        width: 100%;
        background: var(--sw-amber);
        border-radius: 4px;
        transform: scaleX(0);
        transform-origin: left;
        animation: vip-draw 1s var(--vip-ease) 1.1s forwards;
    }
@keyframes vip-draw { to { transform: scaleX(1); } }

/* Flutuação lenta (orbes do hero, ícones) */
@keyframes vip-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -22px, 0); }
}


/* ============================================================
   03. TOPBAR + PROGRESSO + COUNTDOWN
   ============================================================ */
.vip-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(13, 13, 13, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sw-line);
    font-size: 14px;
}
    .vip-topbar .vip-topbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
    }
    .vip-topbar img {
        height: 26px;
        transition: transform .3s var(--vip-ease);
    }
    .vip-topbar a:hover img { transform: scale(1.05); }

.vip-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
    .vip-countdown .unit {
        min-width: 44px;
        padding: 4px 6px;
        text-align: center;
        background: var(--sw-surface-3);
        border-radius: var(--sw-radius-sm);
        line-height: 1.1;
    }
    .vip-countdown .unit b {
        display: block;
        font-size: 16px;
        color: var(--sw-amber);
    }
    .vip-countdown .unit span {
        display: block;
        font-size: 9px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sw-gray-500);
    }
    /* pulso a cada segundo virado */
    .vip-countdown .unit b.is-ticking { animation: vip-tick .5s var(--vip-ease); }

@keyframes vip-tick {
    0%   { transform: translateY(-6px); opacity: .2; }
    100% { transform: none; opacity: 1; }
}

@media (max-width: 991px) {
    .vip-topbar .vip-topbar-label { display: none; }
}

@media (max-width: 400px) {
    .vip-topbar img { height: 22px; }
    .vip-countdown { gap: 4px; }
    .vip-countdown .unit { min-width: 36px; padding: 3px 4px; }
    .vip-countdown .unit b { font-size: 14px; }
}


/* ============================================================
   04. HERO
   ============================================================ */
.vip-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 80px;
    background:
        var(--vip-glow),
        linear-gradient(180deg, #0A0A0A 0%, var(--sw-black) 100%);
}
    /* grade sutil ao fundo, com leve parallax via --vip-shift */
    .vip-hero::before {
        content: "";
        position: absolute;
        inset: -10% 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
        -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
        transform: translate3d(0, var(--vip-shift, 0px), 0);
        pointer-events: none;
    }
.vip-hero > .container { position: relative; z-index: 2; }

/* Orbes âmbar flutuando ao fundo */
.vip-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 1;
    animation: vip-float 14s ease-in-out infinite;
}
    .vip-orb--1 {
        width: 340px; height: 340px;
        top: -80px; left: -60px;
        background: radial-gradient(circle, rgba(var(--sw-amber-rgb), .35), transparent 70%);
    }
    .vip-orb--2 {
        width: 260px; height: 260px;
        bottom: -60px; right: 8%;
        background: radial-gradient(circle, rgba(255, 123, 0, .28), transparent 70%);
        animation-duration: 18s;
        animation-delay: -6s;
    }

/* rótulo do hero: identifica a página antes do título.
   Aqui não existe .vip-reveal por volta, então a linhinha já nasce aberta. */
.vip-eyebrow--hero {
    font-size: 13px;
    animation: vip-badge-in .7s var(--vip-ease) both;
}
    .vip-eyebrow--hero::before { width: 24px; }

.vip-hero h1 {
    font-size: clamp(36px, 6vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--sw-white);
}
    .vip-hero h1 .amber { color: var(--sw-amber); }

.vip-hero-sub {
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.55;
    color: var(--sw-gray-400);
    max-width: 32ch;
}

/* Selo de escassez */
.vip-spots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--sw-radius-pill);
    border: 1px solid rgba(var(--sw-amber-rgb), .45);
    background: rgba(var(--sw-amber-rgb), .08);
    color: var(--sw-amber);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    animation: vip-badge-in .7s var(--vip-ease) both;
}
@keyframes vip-badge-in {
    from { opacity: 0; transform: translateY(-10px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
    .vip-spots .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sw-amber);
        box-shadow: 0 0 0 0 rgba(var(--sw-amber-rgb), .7);
        animation: vip-pulse 2s infinite;
    }

@keyframes vip-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--sw-amber-rgb), .6); }
    70%  { box-shadow: 0 0 0 9px rgba(var(--sw-amber-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--sw-amber-rgb), 0); }
}

/* Lista de bullets do hero */
.vip-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
    .vip-checklist li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--sw-gray-400);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        transition: transform .3s var(--vip-ease);
    }
    .vip-checklist li:hover { transform: translateX(5px); }
    .vip-checklist i {
        color: var(--sw-amber);
        font-size: 17px;
        line-height: 1.4;
    }


/* ============================================================
   05. FORMULÁRIO
   ============================================================ */
.vip-form-card {
    position: relative;
    border-radius: var(--sw-radius-lg);
    border: 1px solid rgba(var(--sw-amber-rgb), .45);
    background: linear-gradient(180deg, var(--sw-surface-2) 0%, var(--sw-surface-1) 100%);
    box-shadow: var(--sw-shadow-amber);
    padding: 32px;
    animation: vip-card-in 1s var(--vip-ease) .25s both;
}
@keyframes vip-card-in {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* brilho girando na borda do card */
.vip-form-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--vip-angle, 0deg),
                transparent 0deg, rgba(var(--sw-amber-rgb), .9) 60deg, transparent 140deg, transparent 360deg);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    animation: vip-spin 6s linear infinite;
    pointer-events: none;
}

@property --vip-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes vip-spin { to { --vip-angle: 360deg; } }

@media (max-width: 575px) {
    .vip-form-card { padding: 22px; }
}

.vip-form-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--sw-white);
}

.vip-form-card .form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--sw-gray-500);
    margin-bottom: 6px;
}

.vip-form-card .form-control,
.vip-form-card .form-select {
    height: 46px;
    border-radius: var(--sw-radius-sm);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.vip-form-card .form-control:focus,
.vip-form-card .form-select:focus { transform: translateY(-1px); }

.vip-form-card .btn-submit {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    border-radius: var(--sw-radius-sm);
}

.vip-form-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sw-gray-600);
}

/* Mensagem de sucesso pós-envio */
.vip-form-success {
    display: none;
    text-align: center;
    padding: 16px 0;
}
    .vip-form-success i {
        font-size: 44px;
        color: var(--sw-success);
        animation: vip-pop .6s var(--vip-ease) both;
    }
@keyframes vip-pop {
    0%   { opacity: 0; transform: scale(.4); }
    60%  { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

.vip-form-card.is-sent form { display: none; }
.vip-form-card.is-sent .vip-form-success { display: block; }

/* Botão com brilho passando (usar junto de .sw-btn-amber) */
.vip-shine {
    position: relative;
    overflow: hidden;
}
    .vip-shine::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
        transform: skewX(-18deg);
        animation: vip-shine 3.6s ease-in-out infinite;
        pointer-events: none;
    }
@keyframes vip-shine {
    0%, 62%  { left: -120%; }
    92%, 100% { left: 130%; }
}


/* ============================================================
   06. MARQUEE DE REFORÇO
   ============================================================ */
.vip-strip {
    border-top: 1px solid var(--sw-line);
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-surface-1);
    padding: 20px 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vip-marquee-track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: vip-marquee 38s linear infinite;
}
.vip-strip:hover .vip-marquee-track { animation-play-state: paused; }

@keyframes vip-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.vip-marquee-track .item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: var(--sw-gray-500);
    font-size: 14px;
    font-weight: 600;
}
    .vip-marquee-track .item i { color: var(--sw-amber); font-size: 18px; }
    .vip-marquee-track .sep {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(var(--sw-amber-rgb), .5);
        flex-shrink: 0;
    }


/* ============================================================
   07. SLOTS DE IMAGEM
   ============================================================ */
.vip-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--sw-radius-lg);
    background:
        radial-gradient(70% 70% at 50% 0%, rgba(var(--sw-amber-rgb), .07), transparent 70%),
        linear-gradient(150deg, var(--sw-surface-2), var(--sw-surface-1));
    border: 1px solid var(--sw-line-soft);
}
    .vip-img--placeholder { border: 1px dashed rgba(var(--sw-amber-rgb), .35); }
    .vip-img--wide   { aspect-ratio: 16 / 9; }
    .vip-img--tall   { aspect-ratio: 4 / 5; }
    .vip-img--square { aspect-ratio: 1 / 1; }

    .vip-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s var(--vip-ease);
    }
    .vip-img:hover img { transform: scale(1.05); }

    /* etiqueta do placeholder */
    .vip-img-hint {
        text-align: center;
        padding: 24px;
        color: var(--sw-gray-600);
        font-size: 13px;
        line-height: 1.5;
    }
    .vip-img-hint i {
        display: block;
        font-size: 32px;
        color: rgba(var(--sw-amber-rgb), .55);
        margin-bottom: 10px;
        animation: vip-float 6s ease-in-out infinite;
    }
    .vip-img-hint b {
        display: block;
        color: var(--sw-gray-500);
        font-size: 14px;
        margin-bottom: 4px;
    }

/* legenda abaixo do slot */
.vip-img-caption {
    font-size: 13px;
    color: var(--sw-gray-600);
    margin-top: 10px;
}

/* ------------------------------------------------------------
   VÍDEO EM DESTAQUE (facade: só carrega o YouTube no clique)
   ------------------------------------------------------------ */
.vip-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--sw-radius-lg);
    border: 1px solid rgba(var(--sw-amber-rgb), .5);
    background: var(--sw-surface-1);
    box-shadow: var(--sw-shadow-amber);
    transition: transform .5s var(--vip-ease), border-color .3s ease;
}
    .vip-video:hover { transform: translateY(-4px); border-color: var(--sw-amber); }

    .vip-video img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .9s var(--vip-ease), filter .5s ease;
    }
    .vip-video:hover img { transform: scale(1.04); }

    /* escurece a thumb para o play e a legenda respirarem */
    .vip-video::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .85) 100%);
        pointer-events: none;
    }

    .vip-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    /* quando o iframe entra, some com play, legenda e overlay */
    .vip-video.is-playing::after,
    .vip-video.is-playing .vip-video-play,
    .vip-video.is-playing .vip-video-label { display: none; }

/* botão de play */
.vip-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--sw-amber);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    padding-left: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    transition: transform .35s var(--vip-ease), background .3s ease;
}
    .vip-video:hover .vip-video-play {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--sw-amber-hover);
    }
    /* anel pulsando ao redor do play */
    .vip-video-play::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid rgba(var(--sw-amber-rgb), .6);
        animation: vip-ring 2.4s ease-out infinite;
    }
@keyframes vip-ring {
    0%   { transform: scale(1);    opacity: .9; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* legenda sobre o vídeo */
.vip-video-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 28px;
    text-align: left;
    pointer-events: none;
}
    .vip-video-label b {
        display: block;
        color: var(--sw-white);
        font-size: clamp(17px, 2vw, 22px);
        font-weight: 700;
        line-height: 1.25;
    }
    .vip-video-label span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--sw-amber);
    }

@media (max-width: 575px) {
    .vip-video-play { width: 62px; height: 62px; font-size: 24px; }
    .vip-video-label { padding: 18px; }
}

/* mockup solto, sem moldura (device shots com fundo transparente) */
.vip-mock {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 340px;          /* mantém desktop, tablet e mobile equilibrados */
    height: auto;
    margin: 0 auto;
    transition: transform .6s var(--vip-ease);
}

@media (max-width: 767px) {
    .vip-mock { max-height: 240px; }
}
.vip-mock-wrap {
    position: relative;
    text-align: center;
}
    .vip-mock-wrap::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 45%;
        width: 78%;
        height: 60%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(var(--sw-amber-rgb), .22), transparent 70%);
        filter: blur(46px);
        z-index: 0;
    }
    .vip-mock-wrap > * { position: relative; z-index: 1; }
    .vip-mock-wrap:hover .vip-mock { transform: translateY(-8px); }


/* ============================================================
   08. PILARES
   ============================================================ */
.vip-pillar {
    position: relative;
    height: 100%;
    padding: 40px 28px;
    border-radius: var(--sw-radius);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
    overflow: hidden;
    transition: border-color .35s ease, transform .35s var(--vip-ease), background .35s ease;
}
    /* halo que segue o mouse (posição vem do JS) */
    .vip-pillar::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        left: var(--vip-mx, 50%);
        top: var(--vip-my, 50%);
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(var(--sw-amber-rgb), .10), transparent 65%);
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
    }
    .vip-pillar:hover::before { opacity: 1; }
    .vip-pillar:hover {
        border-color: rgba(var(--sw-amber-rgb), .6);
        transform: translateY(-4px);
    }
    .vip-pillar > * { position: relative; z-index: 1; }

    /* ícone grande em círculo, o peso visual do bloco */
    .vip-pillar-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        margin-bottom: 20px;
        border-radius: 50%;
        background: rgba(var(--sw-amber-rgb), .10);
        border: 1px solid rgba(var(--sw-amber-rgb), .35);
        color: var(--sw-amber);
        font-size: 30px;
        transition: transform .4s var(--vip-ease), background .4s ease, box-shadow .4s ease;
    }
    .vip-pillar:hover .vip-pillar-icon {
        transform: translateY(-3px) scale(1.06);
        background: rgba(var(--sw-amber-rgb), .16);
        box-shadow: 0 10px 30px rgba(var(--sw-amber-rgb), .22);
    }

    .vip-pillar h3 {
        font-size: 20px;
        font-weight: 700;
        color: var(--sw-white);
        margin: 0 0 8px;
    }
    .vip-pillar p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--sw-gray-500);
        margin: 0;
    }


/* ============================================================
   09. PRICING
   ============================================================ */
.vip-billing-toggle {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
}
    .vip-billing-toggle button {
        border: 0;
        background: transparent;
        color: var(--sw-gray-500);
        font-weight: 700;
        font-size: 14px;
        padding: 8px 20px;
        border-radius: var(--sw-radius-pill);
        transition: color .25s ease;
    }
    .vip-billing-toggle button.active {
        background: var(--sw-amber);
        color: #000;
    }
    .vip-billing-toggle .save {
        font-size: 11px;
        font-weight: 700;
        margin-left: 6px;
        opacity: .8;
    }

.vip-plan {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
    overflow: hidden;
    transition: transform .4s var(--vip-ease), border-color .4s ease, box-shadow .4s ease;
}
    .vip-plan:hover {
        transform: translateY(-8px);
        border-color: rgba(var(--sw-amber-rgb), .55);
    }

    /* varredura de brilho no hover */
    .vip-plan::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .05) 48%, transparent 62%);
        transform: translateX(-110%);
        transition: transform .9s var(--vip-ease);
        pointer-events: none;
    }
    .vip-plan:hover::after { transform: translateX(110%); }

    .vip-plan.is-featured {
        border-color: var(--sw-amber);
        background: linear-gradient(180deg, rgba(var(--sw-amber-rgb), .07) 0%, var(--sw-surface-1) 55%);
        box-shadow: var(--sw-shadow-amber);
    }

.vip-plan > * { position: relative; z-index: 1; }

.vip-plan .plan-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--sw-white);
}
/* linha do que o plano resolve, logo abaixo do nome */
.vip-plan .plan-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--sw-amber);
    margin-top: 2px;
}
.vip-plan .plan-users {
    font-size: 13px;
    color: var(--sw-gray-500);
    margin-top: 2px;
}

/* preço do usuário extra, embaixo da lista de módulos */
.vip-plan .plan-extra {
    margin: -14px 0 22px;
    font-size: 12px;
    color: var(--sw-gray-600);
}

.vip-plan .price-regular {
    font-size: 15px;
    color: var(--sw-gray-600);
    text-decoration: line-through;
    text-decoration-color: var(--sw-danger);
    -webkit-text-decoration-color: var(--sw-danger);
    text-decoration-thickness: 2px;
}

.vip-plan .price-vip {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--sw-amber);
    font-weight: 800;
    line-height: 1;
}
    .vip-plan .price-vip .cur { font-size: 24px; font-weight: 700; }
    .vip-plan .price-vip .val {
        font-size: 56px;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }
    .vip-plan .price-vip .per {
        font-size: 15px;
        font-weight: 600;
        color: var(--sw-gray-500);
    }

.vip-plan .price-year {
    font-size: 13px;
    color: var(--sw-gray-600);
    min-height: 20px;
}

.vip-plan .price-bf {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: var(--sw-radius-sm);
    background: var(--sw-surface-3);
    border: 1px dashed var(--sw-line-soft);
    font-size: 13px;
    color: var(--sw-gray-500);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
    .vip-plan .price-bf b { color: var(--sw-white); font-size: 15px; }
    .vip-plan .price-bf i { color: var(--sw-danger); }

.vip-plan .plan-features {
    list-style: none;
    padding: 0;
    margin: 22px 0 26px;
    display: grid;
    gap: 10px;
}
    .vip-plan .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--sw-gray-400);
    }
    /* cotas do Drawing (DXF 3D e Labels), presas ao item de cima */
    .vip-plan .plan-features .plan-sub {
        margin: -6px 0 2px 24px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--sw-gray-600);
    }

    .vip-plan .plan-features i { color: var(--sw-amber); font-size: 15px; line-height: 1.4; }
    /* "Everything in Starter/Basic": destaca a escada entre os planos */
    .vip-plan .plan-features b { color: var(--sw-white); font-weight: 700; }
    .vip-plan .plan-features .bi-star-fill { font-size: 13px; }

.vip-plan .plan-cta { margin-top: auto; }

.vip-plan .save-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sw-amber);
    background: rgba(var(--sw-amber-rgb), .12);
    border-radius: var(--sw-radius-sm);
    padding: 4px 10px;
    white-space: nowrap;
}

.vip-pricing-note {
    font-size: 13px;
    color: var(--sw-gray-600);
    line-height: 1.6;
}


/* ============================================================
   10. STATEMENT
   ============================================================ */
.vip-statement {
    position: relative;
    padding: 84px 0;
    background: var(--sw-surface-1);
    border-top: 1px solid var(--sw-line);
    border-bottom: 1px solid var(--sw-line);
    text-align: center;
    overflow: hidden;
}
    .vip-statement::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(50% 120% at 50% 50%, rgba(var(--sw-amber-rgb), .12), transparent 70%);
        transform: scale(var(--vip-scale, 1));
        transition: transform .2s linear;
    }
    .vip-statement .container { position: relative; z-index: 1; }
    .vip-statement p {
        margin: 0 auto;
        max-width: 26ch;
        font-size: clamp(30px, 5vw, 56px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: var(--sw-white);
    }
    .vip-statement p .amber { color: var(--sw-amber); }

/* seta que sobe, reforçando "it goes up" */
.vip-statement .arrow {
    display: inline-block;
    animation: vip-rise 2.2s ease-in-out infinite;
}
@keyframes vip-rise {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(-10px); opacity: .6; }
}


/* ============================================================
   11. PASSOS
   ============================================================ */
.vip-step {
    position: relative;
    height: 100%;
    padding: 26px;
    border-radius: var(--sw-radius);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
    transition: transform .35s var(--vip-ease), border-color .35s ease;
}
    .vip-step:hover {
        transform: translateY(-6px);
        border-color: rgba(var(--sw-amber-rgb), .5);
    }
    .vip-step .step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--sw-amber);
        color: #000;
        font-weight: 800;
        font-size: 15px;
        margin-bottom: 16px;
        transition: transform .35s var(--vip-ease);
    }
    .vip-step:hover .step-num { transform: scale(1.12) rotate(-8deg); }
    .vip-step h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--sw-white);
        margin-bottom: 6px;
    }
    .vip-step p {
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        color: var(--sw-gray-500);
    }


/* ============================================================
   12. TIMELINE
   ============================================================ */
.vip-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-top: 46px;              /* espaço para a bandeirinha acima da bolinha */
}
    /* trilho */
    .vip-timeline::before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 53px;
        height: 1px;
        background: var(--sw-line-soft);
    }
    /* Preenchimento âmbar: cobre só a janela VIP, ou seja, da primeira
       bolinha até "VIP List closes". Início e tamanho vêm do JS, que mede
       as bolinhas de verdade (ver measureTimeline no index.html). */
    .vip-timeline::after {
        content: "";
        position: absolute;
        left: var(--vip-fill-start, 10%);
        width: var(--vip-fill-size, 20%);
        right: auto;
        top: 53px;
        height: 1px;
        background: var(--sw-amber);
        box-shadow: 0 0 8px rgba(var(--sw-amber-rgb), .5);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1.2s var(--vip-ease) .2s;
    }
    .vip-timeline.is-visible::after { transform: scaleX(1); }

.vip-tl-item {
    position: relative;
    text-align: center;
    padding: 0 10px;
}
    .vip-tl-item .tl-dot {
        position: relative;
        z-index: 2;
        width: 15px;
        height: 15px;
        margin: 0 auto 18px;
        border-radius: 50%;
        background: var(--sw-black);
        border: 2px solid var(--sw-line-soft);
        transform: scale(0);
        transition: transform .5s var(--vip-ease);
    }
    .vip-timeline.is-visible .tl-dot { transform: scale(1); }
    .vip-timeline.is-visible .vip-tl-item:nth-child(1) .tl-dot { transition-delay: .25s; }
    .vip-timeline.is-visible .vip-tl-item:nth-child(2) .tl-dot { transition-delay: .55s; }
    .vip-timeline.is-visible .vip-tl-item:nth-child(3) .tl-dot { transition-delay: .85s; }
    .vip-timeline.is-visible .vip-tl-item:nth-child(4) .tl-dot { transition-delay: 1.1s; }
    .vip-timeline.is-visible .vip-tl-item:nth-child(5) .tl-dot { transition-delay: 1.35s; }

    .vip-tl-item.is-key .tl-dot {
        background: var(--sw-amber);
        border-color: var(--sw-amber);
        box-shadow: 0 0 0 5px rgba(var(--sw-amber-rgb), .18);
    }
    .vip-tl-item .tl-date {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sw-gray-500);
    }
    .vip-tl-item.is-key .tl-date { color: var(--sw-amber); }
    .vip-tl-item .tl-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--sw-white);
        margin-top: 4px;
    }
    .vip-tl-item .tl-desc {
        font-size: 13px;
        line-height: 1.5;
        color: var(--sw-gray-600);
        margin-top: 4px;
    }

/* bandeirinha "o preço sobe", ancorada acima da bolinha */
.vip-tl-flag {
    position: absolute;
    left: 50%;
    top: -28px;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 8px 24px rgba(245, 37, 57, .35);
    /* keyframe próprio: precisa repetir o translateX(-50%), senão a
       animação sobrescreve o transform e a bandeirinha sai do centro */
    animation: vip-flag-rise 2.6s ease-in-out infinite;
}

@keyframes vip-flag-rise {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -6px); }
}
    /* ponteiro apontando para a bolinha */
    .vip-tl-flag::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: var(--sw-danger);
    }
    .vip-tl-flag i { font-size: 13px; }

/* a bolinha marcada também ganha destaque */
.vip-tl-item.is-rise .tl-dot {
    background: var(--sw-danger);
    border-color: var(--sw-danger);
    box-shadow: 0 0 0 5px rgba(245, 37, 57, .18);
}
.vip-tl-item.is-rise .tl-date { color: var(--sw-danger); }

@media (max-width: 767px) {
    .vip-timeline {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-left: 8px;
        padding-top: 0;
    }
        .vip-timeline::before {
            left: 15px;
            right: auto;
            top: 6px;
            bottom: 6px;
            width: 1px;
            height: auto;
        }
        /* na vertical o preenchimento usa as mesmas medidas, no eixo Y */
        .vip-timeline::after {
            left: 15px;
            right: auto;
            bottom: auto;
            width: 1px;
            top: var(--vip-fill-start, 6px);
            height: var(--vip-fill-size, 20%);
        }

    /* na vertical a bandeirinha vira um selo em linha, acima da data */
    .vip-tl-flag {
        position: static;
        transform: none;
        margin-bottom: 8px;
        animation: none;
    }
        .vip-tl-flag::after { display: none; }
        .vip-timeline::after {
            transform: scaleY(0);
            transform-origin: top;
        }
        .vip-timeline.is-visible::after { transform: scaleY(1); }

    .vip-tl-item {
        display: grid;
        grid-template-columns: 32px 1fr;
        align-items: start;
        text-align: left;
        padding: 0;
    }
        .vip-tl-item .tl-dot { margin: 3px 0 0; }
}


/* ============================================================
   13. FAQ CHAT
   (portado da SW.blackfriday, mesmas classes para facilitar
   manutenção entre as duas landings)
   ============================================================ */
.bf-faq-chat { position: relative; overflow: hidden; }

.bf-faq-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: .5;
}
.bf-faq-bg-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .45));
}
.bf-faq-chat > .container { position: relative; z-index: 2; }

/* box do chat em vidro fosco */
.bf-chat {
    max-width: 860px; margin: 0 auto;
    height: clamp(560px, 80vh, 700px);
    background: rgba(18, 19, 23, .5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.bf-chat__log {
    padding: 26px;
    display: flex; flex-direction: column; gap: 16px;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.bf-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; animation: bf-msg-in .28s ease; }
.bf-msg--assistant { justify-content: flex-start; }
.bf-msg--user { justify-content: flex-end; }
@keyframes bf-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bf-msg__avatar {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    background: var(--sw-amber); color: #000; font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.bf-msg__bubble { max-width: 76%; padding: 12px 16px; border-radius: 14px; line-height: 1.55; font-size: 15px; }
.bf-msg--assistant .bf-msg__bubble { background: #1d1f24; color: var(--sw-light); border-bottom-left-radius: 4px; }
.bf-msg--user .bf-msg__bubble { background: var(--sw-amber); color: #000; font-weight: 600; border-bottom-right-radius: 4px; }

/* indicador de digitação */
.bf-typing { display: inline-flex; gap: 5px; align-items: center; }
.bf-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-gray-500); animation: bf-typing 1s infinite ease-in-out; }
.bf-typing span:nth-child(2) { animation-delay: .15s; }
.bf-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bf-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* composer (só chips) */
.bf-chat__composer { flex: 0 0 auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 22px 20px; background: rgba(15, 16, 19, .45); }
.bf-chat__composer-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sw-gray-500); margin: 0 0 12px; }
.bf-chat__chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; height: 124px; overflow-y: auto; }
.bf-chip {
    background: #1a1c21; border: 1px solid rgba(255, 255, 255, .12); color: var(--sw-light);
    border-radius: 100px; padding: 9px 16px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .2s ease; font-family: var(--sw-font); text-align: left;
    animation: bf-chip-in .3s var(--vip-ease) both;
}
@keyframes bf-chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bf-chip:hover { border-color: var(--sw-amber); color: var(--sw-amber); transform: translateY(-2px); }
.bf-chip i { color: var(--sw-amber); }
.bf-chip:focus-visible { outline: 2px solid var(--sw-amber); outline-offset: 2px; }

/* chips de ação (Contact us / Visit website), âmbar sólido */
.bf-chip--contact {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--sw-amber); border-color: var(--sw-amber); color: #000;
}
.bf-chip--contact:hover { background: var(--sw-amber-hover); border-color: var(--sw-amber-hover); color: #000; }
.bf-chip--contact i { color: #000; flex: 0 0 auto; }

/* card de agendamento postado dentro do chat */
.bf-sched {
    max-width: 88%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    background: var(--sw-surface-1);
    overflow: hidden;
}
.bf-sched-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    font-weight: 700; font-size: 14px; color: var(--sw-white);
    border-bottom: 1px solid var(--sw-line-soft);
}
.bf-sched-head i { color: var(--sw-amber); }
.bf-sched-frame { height: 360px; background: #fff; }
.bf-sched-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bf-sched-link {
    display: block; text-align: center;
    padding: 10px; font-size: 13px; font-weight: 600;
    color: var(--sw-amber); text-decoration: none;
    border-top: 1px solid var(--sw-line-soft);
}
.bf-sched-link:hover { background: var(--sw-surface-3); }

.bf-chat__controls { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.bf-chat__controls button {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--sw-gray-500); font-size: 13px; font-weight: 600; font-family: var(--sw-font);
    display: inline-flex; align-items: center; gap: 6px;
}
.bf-chat__controls button:hover { color: var(--sw-amber); }
.bf-chat__controls button[hidden] { display: none; }

/* coluna da resposta (bolha + botões) */
.bf-msg--top { align-items: flex-start; }   /* avatar no topo quando a resposta tem botões */
.bf-msg__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 78%; }
.bf-msg__col .bf-msg__bubble { max-width: 100%; }
.bf-faq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-faq-btn { padding: 7px 14px; font-size: 13px; border-radius: 8px; text-decoration: none; }

@media (max-width: 575px) {
    .bf-chat__log { padding: 18px; }
    .bf-msg__bubble, .bf-msg__col { max-width: 88%; }
    .bf-chat__composer { padding: 16px; }
}


/* ============================================================
   14. CTA FINAL + FOOTER
   ============================================================ */
.vip-cta-final {
    position: relative;
    padding: 88px 0;
    text-align: center;
    background: var(--vip-glow), var(--sw-black);
    overflow: hidden;
}
    .vip-cta-final h2 {
        font-size: clamp(30px, 4.6vw, 52px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: var(--sw-white);
    }
    .vip-cta-final .amber { color: var(--sw-amber); }

.vip-footer {
    border-top: 1px solid var(--sw-line);
    padding: 32px 0;
    font-size: 13px;
    color: var(--sw-gray-600);
}
    .vip-footer img { height: 24px; opacity: .9; }
    .vip-footer a { color: var(--sw-gray-500); text-decoration: none; }
    .vip-footer a:hover { color: var(--sw-amber); }


/* ============================================================
   15. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .vip-reveal { opacity: 1; transform: none; filter: none; transition: none; }
    .vip-countup.is-done { animation: none; }
    .vip-underline::after { transform: scaleX(1); animation: none; }
    .vip-eyebrow::before { width: 24px; transition: none; }

    .vip-spots .dot,
    .vip-spots,
    .vip-orb,
    .vip-form-card,
    .vip-form-card::before,
    .vip-img-hint i,
    .vip-tl-flag,
    .vip-statement .arrow,
    .vip-shine::after,
    .bf-msg,
    .bf-chip,
    .bf-typing span { animation: none !important; }

    .vip-marquee-track { animation: none !important; transform: none; }
    .vip-strip { mask-image: none; -webkit-mask-image: none; }

    .vip-timeline::after { transform: scaleX(1); transition: none; }
    .vip-timeline .tl-dot { transform: scale(1); transition: none; }

    .vip-plan:hover,
    .vip-pillar:hover,
    .vip-step:hover,
    .vip-mock-wrap:hover .vip-mock { transform: none; }

    .bf-chat__log { scroll-behavior: auto; }
}


/* ============================================================
   16. TIPO DE NEGÓCIO (Fabricator | Distributor & Exporter)
   Diagramação portada da SW.blackfriday (vip-sections.css),
   para as duas páginas ficarem iguais.
   ============================================================ */
.bf-biz-toggle {
    display: inline-flex;
    padding: 5px;
    gap: 4px;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
    max-width: 100%;
}
.bf-biz-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--sw-gray-400);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: var(--sw-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.bf-biz-toggle button i { font-size: 15px; }
.bf-biz-toggle button.active { background: var(--sw-amber); color: #000; }

[data-biz-panel][hidden] { display: none; }

@media (max-width: 575px) {
    .bf-biz-toggle { width: 100%; }
    .bf-biz-toggle button { flex: 1; padding: 10px 10px; font-size: 13px; }
}

/* nota acima dos cards (modular / plataforma completa) */
.vip-mod-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 560px;
    padding: 10px 14px;
    border-radius: var(--sw-radius-sm);
    background: rgba(var(--sw-amber-rgb), .10);
    border: 1px solid rgba(var(--sw-amber-rgb), .30);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sw-gray-400);
}
.vip-mod-note i { color: var(--sw-amber); font-size: 15px; margin-top: 1px; }
.vip-mod-note b { color: var(--sw-white); font-weight: 700; }

/* Distributor e Exporter: plataforma completa, sem modularização */
.vip-plan--full .plan-full-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--sw-radius-sm);
    background: var(--sw-surface-3);
    border: 1px dashed var(--sw-line-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sw-gray-400);
}
.vip-plan--full .plan-full-flag i { color: var(--sw-amber); font-size: 14px; }