/* =====================================================
   FLUXUSBI - VISUAL COMPARTILHADO DAS TELAS DE LOGIN
   Arquivo: /assets/css/login-fluxus.css

   Usado por:
     /login.php                                  -> tema "azul"     (Sistema)
     /modules/assistenciatecnica/app/login.php   -> tema "verde"    (APP Técnico)
     /modules/app_cliente/login.php              -> tema "lilas"    (APP do Cliente)
     /modules/forca_vendas/app/login.php         -> tema "laranja"  (APP do Representante)

   Como funciona: a página escolhe a cor com
   <body class="lx-body" data-lx-tema="azul|verde|lilas|laranja">
   Todo o resto do visual é igual. Todas as classes começam com "lx-"
   para não brigar com o Bootstrap nem com o CSS de cada app.
   ===================================================== */

/* ---------- 1. TEMAS DE COR ---------- */
.lx-body[data-lx-tema="azul"] {
    --lx-p: #0878c9;  --lx-pd: #0669b1;  --lx-rgb: 8,120,201;   --lx-glow: 34,163,221;
    --lx-hi: #86e3ff; --lx-bg1: #043a66; --lx-bg2: #065b9c;      --lx-bg3: #0878c9;
    --lx-chip: #0a5c9a; --lx-art1: #0e72b8; --lx-art2: #074a7e; --lx-line: #a9ecff; --lx-bar: #7fe6ff;
}
.lx-body[data-lx-tema="verde"] {
    --lx-p: #0f8f84;  --lx-pd: #0b6f67;  --lx-rgb: 15,143,132;  --lx-glow: 45,212,191;
    --lx-hi: #8af5dd; --lx-bg1: #03302d; --lx-bg2: #08594f;      --lx-bg3: #0f8f84;
    --lx-chip: #0b6b62; --lx-art1: #0e8a7d; --lx-art2: #064a43; --lx-line: #b4f7ea; --lx-bar: #8af5dd;
}
.lx-body[data-lx-tema="lilas"] {
    --lx-p: #6745bd;  --lx-pd: #4f2fa3;  --lx-rgb: 103,69,189;  --lx-glow: 167,139,250;
    --lx-hi: #e0d2ff; --lx-bg1: #25104f; --lx-bg2: #43258f;      --lx-bg3: #6f4fc8;
    --lx-chip: #4b2c9b; --lx-art1: #5a38b0; --lx-art2: #34197a; --lx-line: #e3d8ff; --lx-bar: #d4c2ff;
}
.lx-body[data-lx-tema="laranja"] {
    --lx-p: #bd4d13;  --lx-pd: #93390d;  --lx-rgb: 189,77,19;   --lx-glow: 251,146,60;
    --lx-hi: #ffd3ae; --lx-bg1: #3f1805; --lx-bg2: #8c3a0d;      --lx-bg3: #d0651f;
    --lx-chip: #a1440f; --lx-art1: #c8561a; --lx-art2: #8a3409; --lx-line: #ffe0c7; --lx-bar: #ffc99a;
}

/* ---------- 2. BASE ---------- */
.lx-body {
    --lx-text: #172536;
    --lx-muted: #68788a;
    --lx-border: #dce5ed;
    --lx-surface: #ffffff;
    --lx-input: #f4f8fb;
    --lx-card-bg: rgba(255,255,255,.97);

    position: relative;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lx-text);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background:
        radial-gradient(900px 620px at 8% 0%, rgba(var(--lx-glow), .38), transparent 60%),
        radial-gradient(760px 560px at 100% 100%, rgba(var(--lx-rgb), .55), transparent 62%),
        linear-gradient(155deg, var(--lx-bg1) 0%, var(--lx-bg2) 48%, var(--lx-bg3) 100%);
}

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

.lx-body :where(h1, h2, p, ul) { margin: 0; padding: 0; }
.lx-body [hidden] { display: none !important; }

/* Grade sutil ao fundo (efeito "painel de dados") */
.lx-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%);
}

/* ---------- 3. ESTRUTURA: marca (esquerda) + acesso (direita) ---------- */
.lx-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1360px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(24px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    align-content: center;
}

.lx-shell.is-gateway { --lx-col: 640px; }

@media (min-width: 1200px) {
    .lx-shell {
        --lx-col: 520px;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--lx-col));
        gap: 64px;
        padding: 40px 48px;
    }
    .lx-shell.is-gateway { --lx-col: 640px; }
}

/* ---------- 4. COLUNA DA MARCA ---------- */
.lx-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;
    animation: lxHeroIn .8s ease both;
}

.lx-plate {
    align-self: flex-start;
    display: inline-flex;
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    box-shadow: 0 14px 34px rgba(0,20,45,.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.lx-logo {
    display: block;
    width: min(270px, 64vw);
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0,20,45,.3));
}

.lx-eyebrow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lx-eyebrow i { color: var(--lx-hi); font-size: 13px; }

.lx-title {
    max-width: 17em;
    margin-bottom: 12px;
    font-size: clamp(26px, 3.1vw, 40px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.02em;
}

.lx-title span {
    background: linear-gradient(90deg, var(--lx-hi), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lx-text {
    max-width: 34em;
    color: rgba(255,255,255,.84);
    font-size: 15.5px;
    line-height: 1.6;
}

.lx-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    list-style: none;
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 500;
}

.lx-points li { display: inline-flex; align-items: center; gap: 8px; }
.lx-points i { color: var(--lx-hi); font-size: 15px; }

/* ---------- 5. ILUSTRAÇÃO: painel integrado + módulos conectados ---------- */
.lx-art {
    position: relative;
    width: min(100%, 560px, max(380px, calc((100dvh - 440px) * 1.27)));
    aspect-ratio: 560 / 440;
    container-type: inline-size;
}

.lx-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lx-art svg text { font-family: 'Inter', system-ui, sans-serif; }

.lx-ring { transform-origin: 280px 220px; animation: lxRing 70s linear infinite; }
.lx-ring.is-reverse { animation-duration: 110s; animation-direction: reverse; }

.lx-link {
    fill: none;
    stroke: var(--lx-line);
    stroke-opacity: .7;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 4 8;
    animation: lxDash 2.4s linear infinite;
}

.lx-pulse {
    fill: none;
    stroke: var(--lx-bar);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: lxPulse 2.4s ease-out infinite;
}

.lx-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    transform: translate(-50%, -50%);
}

.lx-chip {
    display: flex;
    align-items: center;
    gap: .65em;
    padding: .55em .9em .55em .6em;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 1.1em;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), var(--lx-chip);
    box-shadow: 0 14px 30px rgba(0,25,55,.28);
    font-size: 12px;
    font-size: clamp(9.5px, 2.1cqw, 12.5px);
    white-space: nowrap;
    animation: lxFloat 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.lx-chip i {
    width: 2.3em;
    height: 2.3em;
    display: grid;
    place-items: center;
    border-radius: .75em;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    font-size: 1.15em;
    box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

.lx-chip b { display: block; font-size: 1em; font-weight: 700; line-height: 1.15; }
.lx-chip small { display: block; margin-top: 1px; color: rgba(255,255,255,.72); font-size: .82em; line-height: 1.2; }

/* ---------- 6. COLUNA DO ACESSO ---------- */
.lx-panel {
    width: 100%;
    max-width: var(--lx-col, 520px);
    margin: 0 auto;
    animation: lxPanelIn .7s .1s ease both;
}

.lx-card,
.lx-gateway-card {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 26px;
    background: var(--lx-card-bg);
    box-shadow: 0 30px 70px rgba(0,25,55,.36);
}

.lx-card { padding: 30px 28px 24px; }

.lx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

.lx-head-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--lx-p), var(--lx-pd));
    color: #fff;
    font-size: 25px;
    box-shadow: 0 10px 24px rgba(var(--lx-rgb), .32);
}

.lx-head h2 { margin-bottom: 2px; color: var(--lx-text); font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.lx-head p { color: var(--lx-muted); font-size: 13px; line-height: 1.45; }

.lx-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--lx-p);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- 7. FORMULÁRIO ---------- */
.lx-field { margin-bottom: 16px; }

.lx-label {
    display: block;
    margin: 0 0 6px;
    color: var(--lx-text);
    font-size: 12.5px;
    font-weight: 700;
}

.lx-input-wrap { position: relative; }

.lx-ic {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: var(--lx-muted);
    font-size: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: color .16s ease;
}

.lx-input-wrap:focus-within .lx-ic { color: var(--lx-p); }

/* 16px evita o "zoom" automático do iPhone ao tocar no campo */
.lx-input {
    width: 100%;
    min-height: 54px;
    padding: 12px 52px 12px 44px;
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-input);
    color: var(--lx-text);
    font: inherit;
    font-size: 16px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.lx-input::placeholder { color: #9aa8b8; }

.lx-input:focus {
    outline: 0;
    border-color: var(--lx-p);
    background: var(--lx-surface);
    box-shadow: 0 0 0 4px rgba(var(--lx-rgb), .16);
}

.lx-input:-webkit-autofill {
    -webkit-text-fill-color: var(--lx-text);
    box-shadow: 0 0 0 1000px var(--lx-input) inset;
}

.lx-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--lx-muted);
    font-size: 18px;
    cursor: pointer;
    transform: translateY(-50%);
}

.lx-toggle:focus-visible { outline: 3px solid rgba(var(--lx-rgb), .3); }

/* ---------- 8. BOTÕES ---------- */
.lx-btn {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--lx-p);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.lx-btn:focus-visible { outline: 3px solid rgba(var(--lx-rgb), .35); outline-offset: 2px; }
.lx-btn:disabled { opacity: .75; cursor: progress; }
.lx-btn:active { transform: scale(.985); }

.lx-btn.is-primary {
    margin-top: 4px;
    background: linear-gradient(135deg, var(--lx-p), var(--lx-pd));
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--lx-rgb), .32);
}

.lx-btn.is-soft,
.lx-btn.is-ghost,
.lx-btn.is-outline { min-height: 46px; font-size: 13px; font-weight: 800; }

.lx-btn.is-soft { border: 1px dashed rgba(var(--lx-rgb), .38); background: rgba(var(--lx-rgb), .05); }
.lx-btn.is-ghost { background: transparent; }
.lx-btn.is-outline { border-color: var(--lx-border); background: var(--lx-surface); }

.lx-btn.is-confianca {
    min-height: 46px;
    border: 2px solid #173b70;
    background: #f4f8ff;
    color: #173b70;
    font-size: 13px;
    animation: lxConfianca 2s ease-out infinite;
}

.lx-actions { display: grid; gap: 8px; margin-top: 10px; }

.lx-spinner {
    width: 1em;
    height: 1em;
    display: inline-block;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lxSpin .8s linear infinite;
}

/* ---------- 9. AVISOS (ficam até a pessoa fechar) ---------- */
.lx-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 12px 12px 14px;
    border: 1px solid;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.lx-alert > i { margin-top: 2px; font-size: 15px; }
.lx-alert.is-erro { border-color: #f4c4c8; background: #fff0f1; color: #9b2c36; }
.lx-alert.is-ok { border-color: #bfe9d1; background: #ecfbf3; color: #1c6b43; }
.lx-alert-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.lx-alert-x {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}

.lx-alert-x:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* ---------- 10. NOTA, INSTALAÇÃO E RODAPÉ ---------- */
.lx-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 12px;
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    background: var(--lx-input);
    color: var(--lx-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.lx-note i { flex: 0 0 auto; margin-top: 1px; color: var(--lx-p); }

.lx-secure { margin-top: 18px; color: var(--lx-muted); text-align: center; font-size: 12px; }
.lx-secure i { color: var(--lx-p); }

.lx-install {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px 12px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(var(--lx-rgb), .22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--lx-rgb), .08), var(--lx-surface));
}

.lx-install-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lx-p), var(--lx-pd));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(var(--lx-rgb), .26);
}

.lx-install-copy { align-self: center; min-width: 0; }
.lx-install-copy strong { display: block; color: var(--lx-text); font-size: 14px; line-height: 1.3; }
.lx-install-copy small { display: block; margin-top: 2px; color: var(--lx-muted); font-size: 12px; line-height: 1.4; }
.lx-install > .lx-btn,
.lx-install-status,
.lx-install-help { grid-column: 1 / -1; }
.lx-install > .lx-btn { margin-top: 2px; min-height: 48px; font-size: 14px; }

.lx-install-status {
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(var(--lx-rgb), .08);
    color: var(--lx-text);
    font-size: 12px;
    line-height: 1.45;
}

.lx-install-help {
    padding: 12px;
    border: 1px solid var(--lx-border);
    border-radius: 11px;
    background: var(--lx-surface);
    color: var(--lx-muted);
    font-size: 12px;
    line-height: 1.55;
}

.lx-install-help ul { margin: 7px 0 0; padding-left: 19px; }
.lx-install-help li + li { margin-top: 5px; }
.lx-install-help.is-js { display: none; }
.lx-install-help.is-js.show { display: block; }

.lx-footer { margin-top: 16px; color: rgba(255,255,255,.82); text-align: center; font-size: 11.5px; line-height: 1.5; }

/* ---------- 11. SELETOR DE APPS (só em /login.php) ---------- */
.lx-gateway-card { padding: 30px 28px 28px; }
.lx-gateway-title { margin-bottom: 22px; }

.lx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--lx-p);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lx-gateway-title h2 { margin-bottom: 5px; color: var(--lx-text); font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.lx-gateway-title p { color: var(--lx-muted); font-size: 13px; }

.lx-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.lx-choice {
    position: relative;
    min-width: 0;
    min-height: 178px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--ac-rgb), .3);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(var(--ac-rgb), .07), rgba(255,255,255,.98) 48%);
    box-shadow: 0 7px 20px rgba(var(--ac-rgb), .09);
    color: var(--lx-text);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    -webkit-user-select: none;
    user-select: none;
}

.lx-choice.is-sistema   { --ac: #0878c9; --ac-rgb: 8,120,201; }
.lx-choice.is-tecnico   { --ac: #0f8f84; --ac-rgb: 13,148,136; }
.lx-choice.is-cliente   { --ac: #6745bd; --ac-rgb: 109,74,196; }
.lx-choice.is-comercial { --ac: #bd4d13; --ac-rgb: 189,77,19; }

.lx-choice:focus-visible { outline: 3px solid rgba(var(--ac-rgb), .4); outline-offset: 2px; }
.lx-choice:active { transform: scale(.985); }

.lx-choice-top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.lx-choice-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 14px;
    background: rgba(var(--ac-rgb), .12);
    color: var(--ac);
    font-size: 22px;
}

.lx-hand {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(23,37,54,.045);
    color: var(--ac);
    font-size: 21px;
    transform-origin: 60% 80%;
    animation: lxPoint 1.45s ease-in-out infinite;
}

.lx-choice:nth-child(2) .lx-hand { animation-delay: .25s; }
.lx-choice:nth-child(3) .lx-hand { animation-delay: .5s; }
.lx-choice:nth-child(4) .lx-hand { animation-delay: .75s; }

.lx-choice small { display: block; margin-bottom: 3px; color: var(--lx-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lx-choice strong { display: block; font-size: 15.5px; line-height: 1.25; }
.lx-choice p { flex: 1; margin: 6px 0 14px; color: var(--lx-muted); font-size: 12px; line-height: 1.5; }
.lx-choice-action { display: inline-flex; align-items: center; gap: 6px; color: var(--ac); font-size: 12px; font-weight: 800; }
.lx-choice-action i { transition: transform .18s ease; }

.lx-gateway-note { margin: 16px 0 12px; color: rgba(255,255,255,.86); text-align: center; font-size: 11.5px; line-height: 1.5; }

.lx-choice.is-selecting { pointer-events: none; transform: scale(.975) !important; opacity: .9; }
.lx-choice.is-selecting::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.18); animation: lxFlash .28s ease both; }
.lx-gateway.is-leaving { animation: lxLeave .3s ease forwards; }

/* ---------- 12. SÓ COM MOUSE (no celular o "hover" fica preso após o toque) ---------- */
@media (hover: hover) {
    .lx-back:hover { text-decoration: underline; }
    .lx-btn:hover { transform: translateY(-1px); }
    .lx-btn.is-primary:hover { box-shadow: 0 14px 28px rgba(var(--lx-rgb), .4); }
    .lx-btn.is-soft:hover { background: rgba(var(--lx-rgb), .1); border-color: var(--lx-p); }
    .lx-btn.is-ghost:hover { background: rgba(var(--lx-rgb), .07); }
    .lx-btn.is-outline:hover { border-color: var(--lx-p); }
    .lx-toggle:hover { background: rgba(var(--lx-rgb), .09); color: var(--lx-p); }
    .lx-choice:hover { transform: translateY(-3px); border-color: rgba(var(--ac-rgb), .62); box-shadow: 0 14px 30px rgba(var(--ac-rgb), .18), 0 0 0 3px rgba(var(--ac-rgb), .06); }
    .lx-choice:hover .lx-choice-action i { transform: translateX(4px); }
}

/* ---------- 13. ANIMAÇÕES ---------- */
@keyframes lxHeroIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lxPanelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lxFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lxDash    { to { stroke-dashoffset: -48; } }
@keyframes lxRing    { to { transform: rotate(360deg); } }
@keyframes lxPulse   { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes lxSpin    { to { transform: rotate(360deg); } }
@keyframes lxFlash   { from { opacity: 0; } 45% { opacity: 1; } to { opacity: 0; } }
@keyframes lxLeave   { to { opacity: 0; transform: translateY(7px) scale(.99); } }
@keyframes lxPoint {
    0%, 100% { transform: translateX(0) rotate(-7deg); }
    45% { transform: translateX(-5px) rotate(-12deg) scale(1.07); }
    65% { transform: translateX(-2px) rotate(-8deg) scale(1.03); }
}
@keyframes lxConfianca {
    0% { box-shadow: 0 0 0 0 rgba(23,59,112,.28); }
    70% { box-shadow: 0 0 0 9px rgba(23,59,112,0); }
    100% { box-shadow: 0 0 0 0 rgba(23,59,112,0); }
}

@media (prefers-reduced-motion: reduce) {
    .lx-hero, .lx-panel, .lx-chip, .lx-hand, .lx-ring, .lx-link, .lx-pulse,
    .lx-btn, .lx-btn.is-confianca, .lx-choice { animation: none !important; transition: none !important; }
}

/* ---------- 14. TELAS MENORES ---------- */
@media (max-width: 1199.98px) {
    .lx-hero { align-items: center; text-align: center; gap: 14px; }
    .lx-plate, .lx-eyebrow { align-self: center; }
    .lx-art { display: none; }
    .lx-title { margin-inline: auto; margin-bottom: 0; font-size: clamp(22px, 5vw, 30px); }
    .lx-text { margin: 10px auto 0; font-size: 14px; }
    .lx-points { justify-content: center; }
}

@media (max-width: 640px) {
    .lx-shell { gap: 16px; padding-top: calc(18px + env(safe-area-inset-top)); }
    .lx-hero { gap: 12px; }
    .lx-logo { width: min(210px, 58vw); }
    .lx-title, .lx-text, .lx-points { display: none; }
    .lx-card { padding: 24px 18px 20px; border-radius: 22px; }
    .lx-gateway-card { padding: 22px 16px 18px; border-radius: 22px; }
    .lx-gateway-title h2 { font-size: 22px; }
    .lx-choices { grid-template-columns: 1fr; }
    .lx-choice { min-height: 150px; }
    .lx-head h2 { font-size: 20px; }
}

@media (max-height: 640px) and (max-width: 640px) {
    .lx-eyebrow { display: none; }
}

/* ---------- 15. APP INSTALADO (PWA): versão enxuta ---------- */
@media (display-mode: standalone) {
    .lx-body { overscroll-behavior-y: none; }
    .lx-art, .lx-text, .lx-points { display: none; }
    .lx-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lx-hero { align-items: center; text-align: center; gap: 12px; }
    .lx-plate, .lx-eyebrow { align-self: center; }
    .lx-title { display: none; }
}

/* iPhone (Safari) não reconhece "display-mode"; o JS marca a página com esta classe */
html.lx-standalone .lx-body { overscroll-behavior-y: none; }
html.lx-standalone .lx-art,
html.lx-standalone .lx-text,
html.lx-standalone .lx-points,
html.lx-standalone .lx-title { display: none; }
html.lx-standalone .lx-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
html.lx-standalone .lx-hero { align-items: center; text-align: center; gap: 12px; }
html.lx-standalone .lx-plate,
html.lx-standalone .lx-eyebrow { align-self: center; }

/* ---------- 16. TEMA ESCURO DO APP TÉCNICO (só no celular/app instalado) ---------- */
@media (display-mode: standalone), (max-width: 767.98px) {
    html[data-pwa-theme="dark"] .lx-body,
    html[data-theme="dark"] .lx-body {
        --lx-text: #e6edf5;
        --lx-muted: #9fb0c3;
        --lx-border: #27415a;
        --lx-surface: #0f2233;
        --lx-input: #13293d;
        --lx-card-bg: rgba(14,32,48,.96);
    }
    html[data-pwa-theme="dark"] .lx-input::placeholder,
    html[data-theme="dark"] .lx-input::placeholder { color: #6f859b; }
    html[data-pwa-theme="dark"] .lx-alert.is-erro,
    html[data-theme="dark"] .lx-alert.is-erro { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.14); color: #ff9a9a; }
    html[data-pwa-theme="dark"] .lx-alert.is-ok,
    html[data-theme="dark"] .lx-alert.is-ok { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.12); color: #8ee7ae; }
}