/* ============================================================
   LANDING PAGE (.lp / .lpx-*), carregado só em templates/landing.html.

   Hero e CTA final são faixas escuras de ponta a ponta (combinam com as
   telas reais do app, que são escuras); o resto segue o tema do site.
   --lpx-accent: verde da marca com contraste AA no tema (green-700 no claro,
   green-400 no escuro). Dentro das faixas escuras é sempre green-400.
   ============================================================ */

html, body { overflow-x: clip; }

.lp {
    --lpx-accent: #15803d;
    --lpx-green: #16a34a;
    --lpx-dark: #060d18;
    --lpx-display: "Bricolage Grotesque", system-ui, sans-serif;
    color: var(--text);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp { --lpx-accent: #4ade80; }
}
:root[data-theme="dark"] .lp { --lpx-accent: #4ade80; }

/* Faixa de ponta a ponta saindo do .container do base.html */
.lpx-band {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1rem, calc(50vw - 29rem)); /* alinha com a topbar (.container 960px) */
}

/* -------- Hero -------- */
.lpx-hero {
    margin-top: -1rem; /* encosta na topbar (main.container tem padding-top) */
    padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(3rem, 7vw, 5rem);
    color: #e8eef7;
    background:
        radial-gradient(ellipse 60% 55% at 78% 30%, rgba(34, 197, 94, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(59, 130, 246, 0.12), transparent 70%),
        linear-gradient(180deg, #0a1628 0%, var(--lpx-dark) 100%);
    overflow: hidden;
}
.lpx-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    text-align: center;
}
@media (min-width: 900px) {
    .lpx-hero-grid { grid-template-columns: 1.1fr 0.9fr; text-align: left; }
}
.lpx-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.35);
    background: rgba(74, 222, 128, 0.08);
    color: #86efac;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.lpx-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: lpxPing 2.2s ease-out infinite;
}
.lpx-hero-title {
    font-family: var(--lpx-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 6.4vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0 0 1.4rem;
    color: #fff;
    text-wrap: balance;
}
.lpx-accent { color: #4ade80; }
.lpx-dot {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.07em;
    border-radius: 50%;
    background: var(--lpx-green);
}
.lpx-hero-sub {
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    line-height: 1.6;
    color: #a9b6c8;
    max-width: 34rem;
    margin: 0 auto 2.25rem;
}
@media (min-width: 900px) { .lpx-hero-sub { margin-left: 0; } }
.lpx-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}
@media (min-width: 900px) { .lpx-hero .lpx-hero-cta { justify-content: flex-start; } }
.lpx-hero-note {
    margin: 1.25rem 0 0;
    font-size: 0.84rem;
    color: #8292a8;
}

/* Botão da App Store (preto, padrão Apple) */
.lpx-store {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 3.4rem;
    padding: 0 1.35rem 0 1.1rem;
    border-radius: 0.8rem;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lpx-store:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
}
.lpx-store svg { width: 1.55rem; height: 1.55rem; margin-top: -0.15rem; }
.lpx-store-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.lpx-store-text small { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.01em; }
.lpx-store-text strong { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }

.lpx-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.4rem;
    padding: 0 1.4rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e8eef7;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.lpx-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); }
.lpx-btn-ghost svg { width: 1.05rem; height: 1.05rem; transition: transform 0.25s ease; }
.lpx-btn-ghost:hover svg { transform: translateX(3px); }

/* Telefones com telas reais */
.lpx-phone {
    margin: 0;
    padding: 0.5rem;
    border-radius: 2.6rem;
    background: #0b0f17;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 40px 80px -30px rgba(0, 0, 0, 0.75),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lpx-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2.1rem;
}
.lpx-hero-visual {
    position: relative;
    width: min(100%, 25rem);
    margin: 0 auto;
    aspect-ratio: 1 / 1.25;
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lpx-glow {
    position: absolute;
    inset: 15% 10%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.35), transparent 65%);
    filter: blur(30px);
}
.lpx-phone-front,
.lpx-phone-back { position: absolute; width: 58%; }
.lpx-phone-front {
    right: 6%;
    top: 0;
    animation: lpxFloat 7s ease-in-out infinite;
}
.lpx-phone-back {
    left: 4%;
    top: 9%;
    transform: rotate(-7deg);
    opacity: 0.75;
    filter: saturate(0.9);
}

/* -------- Faixa de fatos -------- */
.lpx-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    max-width: 60rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--border);
    overflow: hidden;
}
/* 5 destaques: 2 colunas no celular (o último ocupa a linha), 3 no tablet, 5 no desktop */
.lpx-fact:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .lpx-facts { grid-template-columns: repeat(3, 1fr); } .lpx-fact:last-child { grid-column: auto; } .lpx-fact:nth-child(4) { grid-column: span 2; } }
@media (min-width: 980px) {
    .lpx-facts { grid-template-columns: repeat(5, 1fr); max-width: 68rem; }
    .lpx-fact:nth-child(4) { grid-column: auto; }
    .lpx-fact { padding: 1.1rem 0.7rem; }
    .lpx-fact strong { font-size: 0.95rem; white-space: nowrap; }
}
.lpx-fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-card);
    text-align: center;
}
.lpx-fact strong { font-size: 1rem; color: var(--text); }
.lpx-fact span { font-size: 0.82rem; color: var(--text-muted); }

/* -------- Seções -------- */
.lpx-section { max-width: 62rem; margin: 0 auto; padding: clamp(4rem, 9vw, 6.5rem) 0 0; }
.lpx-section-tight { padding-top: clamp(3rem, 7vw, 5rem); }
.lpx-eyebrow {
    text-align: center;
    margin: 0 0 0.9rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lpx-accent);
}
.lpx-title {
    font-family: var(--lpx-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 4.2vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-align: center;
    margin: 0 0 3rem;
    text-wrap: balance;
}
.lpx-title-sm { font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 36rem; margin-inline: auto; }
.lpx-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.04rem;
    margin: -2rem auto 2.5rem;
    max-width: 32rem;
}

/* Vitrines: telefone + texto, alternando os lados */
.lpx-show {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem 0;
}
@media (min-width: 860px) {
    .lpx-show { grid-template-columns: 0.8fr 1fr; gap: 4.5rem; padding: 2.5rem 0; }
    .lpx-show.is-flip .lpx-show-media { order: 2; }
}
.lpx-show-media { position: relative; width: min(17rem, 72vw); margin: 0 auto; }
.lpx-show-phone { transform: translateY(var(--py, 0px)); transition: transform 0.2s linear; }
.lpx-show-copy { max-width: 30rem; margin: 0 auto; }
.lpx-show-kicker {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lpx-accent);
}
.lpx-show-copy h3 {
    font-family: var(--lpx-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3.2vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.9rem;
}
.lpx-show-copy > p { color: var(--text-muted); line-height: 1.65; margin: 0 0 1.25rem; font-size: 1.02rem; }
.lpx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.lpx-checks li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
}
.lpx-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lpx-green) 16%, transparent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* Cards de recursos */
.lpx-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 620px) { .lpx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lpx-grid { grid-template-columns: repeat(3, 1fr); } }
.lpx-card {
    padding: 1.4rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.lpx-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lpx-accent) 55%, var(--border)); }
.lpx-card-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    margin-bottom: 0.9rem;
    color: var(--lpx-accent);
    background: color-mix(in srgb, var(--lpx-green) 13%, transparent);
}
.lpx-card-icon svg { width: 1.25rem; height: 1.25rem; }
.lpx-card h3 { font-size: 1.04rem; margin: 0 0 0.35rem; }
.lpx-card p { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* Passos */
.lpx-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    counter-reset: none;
}
@media (min-width: 760px) { .lpx-steps { grid-template-columns: repeat(3, 1fr); } }
.lpx-steps li {
    padding: 1.4rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.lpx-step-num {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin-bottom: 0.9rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    background: var(--lpx-green);
}
.lpx-steps h3 { font-size: 1.04rem; margin: 0 0 0.35rem; }
.lpx-steps p { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* Planos */
.lpx-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 44rem;
    margin: 0 auto;
}
@media (min-width: 680px) { .lpx-plans { grid-template-columns: 1fr 1fr; } }
.lpx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.lpx-plan.is-highlight {
    border: 1.5px solid var(--lpx-green);
    box-shadow: 0 20px 50px -28px rgba(22, 163, 74, 0.55);
}
.lpx-plan-badge {
    position: absolute;
    top: -0.75rem;
    right: 1.25rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--lpx-green);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.lpx-plan-name { margin: 0 0 0.5rem; font-weight: 600; color: var(--text-muted); }
.lpx-plan-price {
    margin: 0 0 0.6rem;
    font-family: var(--lpx-display);
    font-weight: 500;
    font-size: 2.2rem;
    letter-spacing: -0.02em;
}
.lpx-plan-price span { font-family: inherit; font-size: 1rem; color: var(--text-muted); margin-left: 0.2rem; }
.lpx-plan-byline { margin: 0 0 1.5rem; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; flex: 1; }
.lpx-plan-cta {
    display: block;
    text-align: center;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    background: #15803d;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.lpx-plan-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lpx-plan-cta.is-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.lpx-plans-note {
    max-width: 36rem;
    margin: 1.75rem auto 0;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* FAQ */
.lpx-faq { max-width: 44rem; margin: 0 auto; display: grid; gap: 0.6rem; }
.lpx-faq details {
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--bg-card);
    padding: 0 1.25rem;
}
.lpx-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 2rem 1.1rem 0;
    font-weight: 600;
    position: relative;
}
.lpx-faq summary::-webkit-details-marker { display: none; }
.lpx-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.lpx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lpx-faq details > div { padding: 0 0 1.15rem; color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; }

/* -------- CTA final -------- */
.lpx-final {
    margin-top: clamp(4rem, 9vw, 6.5rem);
    margin-bottom: -2rem; /* encosta no rodapé (main.container tem padding-bottom) */
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
    color: #e8eef7;
    background:
        radial-gradient(ellipse 55% 70% at 85% 50%, rgba(34, 197, 94, 0.2), transparent 70%),
        linear-gradient(180deg, #0a1628 0%, var(--lpx-dark) 100%);
}
.lpx-final-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    text-align: center;
}
@media (min-width: 820px) {
    .lpx-final-inner { grid-template-columns: 1fr auto; text-align: left; }
    .lpx-final .lpx-hero-cta { justify-content: flex-start; }
}
.lpx-final h2 {
    font-family: var(--lpx-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 0 0 0.75rem;
    color: #fff;
    text-wrap: balance;
}
.lpx-final-copy > p { color: #a9b6c8; margin: 0 0 1.75rem; }

/* Selo "Android em breve" ao lado dos botões */
.lpx-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.1rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: #a9b6c8;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.lpx-soon svg { width: 1rem; height: 1rem; color: #4ade80; }
.lpx-hero-soon { margin: 0.9rem 0 0; }
.lpx-final-copy .lpx-final-login { margin: 1.25rem 0 0; font-size: 0.9rem; color: #8292a8; }
.lpx-final-login a { color: #86efac; font-weight: 600; }
/* QR só faz sentido no computador: no celular o botão já resolve */
.lpx-qr {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1rem 0.85rem;
    border-radius: 1.1rem;
    background: #fff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.lpx-qr img { width: 8.25rem; height: 8.25rem; display: block; }
@media (min-width: 820px) and (hover: hover) { .lpx-qr { display: flex; } }

/* -------- Reveal-on-scroll (o app.js adiciona .lp-js e .is-visible) -------- */
.lp-js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
}
.lp-js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

@keyframes lpxFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes lpxPing {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    80%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}


/* ============================================================
   MOTION (v2): título palavra a palavra, tela viva, cartões flutuantes,
   faixa de recursos, cartões das vitrines, passos e acabamentos.
   Animações de "aparecer" só rodam com .is-in (static/landing.js).
   ============================================================ */

/* Título: cada palavra sobe e entra em foco */
.lpx-hero-title .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(10px);
    animation: lpxWord 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(120ms + var(--w, 0) * 70ms);
}
.lpx-hero-title .lpx-dot.w { transform: translateY(0.45em) scale(0.4); }
@keyframes lpxWord { to { opacity: 1; transform: none; filter: none; } }

/* Topbar de vidro na landing */
.topbar {
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    box-shadow: none;
    border-bottom-color: transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.topbar.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45); }

/* Brilho que atravessa o botão da App Store */
.lpx-store { position: relative; overflow: hidden; }
.lpx-store::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: lpxShine 5.5s ease-in-out 2.2s infinite;
    pointer-events: none;
}
@keyframes lpxShine { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Telefone da frente (print real do Dashboard) por cima do de trás */
.lpx-phone-front { z-index: 2; }

/* -------- Faixa de recursos (marquee) -------- */
.lpx-ticker {
    margin: 1.75rem auto 0;
    max-width: 62rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lpx-ticker-track { display: flex; width: max-content; animation: lpxMarquee 48s linear infinite; }
.lpx-ticker:hover .lpx-ticker-track { animation-play-state: paused; }
.lpx-ticker ul { display: flex; gap: 0.6rem; margin: 0; padding: 0 0.3rem; list-style: none; }
.lpx-ticker li {
    white-space: nowrap;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 500;
}
.lpx-ticker li::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--lpx-green); margin-right: 0.5rem; vertical-align: middle;
}
@keyframes lpxMarquee { to { transform: translateX(-50%); } }

/* -------- Cartões animados das vitrines -------- */
.lpx-insight {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    right: -18%;
    width: min(15rem, 82%);
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
    text-align: left;
}
.lpx-show.is-flip .lpx-insight { right: auto; left: -18%; }
@media (max-width: 859px) {
    .lpx-insight, .lpx-show.is-flip .lpx-insight { right: -6%; left: auto; bottom: 6%; }
}
.ins-k { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.lpx-insight strong { display: block; font-size: 1.25rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 0.6rem; }

/* Agenda: toque no dia e o plantão aparece */
.ins-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin: 0.35rem 0 0.6rem; }
.ins-week span {
    position: relative; aspect-ratio: 1; border-radius: 0.45rem; display: grid; place-items: start center;
    padding-top: 0.15rem; font-size: 0.68rem; color: var(--text-muted); background: var(--bg);
    border: 1px solid var(--border);
}
.ins-week .is-target i {
    position: absolute; left: 50%; bottom: 18%; width: 0.62rem; height: 0.62rem; margin-left: -0.31rem;
    border-radius: 50%; background: radial-gradient(circle, #fde047 35%, #f59e0b 36% 60%, transparent 62%);
    transform: scale(0);
}
.ins-cal.is-in .ins-week .is-target { animation: lpxTap 5s ease-in-out 0.4s infinite; }
.ins-cal.is-in .ins-week .is-target i { animation: lpxChip 5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s infinite; }
.ins-t { margin: 0; font-size: 0.8rem; color: var(--text-muted); opacity: 0; }
.ins-t b { color: var(--lpx-accent); }
.ins-cal.is-in .ins-t { animation: lpxCaption 5s ease 0.4s infinite; }
@keyframes lpxTap {
    0%, 12% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); border-color: var(--border); }
    18% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.25); border-color: var(--lpx-green); }
    30%, 88% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); border-color: var(--lpx-green); }
    100% { border-color: var(--border); }
}
@keyframes lpxChip { 0%, 20% { transform: scale(0); } 32%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes lpxCaption { 0%, 28% { opacity: 0; transform: translateY(4px); } 38%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* A receber: barras de atraso crescem */
.ins-seg { display: flex; gap: 3px; height: 0.5rem; border-radius: 99px; overflow: hidden; }
.ins-seg span { width: var(--w); background: var(--c); transform-origin: left; transform: scaleX(0); }
.ins-aging.is-in .ins-seg span { animation: lpxFillX 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ins-aging.is-in .ins-seg span:nth-child(2) { animation-delay: 0.25s; }
.ins-aging.is-in .ins-seg span:nth-child(3) { animation-delay: 0.45s; }
.ins-legend { display: flex; gap: 0.75rem; margin: 0.55rem 0 0; padding: 0; list-style: none; font-size: 0.7rem; color: var(--text-muted); }
.ins-legend li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-right: 0.3rem; }

/* Previsão: colunas sobem */
.ins-chart { display: flex; align-items: flex-end; gap: 0.9rem; height: 4.6rem; padding: 0 0.3rem; }
.ins-chart div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.25rem; }
.ins-chart span {
    width: 100%; height: var(--h); border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;
    background: linear-gradient(180deg, #8b5cf6 0 28%, #22c55e 28%);
    transform-origin: bottom; transform: scaleY(0);
}
.ins-chart small { font-size: 0.66rem; color: var(--text-muted); }
.ins-bars.is-in .ins-chart span { animation: lpxFillY 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ins-bars.is-in .ins-chart div:nth-child(2) span { animation-delay: 0.15s; }
.ins-bars.is-in .ins-chart div:nth-child(3) span { animation-delay: 0.3s; }

/* Cobranças: status troca para recebido */
.ins-swap { display: inline-grid; margin-bottom: 0.5rem; }
.ins-swap em {
    grid-area: 1 / 1; font-style: normal; font-size: 0.74rem; font-weight: 700;
    padding: 0.25rem 0.65rem; border-radius: 99px; white-space: nowrap;
}
.ins-swap .a { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.ins-swap .b { background: rgba(34, 197, 94, 0.16); color: var(--lpx-accent); opacity: 0; }
.ins-status.is-in .ins-swap .a { animation: lpxSwapA 6s ease-in-out 0.6s infinite; }
.ins-status.is-in .ins-swap .b { animation: lpxSwapB 6s ease-in-out 0.6s infinite; }
.ins-status strong { margin-bottom: 0; }

@keyframes lpxFillX { to { transform: scaleX(1); } }
@keyframes lpxFillY { to { transform: scaleY(1); } }
@keyframes lpxSwapA { 0%, 38% { opacity: 1; } 46%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes lpxSwapB { 0%, 38% { opacity: 0; } 46%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* -------- Passos: linha que se desenha ligando os números -------- */
.lpx-steps { position: relative; }
@media (min-width: 760px) {
    .lpx-steps::before {
        content: "";
        position: absolute;
        top: 2.4rem;
        left: 2.4rem;
        right: 2.4rem;
        height: 2px;
        background: linear-gradient(90deg, var(--lpx-green), color-mix(in srgb, var(--lpx-green) 30%, transparent));
        transform-origin: left;
        transform: scaleX(0);
        z-index: 0;
    }
    .lpx-steps.is-in::before { animation: lpxFillX 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; }
    .lpx-steps li { position: relative; z-index: 1; }
}
.lpx-step-num { box-shadow: 0 0 0 6px var(--bg-card); }

/* -------- QR: anel de luz girando -------- */
.lpx-qr { position: relative; isolation: isolate; }
.lpx-qr-ring {
    position: absolute;
    inset: -2px;
    border-radius: 1.2rem;
    background: conic-gradient(from var(--a, 0deg), transparent 0 70%, #4ade80 82%, transparent 94%);
    z-index: -2; /* atrás do miolo branco (::before): só a borda de 2px aparece */
    animation: lpxSpin 4.5s linear infinite;
}
.lpx-qr::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; z-index: -1;
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lpxSpin { to { --a: 360deg; } }