/* ============================================================
   Lory Lingerie · LP Revenda · v2 (polish)
   Mobile-first. Tipografia única (Poppins). Paleta preto + skin
   espelhando o tema da loja. Polish aplicado a partir do review
   conjunto de UI / UX / Web Designer.
   ============================================================ */

/* ---- Reset enxuto ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;     /* clip > hidden: preserva position:sticky no header */
}
html { overflow-x: clip; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-family: var(--font-poppins); font-weight: 700; }
p { margin: 0; }
ul, ol { padding-left: 0; margin: 0; list-style: none; }
[hidden] { display: none !important; }
/* Focus ring base — usa token light por padrão; elementos sobre fundo escuro
   sobrescrevem com box-shadow var(--focus-ring-dark) específico. */
:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring-light);
    border-radius: 4px;
}

/* ---- Container --------------------------------------------- */
.lp-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-3);
}
@media (min-width: 768px) {
    .lp-container { padding: 0 var(--space-6); }
}

/* ---- Section padding system: 3 níveis ----
   --sm: seções de respiro curto (risk, proof) — listas/cards verticais
   --md: padrão (how, why, showcase, FAQ)
   --lg: seções imersivas dark (cart-sim, channels) — pico narrativo */
.lp-section {
    padding: 64px 0;
    scroll-margin-top: var(--header-h);
}
@media (min-width: 768px) {
    .lp-section { padding: 80px 0; }
}
@media (min-width: 1024px) {
    .lp-section { padding: 96px 0; }
}
.lp-section--lg { padding: 80px 0; }
@media (min-width: 768px) {
    .lp-section--lg { padding: 112px 0; }
}
@media (min-width: 1024px) {
    .lp-section--lg { padding: 144px 0; }
}

/* Header de seção · padrão único cross-LP.
   --header-align: center (default) | left (via modifier)
   --eyebrow-rule: cor da linha decorativa do eyebrow, controlada pela section pai
                   (skin-deep em fundos light, skin em fundos dark).
   Subtítulo unifica em 56ch — medida ótica ideal pra leitura. */
.lp-section__header {
    --header-align: center;
    --eyebrow-rule: var(--skin-deep);
    text-align: var(--header-align);
    max-width: 720px;
    margin: 0 auto var(--space-8);
}
@media (min-width: 768px) { .lp-section__header { margin-bottom: var(--space-10); } }

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--space-3);
}
.lp-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--eyebrow-rule);
}

.lp-section__title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 var(--space-4);
    letter-spacing: -.6px;
    line-height: 1.15;
}
/* --lead: seções pivô (cart-sim, risk, FAQ) ganham peso tipográfico
   pra criar hierarquia entre "âncoras narrativas" e seções intermediárias. */
.lp-section__title--lead {
    font-size: clamp(34px, 5vw, 56px);
    letter-spacing: -1px;
    line-height: 1.05;
}
.lp-section__subtitle {
    font-size: 16px;
    color: var(--ink-muted);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 56ch;            /* unificado entre center e left */
}
@media (min-width: 768px) {
    .lp-section__subtitle { font-size: 17px; }
}

/* ---- Botões (alinhados com .botao-commerce / .btn-dark) ---- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 48px;
    padding: 0 28px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition-transform), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.lp-btn--lg { height: 52px; padding: 0 32px; font-size: 14px; }

/* Ícone à esquerda do texto em botões com link externo (WhatsApp, loja, Google).
   .lp-btn já é inline-flex com gap — basta dimensionar o SVG. */
.lp-btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lp-btn--lg .lp-btn__icon { width: 18px; height: 18px; }
.lp-btn--block { width: 100%; }
.lp-btn--primary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}
.lp-btn--primary:hover {
    background: var(--ink-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.lp-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.lp-btn--ghost:hover {
    background: var(--ink);
    color: var(--white);
}

/* Estados táteis e desabilitado (mobile sem hover, precisa feedback de press) */
.lp-btn:active {
    transform: translateY(0) scale(.98);
    transition-duration: .08s;
    box-shadow: none;
}
.lp-btn:disabled,
.lp-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
    box-shadow: none;
}
/* Focus ring: primary é dark → ring claro; ghost é claro → ring escuro (já default) */
.lp-btn--primary:focus-visible { box-shadow: var(--focus-ring-dark); }

/* ---- Badge ------------------------------------------------- */
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--radius-full);
}
.lp-badge--solid {
    background: var(--ink);
    color: var(--white);
}
.lp-badge--soft {
    background: var(--skin);
    color: var(--ink);
}

/* ============================================================
   .lp-card · base unificado pros 6 cards da página
   Aplicado nos elementos via classe extra: `.lp-card .lp-card--lg .lp-X__card`
   Modificadores:
     --lg     padding maior (channels, why, proof, risk)
     --link   card-link clicável (showcase), shadow-lg no hover
     --ghost  sem fundo nem borda (step), só lift no hover
     --dark   bg branco translúcido pra fundos escuros (não-usado ainda)
   ============================================================ */
.lp-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition:
        transform var(--transition-transform),
        border-color var(--transition),
        box-shadow var(--transition);
}
.lp-card:hover {
    transform: translateY(-3px);
    border-color: var(--skin-deep);
    box-shadow: var(--shadow-md);
}
.lp-card--lg    { padding: var(--space-6); }
.lp-card--link  { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.lp-card--link:hover { box-shadow: var(--shadow-lg); }
.lp-card--ghost {
    background: transparent;
    border: 0;
    padding: var(--space-5) var(--space-3) var(--space-3);
}
.lp-card--ghost:hover { box-shadow: none; border-color: transparent; }
.lp-card--dark {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}
.lp-card--dark:hover { border-color: rgba(245, 230, 211, .35); box-shadow: none; }

/* ============================================================
   HEADER
   ============================================================ */
.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), background var(--transition);
}
.lp-header.is-scrolled {
    border-bottom-color: var(--border);
    background: rgba(255, 255, 255, .95);
}
.lp-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-5);
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}
@media (max-width: 480px) {
    .lp-header__inner { padding: 0 var(--space-4); gap: var(--space-2); }
}
.lp-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--ink);
}
.lp-header__logo {
    height: 28px;
    width: auto;
    display: block;
}
@media (max-width: 480px) { .lp-header__logo { height: 24px; } }
.lp-header__brand-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-left: var(--space-3);
    margin-left: var(--space-2);
    border-left: 1px solid var(--border);
}
.lp-header__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 20px;
    background: var(--ink);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: transform var(--transition-transform), background var(--transition), color var(--transition);
}
.lp-header__cta:hover { background: var(--ink-soft); transform: translateY(-1px); }
.lp-header__cta:focus-visible { box-shadow: var(--focus-ring-dark); }
.lp-header__cta:active { transform: translateY(0) scale(.97); }
/* Ao rolar, o CTA inverte para skin: chama mais atenção sem virar barulho. */
.lp-header.is-scrolled .lp-header__cta {
    background: var(--skin);
    color: var(--ink);
}
.lp-header.is-scrolled .lp-header__cta:hover {
    background: var(--skin-deep);
}
@media (max-width: 480px) {
    .lp-header__cta { padding: 8px 12px; font-size: 11px; letter-spacing: .3px; white-space: nowrap; }
    .lp-header__brand-tag { font-size: 9px; padding-left: 8px; margin-left: 6px; }
}
@media (max-width: 380px) {
    .lp-header__brand-tag { display: none; }     /* aparta "REVENDA" em telas mini */
    .lp-header__cta { padding: 7px 10px; }
}
.lp-header__brand { min-width: 0; flex-shrink: 1; }
.lp-header__cta   { flex-shrink: 0; }

/* ============================================================
   HERO · layout assimétrico desktop, gradiente preto + moodboard
   ============================================================ */
.lp-hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--skin-soft);
    color: var(--ink);
}
/* Textura SVG noise sobre o tom de pele — sutil, não distrai */
.lp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='.9' fill='%23c9a883' opacity='.55'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 80% 30%, rgba(236, 212, 184, .55) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 90%, rgba(245, 230, 211, .55) 0%, transparent 55%);
    background-size: 28px 28px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
    opacity: 1;
}
/* Marca vertical lateral — assinatura editorial sutil */
.lp-hero__vmark {
    position: absolute;
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    letter-spacing: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-mute);
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 768px) { .lp-hero__vmark { display: none; } }

/* Logo da loja acima do badge */
.lp-hero__logo {
    display: block;
    width: auto;
    height: 38px;
    margin: var(--space-8) 0 var(--space-5);
}
@media (max-width: 1023px) {
    .lp-hero__logo { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
    .lp-hero__logo { margin-top: var(--space-6); }
}

/* Cards lego sem footer de valores: cada card mostra só ícone + frase curta. */

.lp-hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-10) var(--space-5);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
    text-align: center;
}
@media (min-width: 1024px) {
    .lp-hero__content {
        grid-template-columns: 1.3fr 1fr;
        padding: var(--space-12) var(--space-8) var(--space-12) calc(var(--space-8) * 1.4);
        text-align: left;
        gap: var(--space-8);
    }
}

.lp-hero__text { max-width: 620px; }
@media (min-width: 1024px) { .lp-hero__text { margin: 0; } }

/* ================================================================
   Hero · lego visual (3 cards: COMPRA → VENDE → LUCRA)
   Substituiu o H1 textual. Comunica a mecânica em sequência gráfica
   sem exigir leitura completa.
   ================================================================ */
.lp-hero__lego {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;   /* 3 cards + 2 setas */
    align-items: stretch;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-6);
    list-style: none;
    padding: 0;
    font: inherit;
}

.lp-hero__lego-card {
    min-width: 0;
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--skin-deep);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform var(--transition-transform),
        border-color var(--transition),
        box-shadow var(--transition);
    /* Entrada stagger */
    opacity: 0;
    transform: translateY(18px) scale(.94);
    animation: hero-lego-in .55s var(--easing-out) forwards;
}
.lp-hero__lego > .lp-hero__lego-card:nth-of-type(1) { animation-delay: .15s; }
.lp-hero__lego > .lp-hero__lego-card:nth-of-type(2) { animation-delay: .70s; }
.lp-hero__lego > .lp-hero__lego-card:nth-of-type(3) { animation-delay: 1.25s; }

.lp-hero__lego-card:hover {
    transform: translateY(-3px);
    border-color: var(--ink-warm);
    box-shadow: var(--shadow-md);
}

.lp-hero__lego-icon {
    width: 44px;
    height: 44px;
    color: var(--ink-warm);
    flex-shrink: 0;
}

.lp-hero__lego-text {
    font-size: clamp(15px, 1.7vw, 18px);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    text-wrap: balance;
}
.lp-hero__lego-text strong {
    font-weight: 700;
    color: var(--ink-warm);
}

/* Setas conectoras entre os cards */
.lp-hero__lego-arrow {
    width: 28px;
    height: 28px;
    color: var(--ink-warm);
    flex-shrink: 0;
    align-self: center;
    opacity: 0;
    animation: hero-lego-arrow-in .35s var(--easing) forwards;
}
.lp-hero__lego > .lp-hero__lego-arrow:nth-of-type(1),
.lp-hero__lego-arrow:first-of-type { animation-delay: .55s; }
/* segunda seta usa nth-of-type aproximado via sibling rule */
.lp-hero__lego > .lp-hero__lego-arrow + .lp-hero__lego-card + .lp-hero__lego-arrow {
    animation-delay: 1.10s;
}

@keyframes hero-lego-in {
    to { opacity: 1; transform: none; }
}
@keyframes hero-lego-arrow-in {
    to { opacity: 1; }
}
/* Reutilizado por stat-strip e trust list (fade + rise genérico) */
@keyframes hero-line-in {
    to { opacity: 1; transform: none; }
}
@keyframes hero-fade-in {
    to { opacity: 1; }
}

/* Mobile: cards empilham vertical, com layout horizontal interno
   (ícone à esquerda + texto à direita; footer stat full-width embaixo).
   Reduz altura significativamente vs. layout column. */
@media (max-width: 767px) {
    .lp-hero__lego {
        grid-template-columns: 1fr;     /* override do grid 5 colunas desktop */
        justify-items: center;
        gap: var(--space-2);
    }
    .lp-hero__lego-card {
        width: 100%;
        max-width: 380px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--space-4);
        text-align: left;
        padding: var(--space-4) var(--space-5);
    }
    .lp-hero__lego-icon {
        width: 38px;
        height: 38px;
        align-self: center;
    }
    .lp-hero__lego-text {
        font-size: 16px;
    }

    .lp-hero__lego-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero__lego-card,
    .lp-hero__lego-arrow,
    .lp-hero__trust {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
.lp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}
@media (max-width: 1023px) { .lp-hero__cta { justify-content: center; } }
.lp-hero__cta .lp-btn--ghost {
    background: rgba(255, 255, 255, .55);
    color: var(--ink);
    border-color: var(--ink);
    backdrop-filter: blur(4px);
}
.lp-hero__cta .lp-btn--ghost:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}
.lp-hero__trust {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    font-size: 13px;
    color: var(--ink-muted);
    /* Entra depois do 3º lego card (que termina em ~1.8s) */
    opacity: 0;
    transform: translateY(16px);
    animation: hero-line-in .7s var(--easing-out) 1.95s forwards;
}
@media (max-width: 1023px) { .lp-hero__trust { justify-content: center; } }
.lp-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.lp-hero__trust-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink-warm);
}

/* Moodboard lateral — 3 imagens sobrepostas com leve rotação.
   Sem aspect-ratio forçado e sem object-fit: cada imagem usa a
   proporção natural do arquivo (sem distorção). */
.lp-hero__visual {
    position: relative;
    height: clamp(440px, 60vw, 680px);
    display: none;
}
@media (min-width: 1024px) { .lp-hero__visual { display: block; } }
.lp-hero__visual-img {
    position: absolute;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .25);
    transition: transform var(--transition-transform);
}
/* Posições escolhidas pra cobrir bem a coluna sem deixar gaps.
   front (renda) é o card-protagonista — maior e mais à frente. */
.lp-hero__visual-img--front {
    width: 78%;
    top: 0;
    right: -4%;
    transform: rotate(3deg);
    z-index: 3;
}
.lp-hero__visual-img--back {
    width: 60%;
    bottom: -2%;
    right: 28%;
    transform: rotate(-5deg);
    z-index: 2;
}
.lp-hero__visual-img--side {
    width: 56%;
    top: 18%;
    left: -6%;
    transform: rotate(-3deg);
    z-index: 1;
    opacity: .95;
}
/* Hover sutil: cada imagem cresce um pouco e endireita levemente */
.lp-hero__visual:hover .lp-hero__visual-img--front { transform: rotate(2deg) scale(1.02); }
.lp-hero__visual:hover .lp-hero__visual-img--back  { transform: rotate(-3deg) scale(1.02); }
.lp-hero__visual:hover .lp-hero__visual-img--side  { transform: rotate(-1deg) scale(1.02); }

/* ============================================================
   1) SIMULADOR DE CARRINHO — produtos reais entrando + reveal de lucro
   ------------------------------------------------------------
   HTML:
     .lp-cartsim__stage
       .lp-cartsim__cart
         .lp-cartsim__cart-head  (counter + skip)
         .lp-cartsim__progress > .lp-cartsim__progress-fill
         .lp-cartsim__grid       (5×3 desktop / 3×3 mobile)
           .lp-cartsim__slot     (img + badge ×N)
       .lp-cartsim__panel
         [data-state="filling"]  → visivel durante anim
         [data-state="reveal"]   → catalog → cost → resale → profit → cta
   ============================================================ */
.lp-cartsim {
    background: var(--ink);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
/* Watermark de renda + glow skin (camadas: textura → radial gradient → conteúdo) */
.lp-cartsim::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url('/assets/img/bg-watermark.jpg'),
        radial-gradient(ellipse at 80% 20%, rgba(245, 230, 211, .10) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(245, 230, 211, .05) 0%, transparent 55%);
    background-size: cover, auto, auto;
    background-position: center, top right, bottom left;
    background-repeat: no-repeat;
    opacity: .12;
    mix-blend-mode: screen;
    pointer-events: none;
}
.lp-cartsim::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(245, 230, 211, .08) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 90%, rgba(236, 212, 184, .04) 0%, transparent 55%);
    pointer-events: none;
}
.lp-cartsim .lp-section__header { --eyebrow-rule: var(--skin); }
.lp-cartsim .lp-section__title { color: var(--white); }
.lp-cartsim .lp-section__subtitle { color: rgba(255, 255, 255, .75); }
.lp-cartsim .lp-eyebrow { color: var(--skin); }
.lp-cartsim .lp-container { position: relative; z-index: 1; }

/* --- Stage (carrinho + painel) --- */
.lp-cartsim__stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 1024px) {
    .lp-cartsim__stage {
        grid-template-columns: 1.45fr 1fr;
        padding: var(--space-8);
        gap: var(--space-8);
    }
}

/* --- Carrinho (lado esquerdo) --- */
.lp-cartsim__cart {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.lp-cartsim__cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.lp-cartsim__counter {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: rgba(255, 255, 255, .55);
}
.lp-cartsim__counter strong {
    font-size: clamp(40px, 7vw, 64px);
    font-weight: 700;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    letter-spacing: -1.5px;
    line-height: 1;
    transition: transform .15s var(--easing-out), color .25s var(--easing);
}
.lp-cartsim__counter strong.is-pulse {
    transform: scale(1.15);
    color: var(--skin);
}
.lp-cartsim__counter-target {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .72);
}
.lp-cartsim__progress {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, .12);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.lp-cartsim__progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--skin-deep), var(--skin));
    border-radius: var(--radius-full);
    transition: width .35s var(--easing);
}

/* --- Grid de slots --- */
.lp-cartsim__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* mobile padrão */
    gap: var(--space-2);
    min-height: 180px;
    align-content: start;
}
@media (min-width: 768px) {
    .lp-cartsim__grid { grid-template-columns: repeat(5, 1fr); } /* desktop 5×3 */
}

/* Slot individual */
.lp-cartsim__slot {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    opacity: 0;
    transform: scale(.7) translateY(12px);
    transition: opacity .35s var(--easing-out), transform .45s var(--easing-out);
}
.lp-cartsim__slot.is-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.lp-cartsim__slot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .8s var(--easing-out);
}
.lp-cartsim__slot.is-in .lp-cartsim__slot-img {
    transform: scale(1.04);
}
.lp-cartsim__slot-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--skin-deep) 0%, var(--skin) 60%, rgba(245, 230, 211, .6) 100%);
}
.lp-cartsim__slot-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, .08) 50%, transparent 55%);
}

/* Badge de quantidade ×N */
.lp-cartsim__slot-qty {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--skin);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Selo "AO VIVO" durante a animação de filling */
.lp-cartsim__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--skin);
    padding: 4px 10px;
    border: 1px solid rgba(245, 230, 211, .35);
    border-radius: var(--radius-full);
    background: rgba(245, 230, 211, .08);
}
.lp-cartsim__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;   /* vermelho ao vivo */
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .7);
    animation: cartsim-live-pulse 1.5s ease-out infinite;
}
@keyframes cartsim-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-cartsim__live-dot { animation: none; }
}

/* Skip button */
.lp-cartsim__skip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .55);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.lp-cartsim__skip:hover {
    color: var(--skin);
    border-color: var(--skin);
}
.lp-cartsim__skip:focus-visible { box-shadow: var(--focus-ring-dark); border-color: var(--skin); }
.lp-cartsim__skip:active { transform: scale(.97); }

/* --- Painel (lado direito) --- */
.lp-cartsim__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(245, 230, 211, .06) 0%, rgba(245, 230, 211, .02) 100%);
    border: 1px solid rgba(245, 230, 211, .12);
    border-radius: var(--radius-xl);
}

/* Eyebrow do painel (texto trocado pelo JS: "Montando..." → "Pedido fechado...") */
.lp-cartsim__state--reveal .lp-cartsim__state-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--skin);
    margin-bottom: var(--space-4);
    transition: opacity .3s var(--easing);
}

/* --- Linhas do reveal (catalog/cost/resale/profit) --- */
.lp-cartsim__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);

    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s var(--easing), transform .4s var(--easing-out);
}
.lp-cartsim__line:first-of-type { border-top: 0; padding-top: 0; }
.lp-cartsim__line.is-visible {
    opacity: 1;
    transform: none;
}
.lp-cartsim__line-label {
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
    letter-spacing: .3px;
    line-height: 1.4;
    flex: 0 1 auto;
}
.lp-cartsim__line-amount {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    white-space: nowrap;
    position: relative;
}

/* Variação: preço cheio com risco animado (entra junto com a linha cost) */
.lp-cartsim__line-amount--strike {
    color: rgba(255, 255, 255, .45);
}
.lp-cartsim__line-amount--strike::after {
    content: '';
    position: absolute;
    left: -2px;
    right: 100%;
    top: 52%;
    height: 2px;
    background: var(--skin);
    border-radius: 1px;
    transition: right .55s var(--easing-out) .35s;
}
/* Risco só dispara quando o JS adiciona .is-struck (gatilho: cost virou visível) */
.lp-cartsim__line.is-struck .lp-cartsim__line-amount--strike::after {
    right: -2px;
}

/* Cost destaque */
.lp-cartsim__line-amount--highlight {
    color: var(--skin);
    font-size: 22px;
    font-weight: 700;
}

/* Profit gigante */
.lp-cartsim__line--profit {
    margin-top: var(--space-3);
    padding: var(--space-4) 0 var(--space-2);
    border-top: 1px solid rgba(245, 230, 211, .22);
    align-items: flex-end;
}
.lp-cartsim__line--profit .lp-cartsim__line-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--skin);
    font-weight: 600;
}
.lp-cartsim__line-amount--big {
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 700;
    color: var(--skin);
    letter-spacing: -1.5px;
    line-height: 1;
}

/* Ações */
.lp-cartsim__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-5);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s var(--easing), transform .4s var(--easing-out);
}
.lp-cartsim__actions.is-visible {
    opacity: 1;
    transform: none;
}
.lp-cartsim__replay {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .75);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    align-self: center;
    padding: var(--space-2) 0;
    transition: color var(--transition);
}
.lp-cartsim__replay:hover { color: var(--skin); text-decoration: underline; }
.lp-cartsim__replay:focus-visible { box-shadow: var(--focus-ring-dark); border-radius: var(--radius-sm); }

/* Caption sob o stage */
.lp-cartsim__caption {
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
    text-align: center;
    margin-top: var(--space-5);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.lp-cartsim__caption strong { color: var(--skin); }

/* Reduce motion: sem transições, sem strike animado */
@media (prefers-reduced-motion: reduce) {
    .lp-cartsim__slot,
    .lp-cartsim__line,
    .lp-cartsim__actions,
    .lp-cartsim__slot-img,
    .lp-cartsim__line-amount--strike::after {
        transition: none !important;
        animation: none !important;
    }
    .lp-cartsim__line-amount--strike::after {
        right: 0;
    }
}

/* ============================================================
   3) COMO FUNCIONA — cards transparentes + linha conectora
   ============================================================ */
.lp-how { background: var(--skin-soft); position: relative; }
.lp-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    position: relative;
}
@media (min-width: 768px) {
    .lp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
    .lp-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
    /* Linha pontilhada conectando os 4 steps em desktop · cresce conforme is-revealed */
    .lp-steps::before {
        content: '';
        position: absolute;
        top: 64px;
        left: 12%;
        right: 88%;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--skin-deep) 0 8px, transparent 8px 16px);
        z-index: 0;
        transition: right 1.6s var(--easing-out);
    }
    .lp-steps.is-revealed::before {
        right: 12%;
    }
}
/* .lp-step herda .lp-card .lp-card--ghost — só posicionamento aqui */
.lp-step {
    position: relative;
    z-index: 1;
}
/* override: lift -3px é o padrão; aqui usamos o do --ghost (que vem do .lp-card base) */

/* Timeline animation: cards aparecem em sequência quando .lp-steps entra no viewport */
.lp-steps .lp-step {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s var(--easing-out),
                transform .55s var(--easing-out);
}
.lp-steps.is-revealed .lp-step {
    opacity: 1;
    transform: none;
}
.lp-steps.is-revealed .lp-step:nth-child(1) { transition-delay: .05s; }
.lp-steps.is-revealed .lp-step:nth-child(2) { transition-delay: .30s; }
.lp-steps.is-revealed .lp-step:nth-child(3) { transition-delay: .55s; }
.lp-steps.is-revealed .lp-step:nth-child(4) { transition-delay: .80s; }
@media (prefers-reduced-motion: reduce) {
    .lp-steps .lp-step { opacity: 1; transform: none; transition: none; }
    .lp-steps::before { right: 12% !important; transition: none; }
}
.lp-step__num {
    display: inline-block;
    font-size: clamp(64px, 8vw, 88px);
    font-weight: 700;
    line-height: 1;
    color: var(--skin-deep);
    letter-spacing: -2px;
    margin-bottom: var(--space-3);
    background: var(--skin-soft);   /* tampa a linha conectora atrás */
    padding-right: var(--space-3);
}
@media (min-width: 1024px) { .lp-step__num { background: var(--skin-soft); } }
.lp-step__title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--ink);
    line-height: 1.3;
}
.lp-step__text {
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================================
   4) COMO VOCÊ VENDE (canais)
   ------------------------------------------------------------
   (Simulador multi-perfil removido — substituído pelo cart-sim)
   ============================================================ */
.lp-channels {
    background: var(--ink);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.lp-channels::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(245, 230, 211, .08) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(236, 212, 184, .05) 0%, transparent 55%);
    pointer-events: none;
}
.lp-channels > .lp-container { position: relative; z-index: 1; }
.lp-channels .lp-section__header { --eyebrow-rule: var(--skin); }
.lp-channels .lp-section__title { color: var(--white); }
.lp-channels .lp-section__subtitle { color: rgba(255, 255, 255, .75); }
.lp-channels .lp-eyebrow { color: var(--skin); }

/* Layout: header full-width no topo, mockup (5/12) + cards (7/12) abaixo */
.lp-channels__inner {
    display: grid;
    grid-template-columns: 1fr;             /* mobile: 12/12 stack */
    gap: var(--space-8);
    align-items: center;
    margin-top: var(--space-8);
}
@media (min-width: 1024px) {
    .lp-channels__inner {
        grid-template-columns: 5fr 7fr;     /* desktop: 5/12 + 7/12 */
        gap: var(--space-8);
        align-items: center;                /* mockup centralizado vertical com cards */
    }
}

.lp-channels__visual {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lp-channels__mockup {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .15));
}
@media (min-width: 1024px) {
    .lp-channels__mockup { max-width: 100%; }
}

/* Cards um abaixo do outro (1 coluna sempre) */
.lp-channels__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
/* .lp-channels__card herda visual do .lp-card .lp-card--lg — aqui só conteúdo interno */
.lp-channels__card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.lp-channels__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--skin-soft);
    border: 1px solid var(--skin-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
}
.lp-channels__card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}
.lp-channels__card p {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.6;
}
.lp-channels__card p strong {
    color: var(--ink);
    font-weight: 600;
}

/* ============================================================
   6) POR QUE LORY · 6 cards
   ============================================================ */
.lp-why { background: var(--white); }

/* Swiper marquee · fade nas bordas, slide com largura fixa */
.lp-why__swiper {
    margin-top: var(--space-6);
    overflow: hidden;
    padding: var(--space-3) 0;
    /* Mask gradient pra fadeout sutil nas bordas */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black 48px,
        black calc(100% - 48px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        black 48px,
        black calc(100% - 48px),
        transparent 100%
    );
}
.lp-why__swiper .swiper-wrapper {
    /* linear timing pro marquee parecer fluido (Swiper aplica via JS, mas
       reforça aqui em transições internas) */
    transition-timing-function: linear !important;
}
/* .lp-why__item herda .lp-card .lp-card--lg — aqui width fixo pro Swiper + text-align */
.lp-why__item {
    width: 280px;
    min-height: 200px;
    flex-shrink: 0;
    box-sizing: border-box;
    text-align: center;
    padding: var(--space-6) var(--space-5); /* override do --lg (mais alto que largo) */
}
@media (min-width: 768px) {
    .lp-why__item { width: 320px; }
}
.lp-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--skin-soft);
    border: 1px solid var(--skin-deep);
    color: var(--ink);
    margin-bottom: var(--space-4);
}
.lp-why__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.lp-why__item h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--ink);
    line-height: 1.3;
}
.lp-why__item p {
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================================
   7) VITRINE DE CAMPEÃS — carrossel Swiper com produtos reais
   ============================================================ */
.lp-showcase { background: var(--skin-soft); }

.lp-showcase__swiper {
    margin-top: var(--space-6);
    padding: var(--space-2) var(--space-1) var(--space-6);
    position: relative;
    overflow: hidden;
}
.lp-showcase__swiper .swiper-wrapper { align-items: stretch; }

/* .lp-showcase__card herda .lp-card .lp-card--link — aqui só ajuste do padding pra imagem ir até a borda */
.lp-showcase__card {
    overflow: hidden;
    height: auto;
    padding: 0;
}
.lp-showcase__card-img {
    margin: 0;
    aspect-ratio: 3 / 4;
    background: var(--skin-soft);
    position: relative;
    overflow: hidden;
}
.lp-showcase__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .5s var(--easing-out);
}
.lp-showcase__card:hover .lp-showcase__card-img img {
    transform: scale(1.04);
}
.lp-showcase__card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ink);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.2;
}
.lp-showcase__card-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
}
.lp-showcase__card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.35;
    /* clamp em 2 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}
.lp-showcase__card-old {
    font-size: 12px;
    color: var(--ink-mute);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.lp-showcase__card-resale {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-showcase__card-resale small {
    font-size: 10px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
}
.lp-showcase__card-resale strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

/* Navegação Swiper */
.lp-showcase__nav.swiper-button-prev,
.lp-showcase__nav.swiper-button-next {
    width: 40px;
    height: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    margin-top: -20px;
    transition: background var(--transition), border-color var(--transition);
}
.lp-showcase__nav.swiper-button-prev::after,
.lp-showcase__nav.swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}
.lp-showcase__nav.swiper-button-prev:hover,
.lp-showcase__nav.swiper-button-next:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}
.lp-showcase__nav.swiper-button-prev { left: 0; }
.lp-showcase__nav.swiper-button-next { right: 0; }
@media (max-width: 767px) {
    .lp-showcase__nav { display: none; } /* mobile: usa swipe gesture */
}

/* Disclaimer abaixo do carrossel */
.lp-showcase__disclaimer {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
    text-align: center;
    margin: var(--space-4) 0 var(--space-6);
}
.lp-showcase__disclaimer a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lp-showcase__disclaimer a:hover {
    color: #128c7e;
}

/* CTA inferior */
.lp-showcase__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

/* ============================================================
   8) REVERSÃO DE RISCO — pseudo "?" decorativo
   ============================================================ */
/* Plano C — off-white com micro-grão de papel (Brand) */
.lp-risk {
    background-color: var(--white-warm);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='.65' fill='%23c9a883' opacity='.4'/%3E%3C/svg%3E");
    background-size: 22px 22px;
}
.lp-risk__inner { max-width: var(--container-narrow); }
.lp-risk__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* .lp-risk__item herda .lp-card .lp-card--lg — aqui só layout grid + pseudo "?" decorativo */
.lp-risk__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    padding: var(--space-5); /* override do --lg: leve menor em mobile */
}
.lp-risk__item::before {
    content: '?';
    position: absolute;
    top: -8px;
    right: 12px;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--skin-deep);
    opacity: .35;
    pointer-events: none;
}
@media (min-width: 768px) {
    .lp-risk__item {
        grid-template-columns: 1fr 1.4fr;
        gap: var(--space-5);
        padding: var(--space-6);
    }
    .lp-risk__item::before {
        font-size: 120px;
        top: -16px;
        right: 24px;
    }
}
.lp-risk__fear {
    position: relative;
    z-index: 1;
}
.lp-risk__fear strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}
.lp-risk__fear span {
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.5;
}
.lp-risk__answer {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.6;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .lp-risk__answer {
        padding-top: 0;
        padding-left: var(--space-5);
        border-top: 0;
        border-left: 2px solid var(--skin-deep);
    }
}
.lp-risk__answer strong {
    color: var(--ink);
    font-weight: 600;
}

/* ============================================================
   9) PROVA SOCIAL — carrossel de avaliações Google
   ============================================================ */
.lp-proof { background: var(--skin-soft); }

.lp-proof__swiper {
    margin-top: var(--space-6);
    padding: var(--space-2) var(--space-1) var(--space-6);
    position: relative;
    overflow: hidden;
}
.lp-proof__swiper .swiper-wrapper { align-items: stretch; }

/* .lp-proof__card herda .lp-card .lp-card--lg — aqui só layout interno */
.lp-proof__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: auto;
    box-shadow: var(--shadow-sm);   /* override: começa com sombra leve */
    position: relative;
    overflow: hidden;               /* contém aspas decorativas */
}
/* Aspas " gigante decorativa no fundo do card */
.lp-proof__card::before {
    content: '\201C';                /* " unicode */
    position: absolute;
    top: -28px;
    right: -8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 180px;
    font-weight: 700;
    line-height: 1;
    color: var(--skin-deep);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.lp-proof__card > * { position: relative; z-index: 1; }

/* Header do card: avatar + nome+estrelas + selo Google */
.lp-proof__card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.lp-proof__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--skin-soft) 0%, var(--skin-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    flex-shrink: 0;
}
.lp-proof__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.lp-proof__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-proof__stars {
    color: #fbbc04;          /* amarelo Google rating */
    font-size: 18px;
    letter-spacing: 1.5px;
    line-height: 1;
}
/* Logo Google SVG colorido inline — sem container, só o ícone */
.lp-proof__source {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.lp-proof__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    font-weight: 400;
    text-align: center;             /* solicitado */
    padding: 0 var(--space-2);
    quotes: '\201C' '\201D';
}
.lp-proof__text::before { content: open-quote; color: var(--skin-deep); margin-right: 2px; }
.lp-proof__text::after  { content: close-quote; color: var(--skin-deep); margin-left: 2px; }

.lp-proof__date {
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: auto;
    font-style: italic;             /* solicitado */
}

/* Paginação Swiper · dots em vez de setas (não conflita com texto do card) */
.lp-proof__swiper .swiper-pagination {
    position: relative;
    margin-top: var(--space-5);
    bottom: auto;
}
.lp-proof__swiper .swiper-pagination-bullet {
    background: var(--ink);
    opacity: .25;
    width: 8px;
    height: 8px;
    transition: opacity .2s, width .25s var(--easing);
}
.lp-proof__swiper .swiper-pagination-bullet:hover { opacity: .55; }
.lp-proof__swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: var(--radius-full);
}
.lp-proof__swiper .swiper-pagination-bullet:focus-visible {
    box-shadow: var(--focus-ring-light);
}

.lp-proof__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

/* ============================================================
   10) FAQ + CTA fundidos
   ============================================================ */
/* Plano C — mesmo papel sutil do risk */
.lp-close {
    background-color: var(--white-warm);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='.65' fill='%23c9a883' opacity='.4'/%3E%3C/svg%3E");
    background-size: 22px 22px;
}
.lp-close__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 1024px) {
    .lp-close__grid {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--space-10);
        align-items: start;
    }
}
@media (max-width: 480px) {
    .lp-close__grid {
        display: block;
    }
}
.lp-section__header--left {
    --header-align: left;
    margin-inline: 0;
}
.lp-section__header--left .lp-section__subtitle { margin-inline: 0; }

.lp-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.lp-faq__item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
}
.lp-faq__item:hover { border-color: var(--skin-deep); }
.lp-faq__item details summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    user-select: none;
}
.lp-faq__item details summary::-webkit-details-marker { display: none; }
.lp-faq__item details summary::after {
    content: '+';
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
    color: var(--ink);
    flex-shrink: 0;
    transition: transform var(--transition), color var(--transition);
}
.lp-faq__item details[open] summary {
    color: var(--ink);
}
.lp-faq__item details[open] summary::after {
    content: '\2013';
    color: var(--ink);
}
.lp-faq__item details[open] {
    background: var(--skin-soft);
}
.lp-faq__item details p {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.7;
}

.lp-close__cta {
    background: var(--ink);
    color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 1024px) {
    .lp-close__cta {
        padding: var(--space-8);
        position: sticky;
        top: calc(var(--header-h) + var(--space-5));
    }
}




.lp-close__cta-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}
.lp-close__cta-text {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.6;
    margin: 0 0 var(--space-5);
}
.lp-close__cta .lp-btn--primary {
    background: var(--skin);
    color: var(--ink);
    border-color: var(--skin);
    margin-bottom: var(--space-2);
}
.lp-close__cta .lp-btn--primary:hover {
    background: var(--skin-deep);
    border-color: var(--skin-deep);
}
.lp-close__cta .lp-btn--ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, .25);
}
.lp-close__cta .lp-btn--ghost:hover {
    background: var(--white);
    color: var(--ink);
    border-color: var(--white);
}

/* ============================================================
   FOOTER
   ============================================================ */
.lp-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    padding: var(--space-8) 0 var(--space-6);
    font-size: 13px;
}
.lp-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .lp-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: var(--space-5);
    }
}
.lp-footer__brand { color: rgba(255, 255, 255, .85); margin: 0; }
.lp-footer__nav {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
}
.lp-footer__nav a {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    transition: color var(--transition);
}
.lp-footer__nav a:hover { color: var(--skin); }
.lp-footer__nav a:focus-visible { box-shadow: var(--focus-ring-dark); border-radius: 2px; }
.lp-footer__cta {
    color: var(--skin);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--skin);
    padding-bottom: 1px;
    transition: opacity var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.lp-footer__cta:hover { opacity: .8; }

/* Assinatura · "Feito com ♥ por CW WebCorporation®" */
.lp-footer__signature {
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-5) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    max-width: var(--container);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.lp-footer__signature a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed rgba(255, 255, 255, .25);
    padding-bottom: 1px;
    transition: color var(--transition), border-color var(--transition);
}
.lp-footer__signature a:hover {
    color: var(--skin);
    border-bottom-color: var(--skin);
}
.lp-footer__signature a:focus-visible {
    box-shadow: var(--focus-ring-dark);
    border-radius: 2px;
}
.lp-footer__heart {
    color: #e63946;            /* vermelho coração */
    display: inline-block;
    transform-origin: center;
    animation: heart-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes heart-pulse {
    0%, 100% { transform: scale(1);    }
    20%      { transform: scale(1.25); }
    40%      { transform: scale(.95);  }
    60%      { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-footer__heart { animation: none; }
}

/* ============================================================
   STICKY CTA mobile
   ============================================================ */
.lp-sticky-cta {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 52px;
    padding: 0 24px;
    background: var(--ink);
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(80px);
    transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.lp-sticky-cta::before {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.lp-sticky-cta:hover { background: var(--ink-soft); }
.lp-sticky-cta:focus-visible { box-shadow: 0 8px 24px rgba(0, 0, 0, .25), var(--focus-ring-dark); }
.lp-sticky-cta:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
@media (max-width: 767px) {
    .lp-sticky-cta { display: inline-flex; }
    .lp-sticky-cta.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    body { padding-bottom: 80px; }
}

/* ============================================================
   FAB WhatsApp · flutuante canto inferior direito, pulse anim
   ============================================================ */
.lp-fab-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(37, 211, 102, .35),
                0 2px 6px rgba(0, 0, 0, .15);
    z-index: 95;
    transition: transform .2s var(--easing-out), box-shadow var(--transition);
}
.lp-fab-wa:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 30px rgba(37, 211, 102, .55),
                0 2px 6px rgba(0, 0, 0, .15);
}
.lp-fab-wa:focus-visible {
    transform: scale(1.08);
    /* Ring duplo claro sobre verde — WCAG visible */
    box-shadow:
        0 8px 30px rgba(37, 211, 102, .55),
        0 0 0 3px var(--white),
        0 0 0 6px rgba(37, 211, 102, .9);
}
.lp-fab-wa:active { transform: scale(.95); transition-duration: .08s; }
.lp-fab-wa__icon { position: relative; z-index: 2; }
.lp-fab-wa__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    z-index: 1;
    animation: fab-pulse 2s ease-out infinite;
    pointer-events: none;
}
.lp-fab-wa__pulse--delayed { animation-delay: 1s; }

@keyframes fab-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    80%  { opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Mobile: sticky CTA bar ocupa o bottom — joga FAB pra cima */
@media (max-width: 767px) {
    .lp-fab-wa {
        bottom: 84px;
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-fab-wa__pulse { animation: none; opacity: 0; }
}

/* ============================================================
   Animações de entrada (reveal-on-scroll)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .lp-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .6s var(--easing), transform .6s var(--easing);
    }
    .lp-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}