/* Reset mínimo — o site não usa framework CSS, então só o necessário. */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #16110F;
    background: #FBFAF9;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

/* Sem isto, qualquer elemento com `display` declarado (grid/flex) ignora o
   atributo `hidden` — é o que esconde os painéis de aba inativos. */
[hidden] { display: none !important; }

button { font-family: inherit; }

/* O usuário que prefere menos movimento não deve receber as animações
   decorativas (float/pulse/marquee) do layout. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Tokens e componentes de base compartilhados por todas as páginas.
   Os valores vêm do layout do Claude Design (pasta layout/) — ao atualizar
   o layout, atualize aqui, não espalhe hex solto pelas páginas. */

:root {
    /* Marca */
    --pg-purple: #8F00FF;
    --pg-cyan: #00E7FE;
    --pg-cyan-deep: #00B8E8;
    --pg-cyan-ink: #0098C4;
    --pg-grad: linear-gradient(120deg, #8F00FF 0%, #00E7FE 100%);
    --pg-grad-soft: linear-gradient(120deg, #8F00FF, #00B8E8);
    --pg-grad-light: linear-gradient(120deg, #C49BFF, #6FE9FF);

    /* Superfícies claras */
    --pg-bg: #FBFAF9;
    --pg-surface: #fff;
    --pg-surface-warm: #F8F6F2;
    --pg-surface-lilac: #F6F3FB;

    /* Texto claro */
    --pg-ink: #16110F;
    --pg-ink-2: #3C3833;
    --pg-body: #5A544D;
    --pg-body-2: #6E675F;
    --pg-muted: #8A857E;
    --pg-muted-2: #9A938B;
    --pg-muted-3: #A39D95;

    /* Linhas */
    --pg-line: #ECE8E2;
    --pg-line-2: #EEEBE7;
    --pg-line-3: #E4E0DB;
    --pg-line-4: #F0ECE6;
    --pg-line-lilac: #ECE4F7;

    /* Superfícies escuras */
    --pg-dark: #14101B;
    --pg-dark-body: #9D96AE;
    --pg-dark-body-2: #A59EB8;
    --pg-dark-muted: #8E86A3;
    --pg-dark-faint: #6F6982;
    --pg-dark-line: rgba(255, 255, 255, 0.1);

    /* Estado */
    --pg-danger: #F45063;
    --pg-warning: #DDB40B;
    --pg-success: #1B9E5A;
}

/* ---------- Animações ---------- */

@keyframes pgFloat  { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-14px); } }
@keyframes pgFloat2 { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(10px); } }
@keyframes pgPulse  { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes pgMarquee{ from { transform: translateX(0); }       to { transform: translateX(-50%); } }
@keyframes pgGlow   { 0%, 100% { opacity: .5; }                50% { opacity: .9; } }
@keyframes pgPop    { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

.pg-anim-float  { animation: pgFloat 6s ease-in-out infinite; }
.pg-anim-float2 { animation: pgFloat2 5s ease-in-out infinite; }
.pg-anim-float3 { animation: pgFloat2 6.5s ease-in-out infinite; }
.pg-anim-glow   { animation: pgGlow 8s ease-in-out infinite; }

/* ---------- Layout ---------- */

.pg-page { position: relative; overflow-x: clip; background: var(--pg-bg); }

.pg-container { max-width: 1200px; margin: 0 auto; }

.pg-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 32px;
}

.pg-section--tight   { padding: clamp(48px, 6vw, 84px) 32px clamp(8px, 2vw, 20px); }
.pg-section--head    { padding: clamp(48px, 6vw, 88px) 32px clamp(20px, 3vw, 40px); }
.pg-section--narrow  { max-width: 1100px; }

/* Faixa em que o conteúdo é um painel escuro arredondado. */
.pg-band { padding: clamp(40px, 5vw, 72px) 16px; }

.pg-panel-dark {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--pg-dark);
    border-radius: 32px;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
    position: relative;
    overflow: hidden;
}

.pg-panel-dark__inner { position: relative; }

/* Halos decorativos (o posicionamento de cada um fica inline, pois é
   específico da seção; o comportamento comum fica aqui). */
.pg-halo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Tipografia ---------- */

.pg-kicker {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pg-purple);
}

/* Atenção: nas classes de texto em gradiente use sempre `background-image`,
   nunca o shorthand `background` — o shorthand reseta `background-clip` para
   `border-box` e o texto vira uma barra sólida colorida. */
.pg-kicker--light {
    background-image: var(--pg-grad-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pg-h1 {
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0 0 22px;
    color: var(--pg-ink);
}

.pg-h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    margin: 14px 0 16px;
    line-height: 1.08;
}

.pg-h2--dark {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 500;
    color: #fff;
    margin: 12px 0 6px;
    letter-spacing: -0.6px;
    max-width: 680px;
}

.pg-h3 {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 9px;
}

.pg-lead {
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.pg-hero-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    color: var(--pg-body);
    max-width: 548px;
    margin: 0 0 34px;
    text-wrap: pretty;
}

.pg-text { font-size: 14.5px; color: var(--pg-body); line-height: 1.55; margin: 0; }

/* Texto com preenchimento em gradiente. Usa `background-image` (e não o
   shorthand `background`) para que os modificadores abaixo não resetem o
   `background-clip: text`. */
.pg-grad-text {
    background-image: var(--pg-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pg-grad-text--soft { background-image: var(--pg-grad-soft); }
.pg-grad-text--light { background-image: var(--pg-grad-light); }

/* Cabeçalho centralizado de seção. */
.pg-section-head {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.pg-section-head--wide { margin-bottom: 50px; }

/* ---------- Botões ---------- */

.pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    padding: 16px 30px;
    border-radius: 999px;
    transition: filter .18s ease, transform .18s ease, border-color .18s ease;
}

.pg-btn--primary {
    color: #fff;
    background: var(--pg-grad);
    box-shadow: 0 16px 38px -14px rgba(143, 0, 255, 0.65);
}

.pg-btn--primary:hover { filter: brightness(1.05); transform: translateY(-2px); }

.pg-btn--ghost {
    color: var(--pg-ink);
    padding: 16px 28px;
    background: #fff;
    border: 1.5px solid var(--pg-line-3);
}

.pg-btn--ghost:hover { border-color: var(--pg-ink); }

.pg-btn--lg { gap: 10px; padding: 17px 34px; box-shadow: 0 18px 44px -14px rgba(143, 0, 255, 0.7); }

/* Botão de WhatsApp da barra de navegação e do rodapé. */
.pg-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--pg-grad);
    box-shadow: 0 10px 26px -10px rgba(143, 0, 255, 0.6);
    transition: filter .18s ease, transform .18s ease;
}

.pg-wa-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---------- Pills / tags ---------- */

.pg-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pg-body-2);
    background: var(--pg-surface-lilac);
    border: 1px solid var(--pg-line-lilac);
    border-radius: 999px;
    padding: 5px 11px;
}

.pg-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pg-grad);
}

.pg-tag {
    font-size: 13px;
    color: #2C2722;
    background: var(--pg-surface-warm);
    border: 1px solid var(--pg-line);
    border-radius: 999px;
    padding: 6px 12px;
}

.pg-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 11px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.pg-badge--promo { color: var(--pg-purple); border: 1px solid #E6D8F7; background: #FAF6FF; }
.pg-badge--fid   { color: var(--pg-cyan-ink); border: 1px solid #CFE9F0; background: #F2FBFE; }

/* Selo "promo"/"fidelidade"/"raspadinha" ao lado do logo. */
.pg-product-badge {
    font-size: 14px;
    font-weight: 500;
    color: var(--pg-muted-2);
    padding: 2px 9px;
    border: 1px solid #E6E2DD;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

/* Selo de destaque no topo do hero. */
.pg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ECE8E3;
    box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.2);
    margin-bottom: 26px;
}

.pg-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pg-grad);
    animation: pgPulse 2.4s ease-in-out infinite;
}

.pg-eyebrow__text { font-size: 13.5px; font-weight: 500; color: #5A544D; letter-spacing: 0.2px; }

/* ---------- Cards ---------- */

.pg-card {
    background: var(--pg-surface);
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    padding: 26px 24px;
}

.pg-card--sm  { border-radius: 18px; padding: 22px 22px; }
.pg-card--faq { border-radius: 18px; padding: 24px; }

.pg-card--hover { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

.pg-card--hover:hover {
    border-color: #D8CFEA;
    box-shadow: 0 24px 48px -32px rgba(40, 10, 70, 0.4);
    transform: translateY(-3px);
}

.pg-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.10));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

/* ---------- Grids ---------- */

.pg-grid { display: grid; gap: 18px; }

.pg-grid--2   { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 22px; }
.pg-grid--3   { grid-template-columns: repeat(auto-fit, minmax(min(252px, 100%), 1fr)); }
.pg-grid--4   { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.pg-grid--faq { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }

/* ---------- Marquee de logos ---------- */

.pg-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.pg-marquee__track {
    display: flex;
    gap: 56px;
    width: max-content;
    align-items: center;
    animation: pgMarquee 28s linear infinite;
}

.pg-marquee__item {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #C2BCB4;
    white-space: nowrap;
}

.pg-marquee__label {
    text-align: center;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pg-muted-3);
    margin: 0 0 26px;
}

/* ---------- Acessibilidade ---------- */

.pg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #fff;
    color: var(--pg-ink);
    padding: 12px 18px;
    border-radius: 0 0 12px 0;
}

.pg-skip:focus { left: 0; }

.pg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Barra de navegação: logo, mega menu de produtos, links da página e CTA.
   O mesmo markup atende desktop e mobile (sections/header.php) — o menu
   nunca é escrito duas vezes. */

.pg-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(251, 250, 249, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pg-line-2);
}

.pg-header__bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.pg-header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.pg-header__logo img { height: 30px; width: auto; display: block; }

.pg-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--pg-line-3);
    background: #fff;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--pg-ink);
}

.pg-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
}

.pg-nav--tight { gap: 18px; }

.pg-nav__link {
    text-decoration: none;
    color: #4B4640;
    font-size: 16px;
    transition: color .15s ease;
}

.pg-nav__link:hover { color: var(--pg-ink); }

/* ---------- Mega menu de produtos ---------- */

.pg-mega { position: relative; }

.pg-mega__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #4B4640;
    font-size: 16px;
    transition: color .15s ease;
}

.pg-mega[data-open="true"] .pg-mega__btn { color: var(--pg-ink); }

.pg-mega__caret { transition: transform .2s ease; color: var(--pg-muted-2); }

.pg-mega[data-open="true"] .pg-mega__caret { transform: rotate(180deg); }

.pg-mega__panel {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
    z-index: 70;
}

.pg-mega[data-open="true"] .pg-mega__panel { opacity: 1; visibility: visible; }

.pg-mega__card {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    box-shadow: 0 30px 70px -28px rgba(40, 10, 70, 0.42);
    padding: 10px;
    width: 560px;
    max-width: calc(100vw - 48px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pg-mega__item {
    display: flex;
    gap: 13px;
    padding: 15px 14px;
    border-radius: 14px;
    text-decoration: none;
    align-items: flex-start;
    transition: background .15s ease;
}

.pg-mega__item:hover { background: var(--pg-surface-lilac); }

.pg-mega__item.is-current { background: var(--pg-surface-lilac); }
.pg-mega__item.is-current:hover { background: #F1EBFA; }

.pg-mega__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-mega__name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pg-ink);
    letter-spacing: -0.2px;
}

.pg-mega__here {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--pg-purple);
    background: #F1E7FC;
    border-radius: 999px;
    padding: 2px 8px;
}

.pg-mega__short {
    display: block;
    font-size: 13px;
    color: var(--pg-body-2);
    line-height: 1.45;
    margin-top: 3px;
}

.pg-mega__foot {
    grid-column: 1 / -1;
    margin: 4px 6px 2px;
    padding-top: 12px;
    border-top: 1px solid var(--pg-line-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pg-mega__foot span { font-size: 12.5px; color: var(--pg-muted-2); }

.pg-mega__foot a { font-size: 13px; font-weight: 500; text-decoration: none; }

/* ---------- Alternância desktop / mobile ---------- */

.pg-mobile-only { display: none; }

.pg-nav__group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pg-muted-3);
    padding: 14px 4px 6px;
}

.pg-nav__mobile-item {
    display: block;
    text-decoration: none;
    color: var(--pg-ink);
    font-size: 16px;
    font-weight: 500;
    padding: 12px 4px;
}

.pg-nav__mobile-item.is-current { color: var(--pg-purple); }

/* O breakpoint do menu muda por página: a home e a fidelidade têm menos
   itens (920px), a promo tem mais (1040px). A classe no <body> escolhe. */
@media (max-width: 920px) {
    body:not(.pg-nav-wide) .pg-burger { display: inline-flex; }
    body:not(.pg-nav-wide) .pg-nav { display: none; }
    body:not(.pg-nav-wide) .pg-nav[data-open="true"] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin: 0;
        background: var(--pg-bg);
        border-bottom: 1px solid var(--pg-line-2);
        padding: 8px 22px 20px;
        box-shadow: 0 30px 60px -30px rgba(40, 10, 70, 0.35);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    body:not(.pg-nav-wide) .pg-desktop-only { display: none !important; }
    body:not(.pg-nav-wide) .pg-mobile-only { display: block; }
    body:not(.pg-nav-wide) .pg-nav[data-open="true"] > a {
        padding: 14px 4px;
        font-size: 16px;
        border-top: 1px solid var(--pg-line-4);
    }
    body:not(.pg-nav-wide) .pg-nav[data-open="true"] .pg-wa-btn {
        margin-top: 14px !important;
        justify-content: center;
    }
}

@media (max-width: 1040px) {
    body.pg-nav-wide .pg-burger { display: inline-flex; }
    body.pg-nav-wide .pg-nav { display: none; }
    body.pg-nav-wide .pg-nav[data-open="true"] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin: 0;
        background: var(--pg-bg);
        border-bottom: 1px solid var(--pg-line-2);
        padding: 8px 22px 20px;
        box-shadow: 0 30px 60px -30px rgba(40, 10, 70, 0.35);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    body.pg-nav-wide .pg-desktop-only { display: none !important; }
    body.pg-nav-wide .pg-mobile-only { display: block; }
    body.pg-nav-wide .pg-nav[data-open="true"] > a {
        padding: 14px 4px;
        font-size: 16px;
        border-top: 1px solid var(--pg-line-4);
    }
    body.pg-nav-wide .pg-nav[data-open="true"] .pg-wa-btn {
        margin-top: 14px !important;
        justify-content: center;
    }
}

/* Rodapé. Duas variantes: a completa (4 colunas), usada na home e nas
   páginas de produto, e a compacta (.pg-footer--compact) da raspadinha. */

.pg-footer { background: var(--pg-dark); color: #fff; }

.pg-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) 32px 32px;
}

.pg-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--pg-dark-line);
}

.pg-footer__brand { max-width: 320px; }

.pg-footer__brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pg-footer__logo { height: 28px; width: auto; display: block; }

.pg-footer__badge {
    font-size: 14px;
    font-weight: 500;
    color: var(--pg-dark-body);
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.pg-footer__tagline {
    font-size: 14.5px;
    color: var(--pg-dark-body);
    line-height: 1.55;
    margin: 0;
}

.pg-footer__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    color: #fff;
}

.pg-footer__links { display: flex; flex-direction: column; gap: 11px; }

.pg-footer__link,
.pg-footer__text {
    text-decoration: none;
    color: var(--pg-dark-body);
    font-size: 14.5px;
}

.pg-footer__link { transition: color .15s ease; }
.pg-footer__link:hover { color: #fff; }

.pg-footer__wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--pg-grad-soft);
    transition: filter .18s ease;
}

.pg-footer__wa:hover { filter: brightness(1.08); }

.pg-footer__mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--pg-dark-body);
    font-size: 14px;
    margin-top: 14px;
    transition: color .15s ease;
}

.pg-footer__mail:hover { color: #fff; }

.pg-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding-top: 22px;
    color: var(--pg-dark-faint);
    font-size: 13px;
}

.pg-footer__legal-links { display: flex; gap: 20px; }

.pg-footer__legal-links a {
    color: var(--pg-dark-faint);
    text-decoration: none;
    transition: color .15s ease;
}

.pg-footer__legal-links a:hover { color: #fff; }

/* ---------- Variante compacta ---------- */

.pg-footer--compact { padding: clamp(40px, 5vw, 64px) 24px 34px; }

.pg-footer--compact .pg-footer__row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    justify-content: space-between;
}

.pg-footer--compact .pg-footer__inline { display: flex; flex-wrap: wrap; gap: 22px; }

.pg-footer--compact .pg-footer__note {
    max-width: 1200px;
    margin: 26px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--pg-dark-line);
    font-size: 12.5px;
    color: var(--pg-dark-faint);
}

/* Padrões compartilhados entre as páginas internas (promo, fidelidade,
   raspadinha) — o que é de uma página só fica no CSS dela. */

/* ---------- Hero de página interna ---------- */

.pg-inner-hero {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 84px) 32px clamp(36px, 4vw, 60px);
}

.pg-inner-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: clamp(32px, 4vw, 60px);
    align-items: center;
    position: relative;
}

.pg-inner-hero__title {
    font-size: clamp(2.3rem, 4.6vw, 3.6rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.4px;
    margin: 0 0 20px;
    color: var(--pg-ink);
}

.pg-hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pg-hero-phone {
    position: absolute;
    bottom: -3%;
    left: -3%;
    width: 136px;
    padding: 6px;
    background: var(--pg-ink);
    border-radius: 24px;
    box-shadow: 0 26px 46px -18px rgba(0, 0, 0, 0.55);
    animation: pgFloat2 5s ease-in-out infinite;
}

.pg-hero-phone img { display: block; width: 100%; height: auto; border-radius: 19px; }

.pg-hero-chip {
    position: absolute;
    top: 5%;
    right: -2%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--pg-line-lilac);
    border-radius: 14px;
    padding: 11px 14px;
    box-shadow: 0 18px 38px -18px rgba(40, 10, 70, 0.4);
    animation: pgFloat2 6.5s ease-in-out infinite;
}

.pg-hero-chip__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--pg-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pg-hero-chip__title { font-size: 12px; font-weight: 700; color: var(--pg-ink); white-space: nowrap; }
.pg-hero-chip__sub { font-size: 10.5px; color: var(--pg-muted); white-space: nowrap; }

/* ---------- Mockup de celular ----------
   Reproduz em CSS a moldura que no layout era um componente React (o
   LoyaltyPhone). A tela é uma imagem estática exportada do design, para o
   site não precisar carregar React só para mostrar um mockup.
   Escale com --pg-phone-scale (1 = 300px de largura). */

.pg-phone {
    position: relative;
    width: calc(300px * var(--pg-phone-scale, 1));
    height: calc(586px * var(--pg-phone-scale, 1));
}

.pg-phone--float { animation: pgFloat 6s ease-in-out infinite; }

.pg-phone__scaler {
    width: 300px;
    transform: scale(var(--pg-phone-scale, 1));
    transform-origin: top left;
}

.pg-phone__frame {
    position: relative;
    width: 300px;
    background: var(--pg-dark);
    border-radius: 42px;
    padding: 12px;
    box-shadow: 0 50px 90px -40px rgba(40, 10, 70, 0.55), 0 10px 30px -14px rgba(0, 0, 0, 0.2);
}

.pg-phone__notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 7px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
    z-index: 3;
}

.pg-phone__screen {
    position: relative;
    width: 276px;
    height: 562px;
    border-radius: 32px;
    overflow: hidden;
    background: #EEF1FB;
}

.pg-phone__screen img { display: block; width: 276px; height: auto; }

/* ---------- Faixa de números ---------- */

.pg-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 26px;
}

.pg-stats-row__item { border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 20px; }

.pg-stats-row__value {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -1.6px;
    background: var(--pg-grad-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pg-stats-row__label {
    color: var(--pg-dark-body);
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.4;
}

/* ---------- Listas de passos ---------- */

.pg-steps { display: grid; gap: 14px; }

.pg-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 18px;
    padding: 20px 22px;
}

.pg-step__n {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pg-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-step__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 5px; }
.pg-step__text { font-size: 14.5px; color: var(--pg-body); line-height: 1.55; margin: 0; }

/* ---------- Chips de destaque ---------- */

.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pg-chip {
    font-size: 13px;
    color: #2C2722;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 999px;
    padding: 7px 14px;
}

/* ---------- Barras de progresso / estoque ---------- */

.pg-track {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #F1EDE7;
}

.pg-track__bar { display: block; height: 100%; border-radius: 999px; }

/* ---------- Abas ---------- */

.pg-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.pg-tab {
    font-family: inherit;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    transition: all .18s ease;
    border: 1px solid var(--pg-line-3);
    color: #4B4640;
    background: #fff;
}

.pg-tab.is-active {
    border-color: transparent;
    color: #fff;
    background: var(--pg-grad-soft);
}

/* Abas em pílula sobre fundo claro (comparativo da fidelidade). */
.pg-pilltabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #F1EDE7;
}

.pg-pilltab {
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: var(--pg-muted);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.pg-pilltab.is-active {
    background: #fff;
    color: var(--pg-ink);
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.25);
}

/* ---------- FAQ compartilhado ---------- */

.pg-faq__q {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 0 0 9px;
    color: var(--pg-ink);
}

/* ---------- CTA escuro compartilhado ---------- */

.pg-cta-band { padding: clamp(20px, 3vw, 40px) 16px clamp(48px, 6vw, 88px); }

.pg-cta { padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 64px); text-align: center; }

.pg-cta__title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    margin: 0 auto 16px;
    max-width: 720px;
    line-height: 1.1;
}

.pg-cta__lead {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    color: var(--pg-dark-body-2);
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 580px;
    text-wrap: pretty;
}

.pg-cta__note { font-size: 13.5px; color: var(--pg-dark-muted); margin: 20px 0 0; }
.pg-cta__note a { color: #C49BFF; text-decoration: none; }
.pg-cta__note a:hover { text-decoration: underline; }

.pg-cta__halo {
    top: -120px;
    left: 30%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.4), transparent 70%);
    filter: blur(50px);
}

/* Home — estilos exclusivos da página. O que é compartilhado com outras
   páginas está em base.css. */

/* ---------- Hero ---------- */

.home-hero { padding: clamp(48px, 7vw, 92px) 32px clamp(40px, 5vw, 68px); position: relative; }

.home-hero__halo {
    top: -40px;
    right: -80px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.16), rgba(0, 231, 254, 0.05) 60%, transparent 72%);
    filter: blur(20px);
}

.home-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    position: relative;
}

.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.home-hero__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero__checks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--pg-body-2);
}

.home-hero__checks span { color: var(--pg-purple); font-size: 17px; }

.home-hero__visual {
    position: relative;
    min-height: 470px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-hero__visual-glow {
    position: absolute;
    inset: 6% 2%;
    border-radius: 32px;
    background: linear-gradient(150deg, rgba(143, 0, 255, 0.12), rgba(0, 231, 254, 0.12));
    filter: blur(10px);
    pointer-events: none;
}

.home-hero__shot {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    border-radius: 12px;
    filter: drop-shadow(0 38px 60px rgba(40, 10, 70, 0.28));
}

.home-hero__phone {
    position: absolute;
    bottom: -4%;
    left: -3%;
    width: 138px;
    padding: 6px;
    background: var(--pg-dark);
    border-radius: 24px;
    box-shadow: 0 26px 46px -18px rgba(0, 0, 0, 0.55);
}

.home-hero__phone img { display: block; width: 100%; height: auto; border-radius: 19px; }

.home-hero__chip {
    position: absolute;
    top: 4%;
    right: -2%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--pg-line-lilac);
    border-radius: 14px;
    padding: 11px 14px;
    box-shadow: 0 18px 38px -18px rgba(40, 10, 70, 0.4);
}

.home-hero__chip-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--pg-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-hero__chip-title { font-size: 12px; font-weight: 700; color: var(--pg-ink); white-space: nowrap; }
.home-hero__chip-sub { font-size: 10.5px; color: var(--pg-muted); white-space: nowrap; }

/* ---------- Logos ---------- */

.home-logos { max-width: 1200px; margin: 0 auto; padding: 18px 32px 8px; }

/* ---------- Ciclo de vida ---------- */

.home-ciclo__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.home-ciclo__idx {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-ciclo__rule { height: 1px; flex: 1; background: linear-gradient(90deg, #E7DEF6, transparent); }

.home-ciclo__title { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 6px; }
.home-ciclo__desc { font-size: 14px; color: var(--pg-body); line-height: 1.5; margin: 0 0 12px; }

/* ---------- Vitrine de produtos ---------- */

.home-vitrine__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.home-vitrine__aside { font-size: 15px; color: var(--pg-body-2); max-width: 340px; margin: 0; }

.home-produto {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 26px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.home-produto--promo:hover {
    border-color: #D8CFEA;
    box-shadow: 0 34px 64px -36px rgba(40, 10, 70, 0.45);
    transform: translateY(-4px);
}

.home-produto--fidelidade:hover {
    border-color: #CFE9F0;
    box-shadow: 0 34px 64px -36px rgba(0, 90, 120, 0.4);
    transform: translateY(-4px);
}

.home-produto__media {
    position: relative;
    height: 248px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 26px;
}

.home-produto--promo .home-produto__media { background: linear-gradient(150deg, #F4F1FB, #EAF8FC); }
.home-produto--fidelidade .home-produto__media { background: linear-gradient(150deg, #EAF8FC, #F4F1FB); }

.home-produto__glow {
    position: absolute;
    top: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    filter: blur(8px);
}

.home-produto--promo .home-produto__glow {
    right: -40px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.18), transparent 70%);
}

.home-produto--fidelidade .home-produto__glow {
    left: -40px;
    background: radial-gradient(circle, rgba(0, 231, 254, 0.22), transparent 70%);
}

.home-produto__media > img {
    position: relative;
    width: 100%;
    max-width: 420px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 24px 44px -22px rgba(40, 10, 70, 0.4);
    transform: translateY(14px);
}

/* Card cujo visual é o mockup de celular (Fidelidade). */
.home-produto--fidelidade .home-produto__media { align-items: flex-start; padding: 0; }

.home-produto__phone {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.home-produto__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    background: linear-gradient(to bottom, rgba(244, 241, 251, 0), #F4F1FB);
    pointer-events: none;
}

.home-produto__body { padding: 28px 28px 30px; }

.home-produto__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.home-produto__audience { font-size: 12.5px; color: var(--pg-muted-2); }

.home-produto__name { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 10px; }

.home-produto__desc {
    font-size: 15px;
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0 0 18px;
    text-wrap: pretty;
}

.home-produto__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.home-produto__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 500;
}

.home-produto--fidelidade .home-produto__cta { background-image: linear-gradient(120deg, #00B8E8, #8F00FF); }

/* ---------- Quem é a Passgo ---------- */

.home-quem__halo-1 {
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.5), transparent 68%);
    filter: blur(40px);
}

.home-quem__halo-2 {
    bottom: -160px;
    left: -60px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0, 231, 254, 0.32), transparent 68%);
    filter: blur(44px);
}

.home-quem__lead {
    color: var(--pg-dark-body);
    font-size: 15.5px;
    margin: 0 0 40px;
    max-width: 620px;
}

.home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 30px;
    margin-bottom: 48px;
}

.home-stats__item { border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 22px; }

.home-stats__value { display: flex; align-items: baseline; gap: 4px; }

.home-stats__number {
    font-size: clamp(2.4rem, 4vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -2px;
}

.home-stats__suffix {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -1px;
}

.home-stats__label {
    color: var(--pg-dark-body);
    font-size: 14.5px;
    margin-top: 6px;
    line-height: 1.35;
}

.home-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1px;
    background: var(--pg-dark-line);
    border: 1px solid var(--pg-dark-line);
    border-radius: 18px;
    overflow: hidden;
}

.home-timeline__item { background: var(--pg-dark); padding: 22px 20px; }

.home-timeline__head { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; }

.home-timeline__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pg-grad-light);
}

.home-timeline__year { font-size: 17px; font-weight: 700; color: #fff; }

.home-timeline__text { font-size: 13.5px; color: var(--pg-dark-body); line-height: 1.5; margin: 0; }

/* ---------- FAQ ---------- */

.home-faq__q {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 0 0 9px;
    color: var(--pg-ink);
}

/* ---------- CTA final ---------- */

.home-cta-band { padding: clamp(20px, 3vw, 40px) 16px clamp(48px, 6vw, 88px); }

.home-cta { padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 64px); text-align: center; }

.home-cta__halo {
    top: -120px;
    left: 30%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.4), transparent 70%);
    filter: blur(50px);
}

.home-cta__title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    margin: 0 auto 16px;
    max-width: 720px;
    line-height: 1.1;
}

.home-cta__lead {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    color: var(--pg-dark-body-2);
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 560px;
    text-wrap: pretty;
}

.home-cta__note { font-size: 13.5px; color: var(--pg-dark-muted); margin: 20px 0 0; }

.home-cta__note a { color: #C49BFF; text-decoration: none; }
.home-cta__note a:hover { text-decoration: underline; }

/* Página Passgo Promo. */

/* ---------- Hero ---------- */

.promo-hero { padding: clamp(48px, 7vw, 96px) 32px clamp(40px, 5vw, 72px); }

.promo-hero__halo {
    top: -40px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.16), rgba(0, 231, 254, 0.05) 60%, transparent 72%);
    filter: blur(20px);
}

.promo-hero .pg-inner-hero__grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.promo-hero__title {
    font-size: clamp(2.5rem, 5.4vw, 4.1rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0 0 22px;
    color: var(--pg-ink);
}

.promo-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.promo-hero__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.promo-hero__checks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--pg-body-2);
}

.promo-hero__checks span { color: var(--pg-purple); font-size: 17px; }

.promo-hero__glow {
    position: absolute;
    inset: 6% 2%;
    border-radius: 32px;
    background: linear-gradient(150deg, rgba(143, 0, 255, 0.12), rgba(0, 231, 254, 0.12));
    filter: blur(10px);
    pointer-events: none;
}

.promo-hero__shot {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    border-radius: 12px;
    filter: drop-shadow(0 38px 60px rgba(40, 10, 70, 0.28));
}

/* ---------- Resultados ---------- */

.promo-resultados {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 48px) 32px clamp(48px, 6vw, 88px);
}

.promo-h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -1px;
    margin: 14px 0 0;
    line-height: 1.1;
}

.promo-resultados__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.promo-result {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
}

.promo-result__value {
    font-size: clamp(2.6rem, 4.4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
}

.promo-result__label {
    font-size: 14px;
    color: var(--pg-body);
    line-height: 1.5;
    margin: 14px 0 0;
    text-wrap: pretty;
}

.promo-resultados__disclaimer {
    text-align: center;
    font-size: 12.5px;
    color: var(--pg-muted-3);
    margin: 0 0 44px;
}

.promo-prova {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.promo-prova__media { position: relative; }

.promo-prova__glow {
    position: absolute;
    inset: 6% 2%;
    border-radius: 28px;
    background: linear-gradient(150deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.10));
    filter: blur(12px);
    pointer-events: none;
}

.promo-prova__frame {
    position: relative;
    background: #fff;
    border: 1px solid #ECE6DF;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 40px 80px -44px rgba(40, 10, 70, 0.4);
}

.promo-prova__frame img { display: block; width: 100%; height: auto; }

.promo-quote {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    color: var(--pg-ink);
    line-height: 1.5;
    margin: 0 0 16px;
    font-weight: 500;
    text-wrap: pretty;
}

.promo-quote__by { font-size: 14px; font-weight: 700; color: var(--pg-muted); margin-bottom: 28px; }

.promo-cases { display: flex; flex-wrap: wrap; gap: 10px; }

.promo-case {
    font-size: 14px;
    font-weight: 500;
    color: #2C2722;
    background: #F6F5F2;
    border-radius: 999px;
    padding: 8px 15px;
}

/* ---------- Logos ---------- */

.promo-logos {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(28px, 3.5vw, 44px) 32px;
}

.promo-logos__note { text-align: center; font-size: 13.5px; color: var(--pg-muted); margin: 0; }

/* ---------- Mecânicas ---------- */

.promo-mecanicas {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 72px) 32px clamp(20px, 3vw, 40px);
}

.promo-mecanicas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 20px;
}

.promo-mecanica {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.promo-mecanica:hover {
    border-color: #D8CFEA;
    box-shadow: 0 26px 50px -30px rgba(40, 10, 70, 0.4);
    transform: translateY(-4px);
}

.promo-mecanica__glow {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.10));
}

.promo-mecanica__icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform .2s ease;
}

.promo-mecanica:hover .promo-mecanica__icon { transform: scale(1.08) rotate(-4deg); }

.promo-mecanica__title {
    position: relative;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0 0 9px;
}

.promo-mecanica__desc {
    position: relative;
    font-size: 14.5px;
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0 0 18px;
}

.promo-mecanica__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pg-purple);
    margin-top: auto;
}

.promo-mecanica__link:hover { color: #6D00C4; }

/* ---------- Blocos escuros (validação e gestão) ---------- */

.promo-dark-head { max-width: 680px; margin-bottom: 38px; }

.promo-dark-title {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -1px;
    margin: 14px 0;
    color: #fff;
    line-height: 1.08;
}

.promo-dark-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--pg-dark-body-2);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.promo-validacao-band { padding: clamp(20px, 3vw, 40px) 16px clamp(48px, 6vw, 88px); }

.promo-validacao { padding: clamp(36px, 4.5vw, 64px) clamp(26px, 4vw, 56px); }

.promo-validacao__halo {
    top: -100px;
    left: 30%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.35), transparent 70%);
    filter: blur(50px);
}

.promo-validacao__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(18px, 2.5vw, 36px);
    align-items: start;
}

.promo-modos { display: flex; flex-direction: column; gap: 8px; }

.promo-modo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    transition: all .2s ease;
}

.promo-modo:hover { background: rgba(255, 255, 255, 0.07); }

.promo-modo.is-active {
    border-color: rgba(143, 0, 255, 0.55);
    background: rgba(143, 0, 255, 0.16);
}

.promo-modo__left { display: flex; align-items: center; gap: 11px; }

.promo-modo__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.25);
}

.promo-modo.is-active .promo-modo__dot { background: var(--pg-grad-light); }

.promo-modo__label { font-size: 15.5px; font-weight: 500; }

.promo-modo__tag {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--pg-dark-muted);
    background: rgba(255, 255, 255, 0.05);
}

.promo-modo.is-active .promo-modo__tag { color: #fff; background: rgba(255, 255, 255, 0.16); }

.promo-modo-detalhe {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: clamp(26px, 3vw, 40px);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promo-modo-detalhe__icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--pg-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 16px 32px -14px rgba(143, 0, 255, 0.7);
}

.promo-modo-detalhe__tag {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pg-dark-muted);
    margin-bottom: 10px;
}

.promo-modo-detalhe__title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.6px;
    margin: 0 0 14px;
}

.promo-modo-detalhe__desc { font-size: 1.05rem; line-height: 1.6; color: #B6AECB; margin: 0; }

/* ---------- Segmentação ---------- */

.promo-segmentacao {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) 32px;
}

.promo-mapa {
    display: block;
    width: 100%;
    height: clamp(220px, 30vw, 320px);
    object-fit: cover;
    border-radius: 24px;
    margin-bottom: 32px;
}

.promo-segmentacao__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.promo-sub-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pg-muted-3);
    margin-bottom: 16px;
}

.promo-niveis { display: grid; gap: 10px; }

.promo-nivel {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 18px;
    padding: 16px 18px;
}

.promo-nivel__row { display: flex; align-items: center; gap: 12px; }

.promo-nivel__n {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.12), rgba(0, 231, 254, 0.14));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--pg-purple);
}

.promo-nivel__title {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--pg-ink);
}

.promo-nivel__desc { display: block; font-size: 13px; color: var(--pg-body-2); margin-top: 2px; }

.promo-segchips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 9px; }

.promo-segchips .pg-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; }

/* Painel de estoque */

.promo-estoque {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 36px 70px -46px rgba(40, 10, 70, 0.45);
}

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

.promo-estoque__title { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--pg-ink); }

.promo-live {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--pg-success);
    background: #E7F6EE;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.promo-estoque__tabs { gap: 7px; margin-bottom: 18px; }

.promo-estoque__list { display: grid; gap: 12px; }

.promo-estoque__item {
    background: var(--pg-bg);
    border: 1px solid var(--pg-line-4);
    border-radius: 15px;
    padding: 14px 15px;
}

.promo-estoque__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.promo-estoque__nome { font-size: 14.5px; font-weight: 500; color: var(--pg-ink); }
.promo-estoque__restante { font-size: 12.5px; color: var(--pg-body-2); white-space: nowrap; }

.promo-estoque__bar-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.promo-estoque__track {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: #EAE7E2;
    overflow: hidden;
}

.promo-estoque__bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8F00FF, #00E7FE);
}

.promo-estoque__bar.is-low { background: var(--pg-warning); }
.promo-estoque__bar.is-out { background: var(--pg-danger); }

.promo-estoque__tag {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 999px;
    padding: 4px 10px;
}

.promo-estoque__tag.is-swap    { color: var(--pg-success); background: #E7F6EE; }
.promo-estoque__tag.is-instant { color: var(--pg-purple);  background: #F4EAFE; }
.promo-estoque__tag.is-out     { color: var(--pg-danger);  background: #FDECEF; }

.promo-estoque__note {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pg-line-4);
    font-size: 12.5px;
    color: var(--pg-body-2);
    line-height: 1.45;
}

/* ---------- Experiência ---------- */

.promo-experiencia {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 32px clamp(20px, 3vw, 40px);
}

.promo-phones {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 32px 0 44px;
}

.promo-phones__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 86%;
    height: 86%;
    border-radius: 32px;
    background: linear-gradient(150deg, rgba(143, 0, 255, 0.14), rgba(0, 231, 254, 0.14));
    filter: blur(26px);
    pointer-events: none;
}

.promo-phone { position: relative; padding: 7px; background: var(--pg-ink); }

.promo-phone img { display: block; width: 100%; height: auto; }

.promo-phone--back {
    width: 44%;
    max-width: 220px;
    border-radius: 28px;
    box-shadow: 0 30px 54px -26px rgba(40, 10, 70, 0.55);
}

.promo-phone--back img { border-radius: 22px; }

.promo-phone--front {
    width: 48%;
    max-width: 240px;
    border-radius: 30px;
    box-shadow: 0 36px 64px -24px rgba(40, 10, 70, 0.6);
}

.promo-phone--front img { border-radius: 23px; }

.promo-identidade {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 44px;
}

.promo-chip--lg { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; padding: 9px 15px; }

.promo-canais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}

.promo-canal {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 24px;
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.promo-canal__media {
    background: linear-gradient(160deg, #F4F1FB, #EAF8FC);
    border-radius: 16px;
    height: 210px;
    margin-bottom: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.promo-canal__phone {
    width: 150px;
    margin-top: 24px;
    padding: 6px 6px 0;
    background: var(--pg-ink);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 22px 40px -20px rgba(40, 10, 70, 0.5);
}

.promo-canal__phone img { display: block; width: 100%; height: auto; border-radius: 17px 17px 0 0; }

.promo-canal__foto {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 22px;
}

.promo-canal__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 8px; }

/* ---------- Gestão ---------- */

.promo-gestao-band { padding: clamp(20px, 3vw, 40px) 16px clamp(48px, 6vw, 88px); }

.promo-gestao__halo {
    bottom: -140px;
    right: -60px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0, 231, 254, 0.28), transparent 68%);
    filter: blur(46px);
}

.promo-gestao__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(20px, 3vw, 40px);
    align-items: stretch;
}

.promo-pillars { display: flex; flex-direction: column; gap: 14px; }

.promo-pillar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 22px 24px;
}

.promo-pillar__title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 7px; letter-spacing: -0.3px; }
.promo-pillar__desc { font-size: 14px; color: var(--pg-dark-body-2); line-height: 1.5; margin: 0; }

.promo-dash {
    background: var(--pg-bg);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5);
}

.promo-dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.promo-dash__brand { display: flex; align-items: center; gap: 9px; }

.promo-dash__mark { width: 24px; height: 24px; border-radius: 7px; background: var(--pg-grad); }

.promo-dash__title { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; color: var(--pg-ink); }

.promo-dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }

.promo-dash__kpi {
    background: #fff;
    border: 1px solid #EFEBE6;
    border-radius: 11px;
    padding: 10px;
}

.promo-dash__kpi-label { font-size: 9px; color: var(--pg-muted); margin-bottom: 3px; line-height: 1.2; }
.promo-dash__kpi-value { font-size: 16px; font-weight: 700; letter-spacing: -0.5px; }

.promo-dash__card {
    background: #fff;
    border: 1px solid #EFEBE6;
    border-radius: 13px;
    padding: 14px;
    margin-bottom: 12px;
}

.promo-dash__card--last { padding: 13px 14px; margin-bottom: 0; }

.promo-dash__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.promo-dash__card-title { font-size: 12px; font-weight: 500; color: var(--pg-body-2); }
.promo-dash__card-note { font-size: 10.5px; color: var(--pg-muted-3); }

.promo-dash__chart { display: flex; align-items: flex-end; gap: 7px; height: 64px; }

.promo-dash__bar {
    flex: 1;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #C49BFF, #8F00FF);
}

.promo-dash__bar.is-cyan { background: linear-gradient(180deg, #7FD8F5, #00B8E8); }

.promo-dash__rank { display: flex; flex-direction: column; gap: 8px; }

.promo-dash__rank-row { display: flex; align-items: center; gap: 9px; }

.promo-dash__rank-label { font-size: 11px; width: 78px; color: #4B4640; }

.promo-dash__rank-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #EAE7E2;
    overflow: hidden;
}

.promo-dash__rank-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8F00FF, #00E7FE);
}

.promo-relatorios { margin-top: 26px; }

.promo-relatorios__label { font-size: 12.5px; font-weight: 500; color: var(--pg-dark-muted); margin-bottom: 14px; }

.promo-relatorios__list { display: flex; flex-wrap: wrap; gap: 9px; }

.promo-relatorio {
    font-size: 13px;
    color: #D9D3E6;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 8px 14px;
}

/* ---------- FAQ ---------- */

.promo-faq {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 20px) 32px clamp(48px, 6vw, 88px);
}

/* ---------- CTA final ---------- */

.promo-cta-band { max-width: 1200px; margin: 0 auto; padding: 0 32px clamp(56px, 7vw, 96px); }

.promo-cta {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(125deg, #8F00FF 0%, #5B2BE0 45%, #00B8E8 100%);
    padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 64px);
    text-align: center;
}

.promo-cta__halo {
    top: -100px;
    right: -60px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 65%);
    filter: blur(30px);
}

.promo-cta__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.08;
}

.promo-cta__lead {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: rgba(255, 255, 255, 0.88);
    max-width: 560px;
    margin: 0 auto 34px;
    line-height: 1.5;
}

.promo-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.promo-cta__primary,
.promo-cta__secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-size: 17px;
    padding: 16px 32px;
    border-radius: 999px;
    transition: transform .18s ease, background .18s ease;
}

.promo-cta__primary {
    color: var(--pg-ink);
    font-weight: 700;
    background: #fff;
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.4);
}

.promo-cta__primary:hover { transform: translateY(-2px); }

.promo-cta__secondary {
    color: #fff;
    font-weight: 500;
    padding: 16px 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.promo-cta__secondary:hover { background: rgba(255, 255, 255, 0.24); }

.promo-cta__note { font-size: 13.5px; color: rgba(255, 255, 255, 0.78); margin: 22px auto 0; }

/* Página Passgo Fidelidade. */

/* ---------- Hero ---------- */

.fid-hero { padding: clamp(48px, 7vw, 96px) 32px clamp(40px, 5vw, 72px); }

.fid-hero__halo {
    top: -40px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.16), rgba(0, 231, 254, 0.05) 60%, transparent 72%);
    filter: blur(20px);
}

.fid-hero__grid { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

.fid-hero__title {
    font-size: clamp(2.4rem, 5.2vw, 3.95rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0 0 22px;
    color: var(--pg-ink);
}

.fid-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.fid-hero__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.fid-hero__checks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--pg-body-2);
}

.fid-hero__checks span { color: var(--pg-purple); font-size: 17px; }

.fid-hero__visual {
    position: relative;
    min-height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fid-hero__glow {
    position: absolute;
    inset: 4% 12%;
    border-radius: 40px;
    background: linear-gradient(150deg, rgba(143, 0, 255, 0.12), rgba(0, 231, 254, 0.12));
    filter: blur(8px);
}

.fid-hero__chip {
    position: absolute;
    bottom: 9%;
    left: -2%;
    background: #fff;
    border: 1px solid #EFEBE6;
    border-radius: 16px;
    padding: 12px 15px;
    box-shadow: 0 20px 40px -18px rgba(40, 10, 70, 0.4);
    animation: pgFloat2 5s ease-in-out infinite;
}

.fid-hero__chip-label {
    font-size: 10.5px;
    color: var(--pg-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.fid-hero__chip-value { font-size: 16px; font-weight: 700; color: var(--pg-ink); }

/* ---------- Números de mercado ---------- */

.fid-stats-band { padding: clamp(20px, 3vw, 40px) 16px; }

.fid-stats__halo-1 {
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.5), transparent 68%);
    filter: blur(40px);
}

.fid-stats__halo-2 {
    bottom: -160px;
    left: -60px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0, 231, 254, 0.32), transparent 68%);
    filter: blur(44px);
}

.fid-stats__title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 500;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.6px;
}

.fid-stats__lead { color: var(--pg-dark-body); font-size: 15.5px; margin: 0 0 40px; }

.fid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 30px;
}

.fid-stats__item { border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 22px; }

.fid-stats__value {
    font-size: clamp(2.4rem, 4vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.1;
}

.fid-stats__label {
    color: var(--pg-dark-body);
    font-size: 14.5px;
    margin-top: 6px;
    line-height: 1.35;
}

.fid-stats__fontes { color: var(--pg-dark-faint); font-size: 12px; margin: 28px 0 0; }

/* ---------- O que é ---------- */

.fid-pillars-band { background: #EEF1FB; padding: clamp(56px, 7vw, 96px) 0; }

.fid-pillars { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.fid-pillars__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}

.fid-pillar {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 22px;
    padding: 30px 26px;
}

.fid-pillar__icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.10));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.fid-pillar__title { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; }
.fid-pillar__desc { font-size: 15px; color: var(--pg-body); line-height: 1.55; margin: 0; }

/* ---------- Os dois lados do balcão ---------- */

.fid-balcao {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 72px) 32px clamp(20px, 3vw, 40px);
}

.fid-balcao__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.fid-balcao__title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    margin: 14px 0 16px;
    line-height: 1.1;
}

.fid-balcao__lead {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0 0 28px;
    text-wrap: pretty;
}

.fid-balcao__list { display: flex; flex-direction: column; gap: 16px; }

.fid-balcao__item { display: flex; align-items: flex-start; gap: 12px; }

.fid-balcao__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
    background: var(--pg-grad);
}

.fid-balcao__text { font-size: 15.5px; color: #2C2722; line-height: 1.45; }
.fid-balcao__text strong { font-weight: 700; }

.fid-balcao__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 520px;
}

.fid-balcao__glow {
    position: absolute;
    inset: 4% 14%;
    border-radius: 40px;
    background: linear-gradient(150deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.10));
    filter: blur(8px);
}

.fid-phone--slow { animation: pgFloat2 7s ease-in-out infinite; }

/* ---------- Como funciona ---------- */

.fid-como {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 32px;
}

.fid-como__head { max-width: 720px; margin: 0 auto 50px; }

.fid-como__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.fid-como__phone-wrap { display: flex; justify-content: center; }

.fid-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 14px;
}

.fid-step {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    padding: 26px 22px;
}

.fid-step__n {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--pg-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.fid-step__text { font-size: 15px; color: #2C2722; line-height: 1.5; margin: 0; }

.fid-jornada {
    margin-top: 22px;
    background: #F6F5F2;
    border-radius: 28px;
    padding: clamp(28px, 3.5vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
}

.fid-jornada__card {
    background: #fff;
    border-radius: 20px;
    padding: 26px;
    border: 1px solid var(--pg-line);
}

.fid-jornada__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pg-purple);
    margin-bottom: 16px;
}

.fid-jornada__label .pg-pill__dot { width: 8px; height: 8px; }

.fid-jornada__steps { display: flex; flex-direction: column; gap: 12px; }

.fid-jornada__step { display: flex; align-items: center; gap: 12px; }

.fid-jornada__n { font-size: 13px; font-weight: 700; color: var(--pg-purple); width: 22px; }

.fid-jornada__text { font-size: 15px; color: #2C2722; }

/* ---------- Vantagens ---------- */

.fid-vantagens {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) 32px clamp(48px, 6vw, 88px);
}

.fid-vantagens__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}

/* ---------- Comparativo ---------- */

.fid-comparativo {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 24px) 32px clamp(48px, 6vw, 88px);
}

.fid-comparativo__tabs { display: flex; justify-content: center; margin-bottom: 28px; }

.fid-comparativo .pg-pilltabs { background: #F1EFEC; padding: 5px; }

.fid-tabela {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 24px;
    overflow: hidden;
}

.fid-tabela__head {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    background: #F6F5F2;
    border-bottom: 1px solid var(--pg-line);
}

.fid-tabela__th { padding: 16px 22px; font-size: 14px; font-weight: 700; color: var(--pg-body-2); }

.fid-tabela__th:first-child { font-size: 13px; font-weight: 500; color: var(--pg-muted); }

.fid-tabela__th--passgo {
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.06), rgba(0, 231, 254, 0.06));
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--pg-ink);
}

.fid-tabela__th--passgo .pg-pill__dot { width: 7px; height: 7px; }

.fid-tabela__row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    align-items: stretch;
}

.fid-tabela__row + .fid-tabela__row { border-top: 1px solid #F1ECE6; }

.fid-tabela__criterio { padding: 16px 22px; font-size: 14px; font-weight: 500; color: #2C2722; }

.fid-tabela__other,
.fid-tabela__passgo {
    padding: 16px 22px;
    font-size: 13.5px;
    line-height: 1.4;
    display: flex;
    gap: 8px;
}

.fid-tabela__other { color: var(--pg-muted); }

.fid-tabela__passgo {
    color: #2C2722;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.04), rgba(0, 231, 254, 0.04));
}

.fid-tabela__x { color: #C0392B; flex-shrink: 0; }
.fid-tabela__check { color: var(--pg-success); flex-shrink: 0; }

/* No celular três colunas de texto não cabem: cada linha vira um bloco com
   o critério como título e as duas comparações empilhadas e rotuladas. */
@media (max-width: 720px) {
    .fid-tabela__head { display: none; }

    .fid-tabela__row { grid-template-columns: 1fr; padding: 4px 0 12px; }

    .fid-tabela__criterio {
        padding: 14px 18px 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--pg-muted-3);
    }

    .fid-tabela__other,
    .fid-tabela__passgo {
        display: block;
        padding: 10px 18px;
        font-size: 14px;
    }

    .fid-tabela__other::before,
    .fid-tabela__passgo::before {
        content: attr(data-label);
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        margin-bottom: 4px;
        color: var(--pg-body-2);
    }

    /* Sem o flex do desktop, o gap some — devolve o respiro do ✕/✓. */
    .fid-tabela__x,
    .fid-tabela__check { margin-right: 8px; }

    .fid-tabela__passgo { background: linear-gradient(120deg, rgba(143, 0, 255, 0.05), rgba(0, 231, 254, 0.05)); }
    .fid-tabela__passgo::before { color: var(--pg-purple); }
}

/* ---------- Sem comissão ---------- */

.fid-protagonista-band {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px clamp(48px, 6vw, 88px);
}

.fid-protagonista { padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px); }

.fid-protagonista__halo {
    top: -100px;
    left: 25%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.34), transparent 70%);
    filter: blur(50px);
}

.fid-protagonista__title {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -1px;
    margin: 14px 0 16px;
    color: #fff;
    line-height: 1.1;
}

.fid-protagonista__lead {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    color: var(--pg-dark-body-2);
    line-height: 1.6;
    margin: 0 0 34px;
    text-wrap: pretty;
}

.fid-protagonista__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 18px;
}

.fid-protagonista__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 22px;
}

.fid-protagonista__value { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.fid-protagonista__desc { font-size: 14px; color: var(--pg-dark-body); line-height: 1.4; }

/* ---------- Planos ---------- */

.fid-planos {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px clamp(48px, 6vw, 88px);
}

.fid-planos__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0;
}

.fid-planos__destaque {
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.07), rgba(0, 231, 254, 0.07));
    border: 1px solid var(--pg-line-lilac);
    border-radius: 18px;
    padding: 16px 22px;
    max-width: 640px;
    margin: 0 auto 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    text-align: center;
}

.fid-planos__destaque-strong { font-size: 14.5px; font-weight: 700; color: var(--pg-ink); }
.fid-planos__destaque-text { font-size: 14px; color: var(--pg-body); }

.fid-planos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(186px, 100%), 1fr));
    gap: 16px;
}

.fid-plano {
    position: relative;
    border-radius: 20px;
    padding: 26px 22px;
    background: #fff;
    color: var(--pg-ink);
    border: 1px solid var(--pg-line);
}

.fid-plano.is-popular {
    background: var(--pg-dark);
    color: #fff;
    border-color: var(--pg-dark);
    box-shadow: 0 30px 60px -34px rgba(40, 10, 70, 0.5);
}

.fid-plano__tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    margin-bottom: 14px;
    color: #fff;
    background: var(--pg-grad);
}

.fid-plano__credits { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.8px; margin-bottom: 2px; }
.fid-plano__unit { font-size: 13px; color: var(--pg-muted); margin-bottom: 16px; }
.fid-plano__price { font-size: 1.45rem; font-weight: 700; margin-bottom: 4px; }
.fid-plano__per { font-size: 12.5px; color: var(--pg-muted); }

.fid-plano.is-popular .fid-plano__per { color: #B7AFC9; }

.fid-planos__cta { display: flex; justify-content: center; margin-top: 32px; }

.fid-planos__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 28px;
    border-radius: 999px;
    background: var(--pg-grad);
    box-shadow: 0 16px 38px -14px rgba(143, 0, 255, 0.6);
    transition: filter .18s ease, transform .18s ease;
}

.fid-planos__btn:hover { filter: brightness(1.05); transform: translateY(-2px); }

/* ---------- FAQ ---------- */

.fid-faq {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 20px) 32px clamp(48px, 6vw, 88px);
}

/* Página da raspadinha digital. */

/* ---------- Estrutura de seção ---------- */

.rd-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 24px clamp(16px, 2vw, 28px);
}

.rd-h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    margin: 14px 0;
    line-height: 1.08;
}

.rd-h2--sm { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

.rd-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.rd-nota {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 15.5px;
    color: var(--pg-body);
    line-height: 1.6;
    text-wrap: pretty;
}

/* ---------- Hero ---------- */

.rd-hero { position: relative; overflow: hidden; }

.rd-hero__halo {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 620px;
    background: radial-gradient(ellipse at center, rgba(143, 0, 255, 0.14), transparent 65%);
    filter: blur(30px);
    pointer-events: none;
}

.rd-hero__grid {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 84px) 24px clamp(30px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(32px, 4.5vw, 68px);
    align-items: center;
}

.rd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #EADCFB;
    margin-bottom: 22px;
}

.rd-eyebrow__text { font-size: 13px; font-weight: 500; color: #5A544D; }

.rd-hero__title {
    font-size: clamp(2.3rem, 5vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -1.6px;
    line-height: 1.04;
    margin: 0 0 18px;
}

.rd-hero__lead {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--pg-body);
    line-height: 1.55;
    margin: 0 0 30px;
    max-width: 520px;
    text-wrap: pretty;
}

.rd-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.rd-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-size: 16.5px;
    font-weight: 500;
    padding: 15px 28px;
    border-radius: 999px;
    transition: filter .18s ease, transform .18s ease, border-color .18s ease;
}

.rd-btn--primary {
    color: #fff;
    background: var(--pg-grad);
    box-shadow: 0 16px 38px -14px rgba(143, 0, 255, 0.6);
}

.rd-btn--primary:hover { filter: brightness(1.06); transform: translateY(-2px); }

.rd-btn--ghost {
    color: var(--pg-ink);
    padding: 15px 26px;
    background: #fff;
    border: 1px solid #E6E2DD;
}

.rd-btn--ghost:hover { border-color: #C9B6E8; }

.rd-hero__stats { display: flex; flex-wrap: wrap; gap: 26px; }

.rd-hero__stat-value {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -1px;
}

.rd-hero__stat-label { font-size: 13.5px; color: var(--pg-body-2); line-height: 1.4; max-width: 170px; }

/* ---------- Demo da raspadinha ---------- */

.rd-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.rd-demo__phone {
    width: 100%;
    max-width: 320px;
    padding: 8px;
    background: var(--pg-ink);
    border-radius: 36px;
    box-shadow: 0 50px 90px -34px rgba(40, 10, 70, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: pgFloat 7s ease-in-out infinite;
}

.rd-demo__screen { background: var(--pg-bg); border-radius: 29px; overflow: hidden; }

.rd-demo__head { padding: 15px 17px 12px; background: #fff; border-bottom: 1px solid var(--pg-line-4); }

.rd-demo__head-row { display: flex; align-items: center; justify-content: space-between; }

.rd-demo__campanha { font-size: 13px; font-weight: 700; color: var(--pg-ink); letter-spacing: -0.2px; }

.rd-demo__valid {
    font-size: 10px;
    font-weight: 500;
    color: #229A63;
    background: #E9F7F0;
    border-radius: 999px;
    padding: 3px 8px;
}

.rd-demo__rule { height: 3px; border-radius: 999px; background: var(--pg-grad); margin-top: 11px; }

.rd-demo__body { padding: 18px 17px 20px; }

.rd-demo__hint {
    font-size: 12px;
    color: var(--pg-muted);
    margin-bottom: 12px;
    text-align: center;
    min-height: 17px;
}

.rd-demo__card {
    position: relative;
    width: 100%;
    height: 210px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pg-line);
}

.rd-demo__premio {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
}

.rd-demo__premio-icon { font-size: 34px; line-height: 1; }

.rd-demo__premio-kicker {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pg-muted-3);
}

.rd-demo__premio-nome {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--pg-ink);
    line-height: 1.15;
}

.rd-demo__premio-nota { font-size: 11.5px; color: var(--pg-muted); }

.rd-demo__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
    transition: opacity .45s ease;
}

.rd-demo__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 13px;
}

.rd-demo__estoque-label { font-size: 10px; color: var(--pg-muted); line-height: 1.2; }
.rd-demo__estoque-value { font-size: 13px; font-weight: 700; letter-spacing: -0.3px; color: var(--pg-ink); }

.rd-demo__reset {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--pg-purple);
    background: #F7F0FE;
    border: 1px solid #EADCFB;
    border-radius: 999px;
    padding: 8px 13px;
    transition: background .15s ease;
}

.rd-demo__reset:hover { background: #F1E4FD; }

.rd-demo__legenda { font-size: 12.5px; color: var(--pg-muted); margin: 0; text-align: center; }

/* ---------- Comparativo de mecânicas ---------- */

.rd-mecanicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px;
    align-items: stretch;
}

.rd-mecanica {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 22px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}

.rd-mecanica.is-dark {
    background: var(--pg-dark);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 34px 66px -38px rgba(40, 10, 70, 0.5);
}

.rd-mecanica__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.rd-mecanica__nome {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--pg-ink);
}

.rd-mecanica.is-dark .rd-mecanica__nome { color: #fff; }

.rd-mecanica__tag {
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 999px;
    color: var(--pg-body-2);
    background: #F4F1EC;
    white-space: nowrap;
}

.rd-mecanica.is-dark .rd-mecanica__tag { color: var(--pg-dark); background: var(--pg-grad-light); }

.rd-mecanica__linhas { display: grid; gap: 12px; }

.rd-mecanica__label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pg-muted-3);
    margin-bottom: 3px;
}

.rd-mecanica.is-dark .rd-mecanica__label { color: #8F88A3; }

.rd-mecanica__value { font-size: 14.8px; line-height: 1.5; color: var(--pg-ink-2); }

.rd-mecanica.is-dark .rd-mecanica__value { color: #DCD7E8; }

.rd-mecanica__chance {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--pg-line-4);
}

.rd-mecanica.is-dark .rd-mecanica__chance { border-top-color: rgba(255, 255, 255, 0.12); }

.rd-mecanica__chance-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.rd-mecanica__chance-label { font-size: 12.5px; color: var(--pg-muted); }
.rd-mecanica.is-dark .rd-mecanica__chance-label { color: #8F88A3; }

.rd-mecanica__chance-value { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--pg-ink); }
.rd-mecanica.is-dark .rd-mecanica__chance-value { color: #fff; }

.rd-mecanica__track { height: 7px; border-radius: 999px; overflow: hidden; background: #F1EDE7; }
.rd-mecanica.is-dark .rd-mecanica__track { background: rgba(255, 255, 255, 0.12); }

.rd-mecanica__bar { height: 100%; border-radius: 999px; background: var(--pg-grad-soft); }
.rd-mecanica.is-dark .rd-mecanica__bar { background: var(--pg-grad-light); }

/* ---------- Como funciona ---------- */

.rd-como__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(24px, 3.5vw, 44px);
    align-items: center;
}

.rd-passos { display: grid; gap: 14px; }

.rd-passo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 18px;
    padding: 18px 20px;
    transition: border-color .18s ease;
}

.rd-passo:hover { border-color: #D9C7F2; }

.rd-passo__n {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(120deg, rgba(143, 0, 255, 0.10), rgba(0, 231, 254, 0.14));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--pg-purple);
}

.rd-passo__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 5px; }
.rd-passo__desc { font-size: 14px; color: var(--pg-body); line-height: 1.5; margin: 0; }

.rd-fotos {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: clamp(360px, 42vw, 480px);
}

.rd-foto {
    margin: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--pg-line);
}

.rd-foto--tall { grid-row: 1 / 3; }

.rd-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.rd-foto figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(0deg, rgba(20, 16, 27, 0.75), transparent);
}

.rd-foto--tall figcaption { padding: 14px 16px; font-size: 13px; }

/* ---------- Prêmios e probabilidade ---------- */

.rd-premios__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.rd-premios__left { display: flex; flex-direction: column; gap: 22px; }

.rd-premios__foto {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid var(--pg-line);
}

.rd-regras { display: grid; gap: 12px; }

.rd-regra { display: flex; gap: 12px; align-items: flex-start; }

.rd-regra__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--pg-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.rd-regra__text { font-size: 14.8px; color: var(--pg-ink-2); line-height: 1.5; }

.rd-painel {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 30px 60px -40px rgba(40, 10, 70, 0.35);
}

.rd-painel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.rd-painel__kicker { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--pg-muted-3); }
.rd-painel__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.3px; }

.rd-painel__badge {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: #229A63;
    background: #E9F7F0;
    border-radius: 999px;
    padding: 5px 11px;
}

.rd-faixas { display: grid; gap: 10px; }

.rd-faixa {
    border: 1px solid var(--pg-line-4);
    border-radius: 16px;
    padding: 14px 15px;
    background: #FDFCFB;
}

.rd-faixa__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.rd-faixa__nome { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; color: var(--pg-ink); }
.rd-faixa__chance { font-size: 12px; font-weight: 700; color: var(--pg-purple); white-space: nowrap; }

.rd-faixa__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 9px 0 8px;
}

.rd-faixa__estoque { font-size: 12px; color: var(--pg-muted); white-space: nowrap; }

.rd-faixa__tag { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; }

.rd-faixa__track { height: 6px; border-radius: 999px; background: #F1EDE7; overflow: hidden; }
.rd-faixa__bar { height: 100%; border-radius: 999px; }

.rd-painel__foot {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--pg-line-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rd-painel__foot-label { font-size: 12.5px; color: var(--pg-muted); }
.rd-painel__foot-value { font-size: 13px; font-weight: 700; color: var(--pg-ink); white-space: nowrap; }

/* ---------- Estoque por grupo ---------- */

.rd-estoque-band { padding: clamp(48px, 6vw, 88px) 16px clamp(16px, 2vw, 28px); }

.rd-estoque { padding: clamp(34px, 4.5vw, 60px) clamp(24px, 4vw, 54px); }

.rd-estoque__halo-1 {
    top: -130px;
    right: 6%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(143, 0, 255, 0.4), transparent 70%);
    filter: blur(46px);
}

.rd-estoque__halo-2 {
    bottom: -160px;
    left: -50px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(0, 231, 254, 0.28), transparent 68%);
    filter: blur(44px);
}

.rd-estoque__head { max-width: 680px; margin-bottom: 34px; }

.rd-estoque__title {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 14px 0;
    line-height: 1.08;
}

.rd-estoque__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--pg-dark-body-2);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.rd-estoque__mapa {
    display: block;
    width: 100%;
    height: clamp(300px, 34vw, 400px);
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 20px;
}

.rd-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 16px;
}

.rd-grupo {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 22px;
}

.rd-grupo__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

.rd-grupo__nome { font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.rd-grupo__escopo { font-size: 11.5px; color: #8F88A3; }
.rd-grupo__premio { font-size: 13.5px; color: var(--pg-dark-body-2); margin-bottom: 16px; }

.rd-grupo__num {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 12px;
    white-space: nowrap;
}

.rd-grupo__restante { font-size: 24px; font-weight: 700; letter-spacing: -1px; color: #fff; }
.rd-grupo__total { font-size: 12.5px; color: #8F88A3; }

.rd-grupo__track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.rd-grupo__bar { height: 100%; border-radius: 999px; background: var(--pg-grad-light); }

/* ---------- Na operação ---------- */

.rd-operacao-band { padding: clamp(48px, 6vw, 80px) 16px clamp(8px, 1vw, 16px); }

.rd-operacao {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
}

.rd-operacao img {
    display: block;
    width: 100%;
    height: clamp(320px, 42vw, 520px);
    object-fit: cover;
}

.rd-operacao__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 16, 27, 0.88) 0%, rgba(20, 16, 27, 0.6) 46%, rgba(20, 16, 27, 0.05) 78%);
}

.rd-operacao__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: clamp(24px, 4vw, 56px);
}

.rd-operacao__content > div { max-width: 460px; }

.rd-operacao__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -1.1px;
    color: #fff;
    margin: 12px 0;
    line-height: 1.1;
}

.rd-operacao__lead {
    font-size: clamp(0.98rem, 1.3vw, 1.1rem);
    color: #CFC9DC;
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

/* ---------- Cases ---------- */

.rd-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 28px 20px;
}

.rd-case { display: flex; flex-direction: column; align-items: flex-start; }

.rd-case__bubble {
    position: relative;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    padding: 24px 22px 22px;
    box-shadow: 0 24px 48px -34px rgba(40, 10, 70, 0.3);
    margin: 0;
}

.rd-case__bubble p { font-size: 15.5px; color: var(--pg-ink-2); line-height: 1.55; margin: 0; }

.rd-case__tip {
    position: absolute;
    left: 34px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-right: 1px solid var(--pg-line);
    border-bottom: 1px solid var(--pg-line);
    transform: rotate(45deg);
}

.rd-case__author { display: flex; align-items: center; gap: 11px; margin-top: 22px; padding-left: 4px; }

.rd-case__avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}

.rd-case__name { font-size: 14px; font-weight: 700; color: var(--pg-ink); letter-spacing: -0.2px; }
.rd-case__role { font-size: 12.5px; color: var(--pg-muted); }

/* ---------- FAQ ---------- */

.rd-faq {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) 24px clamp(16px, 2vw, 28px);
}

.rd-faq__title {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 28px;
    text-align: center;
}

.rd-faq__list { display: grid; gap: 12px; }

/* ---------- CTA ---------- */

.rd-cta-band { padding: clamp(40px, 5vw, 72px) 16px clamp(52px, 6vw, 88px); }

.rd-cta {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(120deg, #8F00FF 0%, #00B8E8 100%);
    border-radius: 32px;
    padding: clamp(38px, 5vw, 64px) clamp(24px, 4vw, 56px);
    box-shadow: 0 40px 80px -34px rgba(143, 0, 255, 0.55);
}

.rd-cta__title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.1;
}

.rd-cta__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 560px;
}

.rd-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--pg-ink);
    font-size: 16.5px;
    font-weight: 500;
    padding: 15px 30px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.4);
    transition: transform .18s ease;
}

.rd-cta__btn:hover { transform: translateY(-2px); }

/* ---------- Responsivo ---------- */

@media (max-width: 640px) {
    .rd-fotos {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .rd-foto { aspect-ratio: 1 / 1; }
    .rd-foto--tall { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }

    .rd-operacao__scrim {
        background: linear-gradient(0deg, rgba(20, 16, 27, 0.92) 12%, rgba(20, 16, 27, 0.62) 60%, rgba(20, 16, 27, 0.25) 100%);
    }

    .rd-operacao__content { align-items: flex-end; }
}

/* Páginas de texto corrido (Privacidade, Termos) e página de erro 404.
   Ficam juntas por serem as duas páginas "de sistema" do site: leitura longa,
   pouca imagem, nenhuma dependência das seções de produto. */

/* ---------- Texto corrido ---------- */

.pg-prose {
    max-width: 780px;
    padding-top: clamp(88px, 10vw, 132px);
}

/* Documento legal não é hero: a .pg-h1 padrão fica desproporcional aqui. */
.pg-prose__title {
    font-size: clamp(1.7rem, 3.4vw, 2.45rem);
    margin-bottom: 14px;
}

.pg-prose .pg-lead { margin-bottom: 18px; }

.pg-prose__meta {
    font-size: 13.5px;
    color: var(--pg-muted);
    margin: 0 0 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pg-line);
}

.pg-prose__h2 {
    font-size: clamp(1.12rem, 1.7vw, 1.32rem);
    font-weight: 700;
    color: var(--pg-ink);
    letter-spacing: -0.4px;
    margin: 40px 0 12px;
    /* Compensa o header sticky quando a âncora #direitos é aberta direto. */
    scroll-margin-top: 96px;
}

.pg-prose__p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--pg-body);
    margin: 0 0 14px;
    text-wrap: pretty;
}

.pg-prose__p a {
    color: var(--pg-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pg-prose__ul {
    margin: 0 0 18px;
    padding-left: 20px;
    list-style: disc;
}

.pg-prose__ul li {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--pg-body);
    margin-bottom: 8px;
    padding-left: 4px;
}

/* ---------- 404 ---------- */

.pg-erro {
    max-width: 720px;
    text-align: center;
    padding-top: clamp(96px, 12vw, 150px);
}

.pg-erro__code {
    display: block;
    font-size: clamp(3.4rem, 9vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 10px;
}

/* A .pg-h1 padrão é dimensionada para hero de página de produto; num 404 ela
   fica maior que a mensagem merece. */
.pg-erro__title {
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    margin-bottom: 14px;
}

.pg-erro__lead {
    margin: 0 auto 36px;
    max-width: 560px;
}

.pg-erro__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
    margin-bottom: 36px;
}

.pg-erro__link {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    background: var(--pg-surface);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.pg-erro__link:hover {
    border-color: var(--pg-purple);
    transform: translateY(-2px);
}

.pg-erro__link-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--pg-ink);
    margin-bottom: 3px;
}

.pg-erro__link-desc {
    display: block;
    font-size: 13.2px;
    line-height: 1.45;
    color: var(--pg-body-2);
}

@media (max-width: 640px) {
    .pg-erro__links { grid-template-columns: 1fr; }
}

/* Ajustes responsivos que não cabem junto do componente. Carregado por
   último em css/main.php, então sobrescreve os arquivos anteriores. */

@media (max-width: 700px) {
    .pg-section,
    .pg-section--head,
    .pg-section--tight,
    .home-hero,
    .home-logos { padding-left: 20px; padding-right: 20px; }

    .pg-inner-hero { padding-left: 20px; padding-right: 20px; }

    .pg-footer__inner { padding-left: 20px; padding-right: 20px; }

    /* O visual do hero precisa de menos altura e de peças menores no
       celular, senão o telefone e o chip saem da tela. */
    .home-hero__visual,
    .pg-hero-visual { min-height: 400px; padding: 0 8px; }

    .home-hero__phone,
    .pg-hero-phone { left: 0; width: 108px; }

    .home-hero__chip,
    .pg-hero-chip { top: 0; right: 0; padding: 8px 11px; }

    .home-hero__chip-title,
    .pg-hero-chip__title { font-size: 10.5px; }

    .home-hero__chip-sub,
    .pg-hero-chip__sub { font-size: 9px; }

    .pg-grid--2 { grid-template-columns: 1fr; }

    .home-vitrine__head { flex-direction: column; align-items: flex-start; }

    .pg-panel-dark { border-radius: 24px; }
}

@media (max-width: 480px) {
    .pg-marquee__item { font-size: 18px; }

    .home-stats { gap: 22px; }

    .pg-footer__legal { flex-direction: column; gap: 14px; }
}