/* ============================================================
   Post InsertIT - Web Theme (paleta morado, basado en POS offline)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap');

/* ---------- Tokens ---------- */
:root {
    --primary:        #7c3aed;
    --primary-hover:  #6d28d9;
    --primary-light:  #f5f3ff;
    --sidebar-bg:     #101a39;
    --sidebar-bg-2:   #080e22;
    --sidebar-hover:  #1f2a57;
    --sidebar-accent: #8b5cf6;

    --bg:        #f4f7fc;
    --surface:   #ffffff;
    --surface-2: #f8faff;
    --border:    #e6ebf4;
    --border-2:  #d8dfeb;
    --text:      #0f172a;
    --text-soft: #334155;
    --text-mute: #64748b;
    --text-dim:  #94a3b8;

    --success: #16a34a;
    --warning: #d97706;
    --danger:  #dc2626;
    --info:    #a855f7;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.04);
    --shadow-md: 0 10px 30px rgba(15,23,42,.08);
    --shadow-lg: 0 24px 48px rgba(15,23,42,.14);

    --header-h: 64px;
    --sidebar-w: 264px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:"Plus Jakarta Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
    font-size:14px;
    line-height:1.45;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;transition:color .16s ease,opacity .16s ease}
a:hover{color:var(--primary-hover);text-decoration:none}
img{max-width:100%;height:auto}

h1,h2,h3,h4{margin:0 0 .5rem;color:var(--text);font-weight:700;letter-spacing:0}
h1{font-size:1.72rem}
h2{font-size:1.3rem}
h3{font-size:1.08rem}
p{margin:0 0 1rem;color:var(--text-soft)}

.muted{color:var(--text-mute)}

/* ---------- Landing comercial ---------- */
.landing-body{
    margin:0;
    color:#f6f8ff;
    font-family:"Plus Jakarta Sans","Segoe UI",Tahoma,sans-serif;
    background:
        radial-gradient(1200px 520px at 8% -10%, rgba(124,58,237,.34), transparent 62%),
        radial-gradient(980px 460px at 88% -8%, rgba(139,92,246,.32), transparent 58%),
        linear-gradient(180deg, #040711 0%, #070d1d 44%, #050913 100%);
}

.landing-wrap{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:14px 20px 58px;
}

.landing-wrap::before,
.landing-wrap::after{
    content:"";
    position:absolute;
    border-radius:999px;
    pointer-events:none;
    filter:blur(1px);
    z-index:0;
}

.landing-wrap::before{
    width:240px;
    height:240px;
    top:145px;
    right:0;
    background:radial-gradient(circle, rgba(139,92,246,.3) 0%, rgba(139,92,246,0) 68%);
}

.landing-wrap::after{
    width:260px;
    height:260px;
    bottom:16px;
    left:-56px;
    background:radial-gradient(circle, rgba(167,139,250,.24) 0%, rgba(167,139,250,0) 70%);
}

.landing-topbar{
    position:sticky;
    top:10px;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:7px 10px;
    border-radius:14px;
    border:1px solid rgba(167,139,250,.32);
    background:rgba(7,12,29,.74);
    box-shadow:0 16px 34px rgba(2,6,23,.48), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:none;
}

.landing-brand{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    padding:6px 9px;
    border-radius:10px;
    border:1px solid rgba(148,163,184,.24);
    background:linear-gradient(145deg, rgba(13,23,53,.94) 0%, rgba(8,16,39,.96) 100%);
    box-shadow:0 10px 20px rgba(2,6,23,.44);
    position:relative;
    z-index:1;
}

.landing-brand:hover{opacity:.95;text-decoration:none}

.landing-brand-banner{
    height:46px;
    width:auto;
    max-width:220px;
    display:block;
}

.landing-login-btn{
    border:1px solid rgba(226,232,255,.34);
    background:rgba(255,255,255,.02);
    color:#edf2ff;
    box-shadow:0 10px 24px rgba(2,6,23,.38);
}

.landing-login-btn:hover{
    border-color:rgba(196,181,253,.66);
    background:linear-gradient(135deg, rgba(124,58,237,.36) 0%, rgba(139,92,246,.46) 100%);
    color:#ffffff;
}

.landing-hero{
    position:relative;
    z-index:1;
    margin-top:24px;
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
    gap:20px;
}

.landing-hero-copy,
.landing-hero-panel{
    border-radius:24px;
    border:1px solid rgba(139,92,246,.35);
    background:linear-gradient(160deg, rgba(10,17,38,.92) 0%, rgba(8,13,30,.85) 100%);
    box-shadow:0 26px 56px rgba(2,6,23,.54), inset 0 1px 0 rgba(255,255,255,.06);
}

.landing-hero-copy{padding:32px 30px 28px}

.landing-kicker{
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:#ebe5ff;
    font-weight:700;
    background:linear-gradient(135deg, rgba(91,33,182,.34) 0%, rgba(109,40,217,.22) 100%);
    border:1px solid rgba(167,139,250,.5);
    border-radius:999px;
    padding:7px 12px;
}

.landing-kicker::before{display:none}

.landing-hero-copy h1{
    margin:14px 0 0;
    color:#f8faff;
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
    font-size:clamp(2.2rem, 4.1vw, 3.72rem);
    line-height:1.05;
    letter-spacing:-.01em;
}

.landing-lead{
    margin:14px 0 0;
    color:#d4dcf3;
    max-width:760px;
    font-size:1.01rem;
    line-height:1.6;
}

.landing-lead strong{color:#ffffff}

.landing-hero-actions{
    margin-top:24px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.landing-flow-btn{
    background:linear-gradient(135deg, #7c3aed 0%, #8b5cf6 46%, #7c3aed 100%);
    border:1px solid rgba(196,181,253,.48);
    color:#ffffff;
    box-shadow:0 14px 28px rgba(124,58,237,.42);
}

.landing-flow-btn:hover{
    background:linear-gradient(135deg, #6d28d9 0%, #7c3aed 46%, #6d28d9 100%);
    color:#ffffff;
    transform:translateY(-1px);
}

.landing-download-btn{
    background:rgba(8,14,32,.42);
    border:1px solid rgba(226,232,255,.3);
    color:#eff3ff;
    box-shadow:0 10px 24px rgba(2,6,23,.34);
}

.landing-download-btn:hover{
    background:rgba(168,85,247,.14);
    border-color:rgba(191,219,254,.62);
    color:#ffffff;
    transform:translateY(-1px);
}

.landing-hero-meta{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.landing-hero-meta span{
    font-size:.8rem;
    padding:8px 11px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.35);
    color:#e2e8fb;
    background:linear-gradient(135deg, rgba(15,23,42,.66) 0%, rgba(30,41,59,.56) 100%);
}

.landing-hero-panel{padding:24px}

.hero-panel-head h2{
    margin:0;
    color:#f8faff;
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
    font-size:1.36rem;
}

.hero-panel-head p{
    margin:6px 0 0;
    color:#c7d2f1;
    font-size:.91rem;
}

.hero-steps{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.hero-step{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:12px;
    border-radius:15px;
    border:1px solid rgba(148,163,184,.24);
    background:linear-gradient(145deg, rgba(12,20,44,.88) 0%, rgba(10,17,35,.8) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-step-num{
    width:34px;
    height:34px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, rgba(139,92,246,.5) 0%, rgba(139,92,246,.5) 100%);
    border:1px solid rgba(196,181,253,.58);
    color:#eef2ff;
    font-weight:800;
    font-size:.9rem;
    flex:0 0 34px;
}

.hero-step h3{
    margin:0;
    font-size:.94rem;
    color:#f4f7ff;
}

.hero-step p{
    margin:2px 0 0;
    font-size:.84rem;
    color:#c4cee8;
}

.landing-plans{
    position:relative;
    z-index:1;
    margin-top:34px;
}

.landing-admin-showcase{
    position:relative;
    z-index:1;
    margin-top:28px;
}

.landing-admin-grid{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}

.landing-admin-card{
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.24);
    background:linear-gradient(160deg, rgba(10,17,38,.92) 0%, rgba(8,13,30,.85) 100%);
    box-shadow:0 18px 36px rgba(2,6,23,.5);
}

.landing-admin-card img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-bottom:1px solid rgba(148,163,184,.2);
}

.landing-admin-card h3{
    margin:14px 14px 0;
    color:#ffffff;
    font-size:1rem;
}

.landing-admin-card p{
    margin:8px 14px 14px;
    color:#c7d2f1;
    font-size:.9rem;
    line-height:1.5;
}

.landing-admin-card:hover{
    border-color:rgba(167,139,250,.44);
    transform:translateY(-2px);
    box-shadow:0 24px 44px rgba(2,6,23,.56);
}

.landing-section-head h2{
    margin:0;
    color:#f8faff;
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
    font-size:1.74rem;
}

.landing-section-head p{margin:8px 0 0;color:#c5d0ec}

.landing-plan-grid{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
}

.landing-plan-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(162deg, rgba(11,18,41,.95) 0%, rgba(8,14,30,.92) 100%);
    color:#f3f6ff;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.24);
    box-shadow:0 16px 36px rgba(2,6,23,.5);
    padding:17px;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.landing-plan-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, rgba(129,140,248,.68) 0%, rgba(167,139,250,.58) 100%);
    opacity:.58;
}

.landing-plan-card:hover{
    border-color:rgba(167,139,250,.44);
    transform:translateY(-3px);
    box-shadow:0 24px 46px rgba(2,6,23,.56);
}

.landing-plan-card.is-featured{
    border:1px solid rgba(196,181,253,.86);
    background:linear-gradient(160deg, rgba(31,41,96,.95) 0%, rgba(17,24,56,.93) 100%);
    box-shadow:0 0 0 1px rgba(196,181,253,.35), 0 30px 62px rgba(109,40,217,.44);
    transform:translateY(-6px);
}

.landing-plan-card.is-featured::before{
    height:3px;
    opacity:1;
    background:linear-gradient(90deg, rgba(196,181,253,1) 0%, rgba(168,85,247,1) 100%);
}

.landing-plan-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.landing-plan-tag{
    display:inline-block;
    font-size:.74rem;
    font-weight:700;
    color:#ebe5ff;
    background:rgba(109,40,217,.3);
    border:1px solid rgba(167,139,250,.44);
    border-radius:999px;
    padding:5px 10px;
}

.landing-plan-pick{
    font-size:.72rem;
    font-weight:700;
    color:#f1f5ff;
    background:linear-gradient(135deg, rgba(139,92,246,.68) 0%, rgba(124,58,237,.72) 100%);
    border:1px solid rgba(147,197,253,.42);
    border-radius:999px;
    padding:5px 10px;
}

.landing-plan-card h3{
    margin:2px 0 0;
    font-size:1.08rem;
    color:#ffffff;
}

.landing-plan-term{margin:0;color:#b6c2df;font-size:.86rem}

.landing-plan-price{
    font-size:1.92rem;
    line-height:1;
    font-weight:800;
    color:#ffffff;
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
}

.landing-plan-month{margin:0;font-size:.8rem;color:#b7c4e3}

.landing-plan-list{
    margin:4px 0;
    padding:0;
    color:#dbe4f9;
    font-size:.84rem;
    line-height:1.45;
    list-style:none;
}

.landing-plan-list li{
    position:relative;
    padding-left:15px;
}

.landing-plan-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.46em;
    width:7px;
    height:7px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(168,85,247,.95) 0%, rgba(196,181,253,.95) 100%);
    box-shadow:0 0 0 2px rgba(59,130,246,.16);
}

.landing-plan-save{
    border-radius:10px;
    padding:8px 10px;
    font-size:.8rem;
    font-weight:700;
    color:#bbf7d0;
    background:rgba(20,83,45,.34);
    border:1px solid rgba(74,222,128,.42);
}

.landing-plan-save.is-neutral{
    color:#d2dbf4;
    background:rgba(30,41,59,.66);
    border-color:rgba(148,163,184,.3);
}

.landing-plan-flow{
    margin-top:auto;
    background:linear-gradient(135deg, #7c3aed 0%, #7c3aed 52%, #7c3aed 100%);
    border:1px solid rgba(191,219,254,.46);
    color:#f8fafc;
    box-shadow:0 10px 24px rgba(139,92,246,.3);
}

.landing-plan-flow:hover{
    background:linear-gradient(135deg, #1e40af 0%, #6d28d9 52%, #6d28d9 100%);
    color:#f8fafc;
    transform:translateY(-1px);
}

.landing-value-grid{
    position:relative;
    z-index:1;
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}

.landing-value-card{
    border-radius:17px;
    padding:17px;
    border:1px solid rgba(148,163,184,.24);
    background:linear-gradient(155deg, rgba(11,18,41,.93) 0%, rgba(10,15,34,.88) 100%);
    box-shadow:0 14px 30px rgba(2,6,23,.46);
}

.landing-value-card:hover{
    border-color:rgba(167,139,250,.42);
    box-shadow:0 22px 36px rgba(2,6,23,.52);
    transform:translateY(-2px);
}

.landing-value-card h3{margin:0;color:#f7f9ff;font-size:1rem}
.landing-value-card p{margin:8px 0 0;color:#c1cce8;font-size:.9rem;line-height:1.5}

.landing-bottom-strip{
    position:relative;
    z-index:1;
    margin-top:18px;
    border-radius:22px;
    border:1px solid rgba(167,139,250,.56);
    background:
        radial-gradient(680px 190px at -8% 0%, rgba(139,92,246,.28), rgba(139,92,246,0) 58%),
        linear-gradient(128deg, #101a3d 0%, #1f2d63 48%, #2c2f73 100%);
    padding:22px;
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 20px 40px rgba(2,6,23,.56), inset 0 1px 0 rgba(255,255,255,.09);
}

.landing-bottom-strip h2{
    margin:0;
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;
    color:#f8faff;
    font-size:1.44rem;
}

.landing-bottom-strip p{margin:6px 0 0;color:#d8e4ff}

.landing-bottom-strip .landing-download-btn{
    background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 52%, #7c3aed 100%);
    border:1px solid rgba(191,219,254,.62);
    color:#ffffff;
    box-shadow:0 14px 30px rgba(139,92,246,.36);
}

.landing-bottom-strip .landing-download-btn:hover{
    background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 52%, #6d28d9 100%);
    border-color:rgba(196,181,253,.88);
}

@keyframes landing-card-in{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

.landing-hero-copy,
.landing-hero-panel,
.landing-plan-card,
.landing-value-card,
.landing-bottom-strip{
    animation:landing-card-in .4s ease both;
}

.landing-plan-card:nth-child(2){animation-delay:.05s}
.landing-plan-card:nth-child(3){animation-delay:.1s}
.landing-plan-card:nth-child(4){animation-delay:.15s}

@media (max-width:1080px){
    .landing-hero{grid-template-columns:1fr;}
    .landing-hero-copy h1{font-size:2.8rem;}
    .landing-admin-grid{grid-template-columns:1fr 1fr;}
    .landing-plan-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
    .landing-value-grid{grid-template-columns:1fr;}
}

@media (max-width:700px){
    .landing-wrap{padding:16px 12px 32px;}
    .landing-topbar{padding:6px 8px;}
    .landing-brand{padding:5px 7px;}
    .landing-brand-banner{height:36px;max-width:170px;}
    .landing-hero-copy,
    .landing-hero-panel,
    .landing-admin-card,
    .landing-plan-card,
    .landing-value-card,
    .landing-bottom-strip{border-radius:16px;}
    .landing-hero-copy h1{font-size:2rem;}
    .landing-hero-actions .btn{width:100%;}
    .landing-admin-grid{grid-template-columns:1fr;}
    .landing-plan-grid{grid-template-columns:1fr;}
    .landing-bottom-strip{flex-direction:column;align-items:flex-start;}
}

/* ---------- Landing White Theme Override ---------- */
.landing-body{
    margin:0;
    color:#10233f;
    font-family:"Sora","Plus Jakarta Sans","Segoe UI",Tahoma,sans-serif;
    background:
        radial-gradient(1100px 420px at -14% -18%, rgba(14,165,233,.18), transparent 62%),
        radial-gradient(920px 460px at 112% -16%, rgba(15,23,42,.10), transparent 64%),
        linear-gradient(180deg, #f8fbff 0%, #edf4ff 58%, #f8fbff 100%);
}

.landing-wrap::before{
    background:radial-gradient(circle, rgba(14,165,233,.2) 0%, rgba(14,165,233,0) 70%);
}

.landing-wrap::after{
    background:radial-gradient(circle, rgba(2,132,199,.18) 0%, rgba(2,132,199,0) 72%);
}

.landing-topbar{
    border:1px solid #d2deed;
    border-radius:18px;
    background:rgba(255,255,255,.88);
    box-shadow:0 18px 42px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:none;
}

.landing-brand{
    border:1px solid #d4dfed;
    border-radius:14px;
    background:linear-gradient(158deg, #ffffff 0%, #f1f7ff 100%);
    box-shadow:0 12px 28px rgba(15,23,42,.09);
}

.landing-login-btn{
    border:1px solid #c6d5e8;
    background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color:#173256;
    box-shadow:0 10px 22px rgba(15,23,42,.08);
}

.landing-login-btn:hover{
    border-color:#9cb7da;
    background:linear-gradient(180deg, #ffffff 0%, #eaf2ff 100%);
    color:#112946;
}

.landing-hero{
    gap:24px;
    margin-top:28px;
    align-items:stretch;
}

.landing-hero-copy,
.landing-hero-panel,
.landing-admin-card,
.landing-plan-card,
.landing-value-card,
.landing-market-card{
    border:1px solid #d2deed;
    background:linear-gradient(165deg, #ffffff 0%, #f2f7ff 100%);
    box-shadow:0 22px 44px rgba(15,23,42,.1);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.landing-hero-copy,
.landing-hero-panel{
    position:relative;
    overflow:hidden;
}

.landing-hero-copy::after,
.landing-hero-panel::after{
    content:"";
    position:absolute;
    inset:auto -80px -90px auto;
    width:240px;
    height:240px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(2,132,199,.16) 0%, rgba(2,132,199,0) 70%);
    pointer-events:none;
}

.landing-kicker{
    color:#724300;
    background:linear-gradient(135deg, #fff2cf 0%, #ffe3a7 100%);
    border:1px solid #efc36a;
}

.landing-hero-copy h1,
.hero-panel-head h2,
.landing-section-head h2,
.landing-plan-card h3,
.landing-value-card h3,
.landing-bottom-strip h2,
.landing-admin-card h3,
.landing-market-card h3{
    color:#0d213d;
    font-family:"Space Grotesk","Sora",sans-serif;
    letter-spacing:-.02em;
}

.landing-hero-copy h1{
    margin-top:16px;
    max-width:17ch;
    font-size:clamp(1.95rem, 4.6vw, 4rem);
    line-height:1.01;
    text-wrap:balance;
}

.landing-lead,
.hero-panel-head p,
.landing-section-head p,
.hero-step p,
.landing-admin-card p,
.landing-plan-term,
.landing-plan-month,
.landing-value-card p,
.landing-bottom-strip p,
.landing-market-card p{
    color:#355173;
}

.landing-lead{
    margin-top:18px;
    max-width:62ch;
    line-height:1.64;
}

.landing-hero-meta span{
    border:1px solid #c7d7ea;
    color:#1e4066;
    background:linear-gradient(135deg, #f8fcff 0%, #ecf4ff 100%);
    box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.hero-step{
    border:1px solid #cfe0ef;
    background:linear-gradient(145deg, #ffffff 0%, #f2f8ff 100%);
    box-shadow:0 10px 24px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.9);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hero-step:hover{
    transform:translateY(-2px);
    border-color:#9fc0e0;
    box-shadow:0 16px 30px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.94);
}

.hero-step-num{
    background:linear-gradient(135deg, #0b305f 0%, #0f4a83 100%);
    border:1px solid #0a3d70;
    color:#ffffff;
}

.hero-step h3{color:#123258;}

.landing-admin-card img{
    border-bottom:1px solid #d6e2f0;
    background:#eaf2ff;
}

.landing-admin-card:hover,
.landing-value-card:hover,
.landing-market-card:hover,
.landing-plan-card:hover{
    transform:translateY(-3px);
    border-color:#9ebddf;
    box-shadow:0 28px 48px rgba(15,23,42,.14);
}

.landing-plan-card{
    color:#163357;
}

.landing-plan-card::before{
    background:linear-gradient(90deg, rgba(15,59,110,.56) 0%, rgba(2,132,199,.44) 100%);
}

.landing-plan-card.is-featured{
    border:1px solid rgba(13,58,106,.4);
    background:linear-gradient(160deg, #f2f8ff 0%, #ffffff 100%);
    box-shadow:0 0 0 1px rgba(13,58,106,.12), 0 34px 60px rgba(15,23,42,.16);
}

.landing-plan-tag{
    color:#173b66;
    background:rgba(2,132,199,.12);
    border:1px solid rgba(2,132,199,.3);
}

.landing-plan-pick{
    color:#ffffff;
    background:linear-gradient(135deg, #0c3364 0%, #0f4a83 100%);
    border:1px solid #0b3d72;
}

.landing-plan-list{color:#365073;}

.landing-plan-save{
    color:#166534;
    background:rgba(74,222,128,.14);
    border:1px solid rgba(34,197,94,.35);
}

.landing-plan-save.is-neutral{
    color:#355173;
    background:#ebf3ff;
    border-color:#c5d8ee;
}

.landing-flow-btn{
    background:linear-gradient(135deg, #0b305f 0%, #0f4a83 54%, #9333ea 100%);
    border:1px solid #0b3d72;
    color:#ffffff;
    box-shadow:0 18px 30px rgba(11,48,95,.28);
}

.landing-flow-btn:hover{
    background:linear-gradient(135deg, #0a2850 0%, #0d3f72 54%, #0369a1 100%);
    transform:translateY(-2px);
    box-shadow:0 22px 34px rgba(11,48,95,.34);
}

.landing-download-btn{
    background:#ffffff;
    border:1px solid #b8cee6;
    color:#143559;
    box-shadow:0 12px 24px rgba(15,23,42,.09);
}

.landing-download-btn:hover{
    background:#eaf3ff;
    border-color:#95b5dd;
    color:#102947;
    transform:translateY(-2px);
}

.landing-bottom-strip{
    border:1px solid #1d4b80;
    background:
        radial-gradient(760px 260px at -14% -20%, rgba(167,139,250,.34), rgba(167,139,250,0) 64%),
        linear-gradient(128deg, #0b2b55 0%, #0d3d71 54%, #0e4b81 100%);
    box-shadow:0 24px 42px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,.16);
}

.landing-bottom-strip h2,
.landing-bottom-strip p{
    color:#eaf3ff;
}

.landing-bottom-strip .landing-download-btn{
    background:linear-gradient(135deg, #fff2cf 0%, #ffd98b 100%);
    border:1px solid #efc36a;
    color:#5b3300;
}

.landing-bottom-strip .landing-download-btn:hover{
    background:linear-gradient(135deg, #ffe8b5 0%, #ffcf75 100%);
    color:#452600;
}

@media (max-width:700px){
    .landing-topbar{border-radius:14px;}
    .landing-hero-copy h1{font-size:clamp(1.75rem, 9vw, 2.35rem);}
}

.landing-market-notes{
    position:relative;
    z-index:1;
    margin-top:30px;
}

.landing-market-grid{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}

.landing-market-card{
    border-radius:18px;
    padding:16px;
}

.landing-market-card h3{
    margin:0;
    font-size:1rem;
}

.landing-market-card p{
    margin:8px 0 0;
    font-size:.9rem;
    line-height:1.5;
}

@media (max-width:1080px){
    .landing-market-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:700px){
    .landing-market-grid{grid-template-columns:1fr;}
}

.dim{color:var(--text-dim)}

/* ---------- Layout AUTH (login / cambiar password / system check) ---------- */
.auth-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg, #0d1430 0%, #111b3c 45%, #0f1734 100%);
    padding:24px;
}

.auth-card{
    width:100%;
    max-width:440px;
    background:var(--surface);
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    padding:30px;
}

.auth-card.wide{max-width:820px}

.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}

.auth-brand img{
    width:46px;
    height:46px;
    padding:10px;
    border-radius:12px;
    object-fit:contain;
    background:linear-gradient(145deg, #0f1734 0%, #1b2b5a 100%);
    box-shadow:0 10px 20px rgba(15,23,42,.2);
}

.auth-brand .brand-title{font-size:1.2rem;font-weight:700;color:var(--text)}
.auth-brand .brand-sub{font-size:.8rem;color:var(--text-mute)}
.auth-foot{margin-top:18px;text-align:center;color:var(--text-dim);font-size:.8rem}

/* ---------- Layout APP (panel) ---------- */
.app-shell{display:flex;min-height:100vh;background:var(--bg)}

.app-sidebar{
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
    color:#e9eeff;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    border-right:1px solid rgba(255,255,255,.08);
}

.app-sidebar .brand{
    display:flex;
    align-items:center;
    gap:11px;
    padding:18px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.app-sidebar .brand img{
    width:38px;
    height:38px;
    padding:8px;
    border-radius:12px;
    object-fit:contain;
    background:rgba(255,255,255,.08);
}

.app-sidebar .brand .name{font-weight:700;color:#ffffff;font-size:1rem;line-height:1.1}
.app-sidebar .brand .sub{font-size:.72rem;color:#b8c4ef}

.app-sidebar nav{padding:12px 8px}

.app-sidebar nav .section{
    color:#aebce7;
    text-transform:uppercase;
    font-size:.7rem;
    letter-spacing:.08em;
    padding:14px 10px 6px;
}

.app-sidebar nav a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:11px;
    border:1px solid transparent;
    color:#e8ecff;
    font-size:.92rem;
    text-decoration:none;
}

.app-sidebar nav a:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
    text-decoration:none;
}

.app-sidebar nav a.active{
    background:linear-gradient(135deg, rgba(91,102,255,.42) 0%, rgba(91,102,255,.18) 100%);
    border-color:rgba(153,164,255,.5);
    color:#ffffff;
    font-weight:700;
}

.app-sidebar nav a .ic{width:18px;display:inline-block;text-align:center;opacity:.9}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}

.app-topbar{
    height:var(--header-h);
    background:rgba(255,255,255,.92);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:5;
    backdrop-filter:none;
}

.app-topbar .crumbs{color:var(--text-soft);font-size:.92rem;font-weight:600}
.app-topbar .user{display:flex;align-items:center;gap:10px}
.app-topbar .user .who{font-size:.85rem;color:var(--text-soft);text-align:right}
.app-topbar .user .who b{display:block;color:var(--text)}
.app-content{padding:24px;flex:1}

/* ---------- Cards / Grid ---------- */
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:18px;
}

.card + .card{margin-top:16px}
.card-title{font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--text)}

.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:980px){
    .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
    .app-sidebar{position:fixed;left:-100%;z-index:50;transition:left .2s}
    .app-sidebar.open{left:0}
    .app-main{margin-left:0}
}

.stat{display:flex;flex-direction:column;gap:4px}
.stat .label{color:var(--text-mute);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.stat .value{font-size:1.6rem;font-weight:800;color:var(--text)}
.stat .hint{color:var(--text-dim);font-size:.8rem}

/* ---------- Forms ---------- */
.form-group{margin-bottom:14px}

.form-group label{display:block;margin-bottom:6px;color:var(--text-soft);font-weight:700;font-size:.84rem}

.input,.select,.textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border-2);
    border-radius:10px;
    background:#ffffff;
    font:inherit;
    color:var(--text);
    outline:none;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.input:hover,.select:hover,.textarea:hover{border-color:#c5cfdf}

.input:focus,.select:focus,.textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(124,58,237,.15);
    background:#ffffff;
}

.textarea{min-height:96px;resize:vertical}
.checkbox{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-soft)}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    min-height:40px;
    font:inherit;
    font-weight:700;
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
    transition:background .16s ease,box-shadow .16s ease,border-color .16s ease,transform .16s ease;
    background:#eef2f8;
    color:var(--text);
}

.btn:hover{background:#e7ecf5}

.btn-primary{
    background:linear-gradient(135deg, var(--primary) 0%, #6673ff 100%);
    color:#ffffff;
    border-color:rgba(109,40,217,.2);
    box-shadow:0 10px 20px rgba(124,58,237,.2);
}

.btn-primary:hover{background:linear-gradient(135deg, var(--primary-hover) 0%, #5b66f2 100%);color:#ffffff}

.btn-danger{background:#dc2626;color:#fff}
.btn-danger:hover{filter:brightness(.95)}

.btn-ghost{background:#ffffff;color:var(--text-soft);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-2)}

.btn-secondary{background:#f1f5fb;color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:#e8eef8}

.btn-success{background:var(--success);color:#fff}
.btn-success:hover{filter:brightness(.95)}

.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{filter:brightness(.95)}

.btn-sm{padding:6px 10px;min-height:32px;font-size:.85em}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn:disabled{opacity:.6;cursor:not-allowed}

/* ---------- Alerts ---------- */
.alert{
    padding:12px 14px;
    border-radius:10px;
    border:1px solid transparent;
    font-size:.9rem;
    margin-bottom:14px;
}

.alert-danger {background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-info   {background:#ecfeff;border-color:#a5f3fc;color:#155e75}

/* ---------- Tables ---------- */
.table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:#ffffff;
    box-shadow:var(--shadow-sm);
}

.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}

.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}

.table thead th{
    background:#f8faff;
    color:var(--text-soft);
    font-weight:700;
    text-transform:uppercase;
    font-size:.76em;
    letter-spacing:.05em;
}

.table tbody tr:hover{background:#f9fbff}
.table tbody tr:last-child td{border-bottom:none}

.table.table-clean th,.table.table-clean td{border-bottom:none;padding:4px 6px}
.table.table-clean th{width:35%;color:var(--text-mute);font-weight:600}

/* ---------- Badges ---------- */
.badge{
    display:inline-block;
    padding:3px 9px;
    font-size:.72rem;
    font-weight:700;
    border-radius:999px;
    letter-spacing:.02em;
}

.badge-success{background:#dcfce7;color:#166534}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-danger {background:#fee2e2;color:#991b1b}
.badge-info   {background:#cffafe;color:#155e75}
.badge-mute   {background:#e5e7eb;color:#374151}
.badge-primary{background:var(--primary-light);color:var(--primary-hover)}

/* ---------- Progress bar ---------- */
.progress{height:10px;background:#e9eef7;border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--primary);transition:width .3s}
.progress.warning > span{background:var(--warning)}
.progress.danger  > span{background:var(--danger)}

/* ---------- Utils ---------- */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}

.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px}

.text-right{text-align:right}.text-center{text-align:center}
.hidden{display:none !important}
.mono{font-family:"JetBrains Mono","Consolas","Courier New",monospace;font-size:.85em}
.small{font-size:.85em}

.kpi-up   {color:var(--success)}
.kpi-down {color:var(--danger)}

.right{margin-left:auto}
.spacer{flex:1}
.divider{height:1px;background:var(--border);margin:14px 0}

/* ---------- Blocked / system check ---------- */
.check-list{display:flex;flex-direction:column;gap:8px}

.check-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-radius:10px;
    background:#fafcff;
    border:1px solid var(--border);
}

.check-row .ok  {color:var(--success);font-weight:700}
.check-row .bad {color:var(--danger); font-weight:700}

.form-error{color:var(--danger);margin-top:4px}

.pagination{display:flex;gap:6px;flex-wrap:wrap}

.pagination .page{
    padding:5px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text-soft);
    text-decoration:none;
    font-size:.85em;
    background:#fff;
}

.pagination .page:hover{background:#f3f6fc}

.pagination .page.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.muted{color:var(--text-mute)}

/* =====================================================================
   v2.0 UI POLISH — Componentes SaaS profesionales (no toca lo previo)
   ===================================================================== */

/* Hero / page title con halo morado */
.page-hero{
    background:linear-gradient(135deg,#f7f5ff 0%,#f5f3ff 100%);
    border:1px solid #e3e0f6;
    border-radius:18px;
    padding:18px 22px;
    box-shadow:0 4px 18px rgba(124,58,237,.06);
    margin-bottom:20px;
}
.page-hero h1{margin:0;font-weight:700;letter-spacing:-0.01em}
.page-hero .lead{color:#6b6593;margin-top:4px}

/* KPI cards mejoradas */
.kpi-card{
    background:#fff;
    border:1px solid #ebe9f7;
    border-radius:16px;
    padding:16px 18px;
    position:relative;
    overflow:hidden;
    box-shadow:0 1px 0 rgba(15,23,42,.02),0 12px 30px -18px rgba(124,58,237,.18);
    transition:transform .15s ease,box-shadow .15s ease;
}
.kpi-card:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(15,23,42,.02),0 18px 36px -16px rgba(124,58,237,.28)}
.kpi-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,#8b5cf6,#8b5cf6);
}
.kpi-card .kpi-label{color:#6b6593;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.kpi-card .kpi-value{font-size:1.8rem;font-weight:700;margin-top:6px;color:#1e1b4b}
.kpi-card .kpi-delta{font-size:.78rem;margin-top:4px}
.kpi-card .kpi-delta.up{color:#16a34a}
.kpi-card .kpi-delta.down{color:#dc2626}

/* Badges soft (paridad estado SaaS) */
.badge-soft{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.badge-soft.success{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.badge-soft.warning{background:#fffbeb;color:#92400e;border-color:#fde68a}
.badge-soft.danger {background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.badge-soft.info   {background:#eef2ff;color:#6d28d9;border-color:#c7d2fe}
.badge-soft.neutral{background:#f3f4f6;color:#374151;border-color:#e5e7eb}

/* Tablas refinadas */
.table-modern{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.table-modern thead th{
    text-align:left;font-weight:600;color:#544f7a;background:#faf9fe;
    border-bottom:1px solid #ece9f6;padding:.7rem .75rem;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.04em
}
.table-modern tbody td{padding:.7rem .75rem;border-bottom:1px solid #f1eff8;color:#2a2750}
.table-modern tbody tr:hover td{background:#fbfaff}

/* Empty state */
.empty-state{
    text-align:center;padding:42px 16px;color:#6b6593;
    background:linear-gradient(180deg,#fafaff,transparent);
    border:1px dashed #ddd6fe;border-radius:14px
}
.empty-state .es-icon{font-size:2.2rem;opacity:.7;margin-bottom:6px}
.empty-state .es-title{font-weight:600;color:#312e81;margin-bottom:4px}

/* Form grid */
.form-grid{display:grid;gap:14px}
.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){
    .form-grid.cols-2,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr}
}

/* Tabs SaaS */
.tabs{display:flex;gap:6px;border-bottom:1px solid #ece9f6;margin-bottom:14px}
.tabs a{padding:.55rem .9rem;color:#544f7a;border-radius:10px 10px 0 0;font-weight:500;text-decoration:none;border-bottom:2px solid transparent}
.tabs a:hover{background:#faf9fe}
.tabs a.active{color:#6d28d9;border-bottom-color:#8b5cf6;background:#fff}

/* Buttons size sm */
.btn-sm{padding:.32rem .65rem;font-size:.82rem;border-radius:8px}

/* Stat divider for hero */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
@media (max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* Sticky-summary panel (postventa side bar) */
.sticky-panel{position:sticky;top:16px}

/* ============================================================
   PREMIUM POLISH LAYER (v=20260517-premium)
   Mejoras finas que se aplican a TODO el panel/landing/auth.
   ============================================================ */

/* Scrollbar refinada — oculta en la mayoria de elementos, visible en html */
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
*::-webkit-scrollbar-track{display:none!important}
*::-webkit-scrollbar-thumb{display:none!important}
*::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(139,92,246,.6), rgba(124,58,237,.6));
    background-clip:padding-box;
    border:2px solid transparent;
}

/* Scrollbar vertical visible en html — landing y paginas publicas */
html {
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}
html::-webkit-scrollbar {
    width: 8px !important;
    height: 0 !important;
    display: block !important;
}
html::-webkit-scrollbar-track {
    display: block !important;
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    display: block !important;
    background: rgba(148,163,184,.35);
    border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover {
    background: rgba(124,58,237,.5);
}

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.35) transparent;
}

.app-sidebar::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    background-clip:padding-box;
}

/* Selection global */
::selection{background:rgba(124,58,237,.22);color:#1e1b4b}

/* Focus-visible accesibilidad + premium */
:focus-visible{outline:none}
.btn:focus-visible,
a.btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible{
    box-shadow:0 0 0 3px rgba(139,92,246,.18), 0 0 0 1px rgba(139,92,246,.65);
}
.app-sidebar nav a:focus-visible{
    outline:2px solid rgba(167,139,250,.5);
    outline-offset:2px;
}

/* Sidebar: barra acento izquierda en activo */
.app-sidebar nav a{position:relative; transition:background .18s ease, border-color .18s ease, transform .18s ease}
.app-sidebar nav a:hover{transform:translateX(2px)}
.app-sidebar nav a.active::before{
    content:"";
    position:absolute;
    left:-8px;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:3px;
    background:linear-gradient(180deg, #c4b5fd 0%, #60a5fa 100%);
    box-shadow:0 0 12px rgba(167,139,250,.6);
}

/* Cards: lift suave en hover (no toca .landing-* ni .kpi-card que ya tienen estilos) */
.card{transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease}
.card:hover{box-shadow:var(--shadow-md); border-color:#dde4f0}

/* Botones: micro-interaccion */
.btn{transition:background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease, filter .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary:hover{box-shadow:0 14px 28px rgba(124,58,237,.28)}
.btn-primary:active{box-shadow:0 6px 14px rgba(124,58,237,.24)}

/* Inputs polish */
.input,.select,.textarea{transition:border-color .16s ease, box-shadow .16s ease, background .16s ease}
.input::placeholder,.textarea::placeholder{color:#9aa3b8}
.input:disabled,.select:disabled,.textarea:disabled{
    background:#f5f7fb;color:#94a3b8;cursor:not-allowed;border-color:#e1e7f0;
}

/* Input con icono */
.input-icon{position:relative}
.input-icon > .input{padding-left:38px}
.input-icon > .ico{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    color:var(--text-mute);font-weight:700;pointer-events:none;font-size:.95rem;
}

/* Topbar: avatar circle */
.app-topbar .user .avatar{
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%);
    color:#fff;font-weight:700;display:grid;place-items:center;
    box-shadow:0 6px 14px rgba(139,92,246,.32);font-size:.85rem;
}

/* Tabla con header sticky (envolver en .table-wrap si se quiere scroll) */
.table-wrap{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:auto;
    max-height:calc(100vh - 220px);
}
.table-wrap > .table-modern thead th{
    position:sticky;top:0;z-index:2;
    background:#faf9fe;
}

/* Filas de tabla con foco accesible */
.table-modern tbody tr{transition:background .14s ease}
.table-modern tbody tr:focus-within td{background:#f3f0ff}

/* Estados de fila */
.table-modern tbody tr.row-warning td{background:#fffaf0}
.table-modern tbody tr.row-danger td{background:#fff5f5}
.table-modern tbody tr.row-success td{background:#f0fdf6}

/* Spinner */
.spinner{
    display:inline-block;width:18px;height:18px;border-radius:50%;
    border:2px solid rgba(139,92,246,.22);
    border-top-color:#8b5cf6;
    animation:pv-spin .8s linear infinite;vertical-align:middle;
}
.spinner.sm{width:14px;height:14px;border-width:2px}
.spinner.lg{width:28px;height:28px;border-width:3px}
@keyframes pv-spin{to{transform:rotate(360deg)}}

/* Skeleton */
.skeleton{
    background:linear-gradient(90deg, #eef0f6 0%, #f7f8fc 50%, #eef0f6 100%);
    background-size:200% 100%;
    animation:pv-shimmer 1.2s ease-in-out infinite;
    border-radius:8px; color:transparent;
}
@keyframes pv-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Alerts con entrada suave + barra acento izquierda */
.alert{
    position:relative;
    padding:.75rem 1rem .75rem 1.1rem;
    border-radius:var(--radius-md);
    border:1px solid transparent;
    margin-bottom:14px;
    animation:pv-alert-in .28s ease-out;
    overflow:hidden;
}
.alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-success::before{background:#10b981}
.alert-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-danger::before{background:#ef4444}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-warning::before{background:#f59e0b}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.alert-info::before{background:#8b5cf6}
@keyframes pv-alert-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Badges base (estado pill) */
.badge{
    display:inline-flex;align-items:center;gap:.32rem;
    padding:.16rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;
    letter-spacing:.02em;border:1px solid transparent;line-height:1.4;
}
.badge.success{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.badge.warning{background:#fffbeb;color:#92400e;border-color:#fde68a}
.badge.danger {background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.badge.info   {background:#eef2ff;color:#6d28d9;border-color:#c7d2fe}
.badge.neutral{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}

/* Page header (titulo + acciones) */
.page-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    margin-bottom:18px;flex-wrap:wrap;
}
.page-head .h{margin:0}
.page-head .h h1{margin:0;font-size:1.5rem;letter-spacing:-.01em}
.page-head .h .crumb{color:var(--text-mute);font-size:.8rem;margin-bottom:2px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Toolbar de filtros */
.toolbar{
    display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
    padding:12px 14px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:14px;
}
.toolbar .form-group{margin:0;min-width:160px}
.toolbar .grow{flex:1;min-width:200px}

/* Card variants */
.card.is-elev{box-shadow:var(--shadow-md)}
.card.is-flat{box-shadow:none;border-color:#eef1f7}
.card .card-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:-18px -18px 14px;padding:14px 18px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,#fbfcff 0%, transparent 100%);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.card .card-head h2,.card .card-head h3{margin:0;font-size:1rem}
.card .card-actions{display:flex;gap:8px}

/* KPI mejorado: hover lift */
.kpi-card{transition:box-shadow .22s ease, transform .22s ease}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Sticky panel mejorado en pantalla pequeña */
@media (max-width:980px){.sticky-panel{position:static}}

/* Acceso rapido a links de tabla */
.table-modern a{color:#6d28d9;text-decoration:none;font-weight:600}
.table-modern a:hover{color:#3730a3;text-decoration:underline}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
    .app-sidebar nav a:hover{transform:none}
}

/* Print */
@media print{
    .app-sidebar,.app-topbar,.btn,.landing-topbar{display:none !important}
    .app-main{margin:0}
    body{background:#fff;color:#000}
    .card{box-shadow:none;border:1px solid #ccc}
}

/* Auth card: glow sutil */
.auth-card{position:relative}
.auth-card::before{
    content:"";position:absolute;inset:-1px;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(124,58,237,.35), rgba(167,139,250,.25));
    z-index:-1;filter:blur(18px);opacity:.55;pointer-events:none;
}

/* Tag */
.tag{
    display:inline-flex;align-items:center;padding:.16rem .5rem;
    border-radius:6px;background:#eef0f6;color:var(--text-soft);
    font-size:.72rem;font-weight:600;border:1px solid #e2e6ee;
}

/* End premium polish */

/* ============================================================
   Landing POS InsertIT v3
   ============================================================ */
html{scroll-behavior:smooth}

.landing-body{
    margin:0;
    color:#0f172a;
    font-family:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
    background:#f8fafc;
}

.landing-page{
    min-height:100vh;
    overflow:hidden;
    background:
        linear-gradient(180deg, #070b1a 0, #070b1a 180px, #f8fafc 180px, #f8fafc 100%);
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page p{
    letter-spacing:0;
}

.landing-page *{
    letter-spacing:0 !important;
}

.landing-topbar{
    position:sticky;
    top:12px;
    z-index:60;
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:10px 12px;
    border:1px solid rgba(226,232,240,.18);
    border-radius:8px;
    background:rgba(7,11,26,.78);
    box-shadow:0 18px 38px rgba(2,6,23,.26);
    backdrop-filter:none;
}

.landing-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#ffffff;
    font-weight:800;
    text-decoration:none;
}

.landing-brand:hover{
    color:#ffffff;
    opacity:.92;
}

.landing-brand-banner{
    width:auto;
    height:36px;
    max-width:150px;
    display:block;
}

.landing-brand span{
    white-space:nowrap;
    color:#ffffff;
    font-size:.98rem;
}

.landing-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    flex:1;
}

.landing-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:9px 11px;
    border-radius:8px;
    color:#dbeafe;
    font-weight:700;
    font-size:.88rem;
    text-decoration:none;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.landing-nav a:hover{
    background:rgba(255,255,255,.08);
    color:#ffffff;
    transform:translateY(-1px);
}

.landing-nav .landing-nav-quote{
    margin-left:6px;
    padding-inline:16px;
    color:#ffffff;
    background:linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    box-shadow:0 12px 24px rgba(124,58,237,.35);
}

.landing-nav .landing-nav-quote:hover{
    background:linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
}

.landing-nav-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid rgba(226,232,240,.24);
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:#ffffff;
    cursor:pointer;
}

.landing-nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    margin:4px auto;
    border-radius:999px;
    background:#ffffff;
    transition:transform .18s ease, opacity .18s ease;
}

.landing-nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.landing-nav-toggle.is-open span:nth-child(2){opacity:0}
.landing-nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.landing-hero{
    width:min(1180px, calc(100% - 32px));
    margin:28px auto 0;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(420px, .9fr);
    gap:34px;
    align-items:center;
    padding:74px 0 86px;
    position:relative;
}

.landing-hero::before{
    content:"";
    position:absolute;
    inset:-92px -80px 0 -80px;
    height:auto;
    background:
        linear-gradient(135deg, rgba(124,58,237,.44) 0%, rgba(34,211,238,.18) 45%, rgba(16,185,129,.08) 100%),
        linear-gradient(180deg, #070b1a 0%, #0b1027 100%);
    border-radius:0;
    transform:skewY(-2deg);
    transform-origin:left top;
    z-index:0;
}

.landing-hero-copy,
.landing-hero-visual{
    position:relative;
    z-index:1;
}

.landing-hero-copy{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.landing-page .landing-hero-copy::after{
    display:none;
}

.landing-kicker,
.landing-section-kicker{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    min-height:30px;
    margin:0;
    padding:6px 11px;
    border:1px solid rgba(34,211,238,.28);
    border-radius:999px;
    background:rgba(34,211,238,.1);
    color:#a5f3fc;
    font-size:.78rem;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0;
}

.landing-hero-title{
    max-width:780px;
    margin:18px 0 0;
    color:#ffffff;
    font-size:3.65rem;
    line-height:1.04;
    font-weight:800;
}

.landing-page .landing-hero-copy .landing-hero-title{
    max-width:780px;
    margin:18px 0 0;
    color:#ffffff;
    font-family:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
    font-size:3.65rem;
    line-height:1.04;
    font-weight:800;
    letter-spacing:0;
}

.landing-lead{
    max-width:650px;
    margin:18px 0 0;
    color:#dbeafe;
    font-size:1.12rem;
    line-height:1.7;
}

.landing-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.landing-primary-btn,
.landing-secondary-btn,
.landing-plan-flow{
    min-height:46px;
    border-radius:8px;
    padding:12px 18px;
    font-weight:800;
    text-align:center;
    white-space:normal;
}

.landing-primary-btn{
    color:#ffffff;
    border:1px solid rgba(168,85,247,.42);
    background:linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    box-shadow:0 16px 32px rgba(124,58,237,.35);
}

.landing-primary-btn:hover{
    color:#ffffff;
    background:linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    transform:translateY(-2px);
}

.landing-secondary-btn{
    color:#e0f2fe;
    border:1px solid rgba(226,232,240,.28);
    background:rgba(255,255,255,.06);
}

.landing-secondary-btn:hover{
    color:#ffffff;
    border-color:rgba(34,211,238,.55);
    background:rgba(34,211,238,.12);
    transform:translateY(-2px);
}

.landing-trust-badges{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:24px;
}

.landing-trust-badges span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:8px 11px;
    border:1px solid rgba(226,232,240,.16);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#e2e8f0;
    font-size:.82rem;
    font-weight:700;
}

.landing-trust-badges span::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 0 3px rgba(16,185,129,.16);
}

.landing-hero-visual{
    animation:landing-float 7s ease-in-out infinite;
}

@keyframes landing-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

.pos-mockup{
    overflow:hidden;
    border:1px solid rgba(226,232,240,.22);
    border-radius:8px;
    background:#0f172a;
    box-shadow:0 28px 70px rgba(2,6,23,.46);
}

.pos-window-top{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:10px 14px;
    border-bottom:1px solid rgba(226,232,240,.12);
    background:rgba(255,255,255,.06);
    color:#cbd5e1;
    font-size:.82rem;
}

.pos-window-top span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#475569;
}

.pos-window-top span:nth-child(1){background:#fb7185}
.pos-window-top span:nth-child(2){background:#fbbf24}
.pos-window-top span:nth-child(3){background:#34d399}
.pos-window-top strong{margin-left:6px;color:#f8fafc}

.pos-window-body{
    display:grid;
    grid-template-columns:112px 1fr;
    min-height:410px;
}

.pos-sidebar{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px 10px;
    border-right:1px solid rgba(226,232,240,.1);
    background:#0b1225;
}

.pos-sidebar span{
    padding:9px 10px;
    border-radius:8px;
    color:#94a3b8;
    font-size:.78rem;
    font-weight:800;
}

.pos-sidebar .active{
    color:#ffffff;
    background:linear-gradient(135deg, rgba(124,58,237,.88), rgba(139,92,246,.78));
}

.pos-main{
    padding:16px;
    background:
        linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(2,6,23,.94) 100%);
}

.pos-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border:1px solid rgba(226,232,240,.12);
    border-radius:8px;
    background:rgba(255,255,255,.06);
}

.pos-toolbar small,
.pos-kpi span,
.pos-status span{
    display:block;
    color:#94a3b8;
    font-size:.72rem;
    font-weight:700;
}

.pos-toolbar strong{
    display:block;
    margin-top:3px;
    color:#ffffff;
    font-size:1.18rem;
}

.pos-toolbar > span{
    flex:0 0 auto;
    padding:7px 9px;
    border-radius:999px;
    color:#bbf7d0;
    background:rgba(16,185,129,.14);
    border:1px solid rgba(16,185,129,.28);
    font-size:.72rem;
    font-weight:800;
}

.pos-grid{
    display:grid;
    grid-template-columns:1fr .85fr;
    gap:14px;
    margin-top:14px;
}

.pos-ticket,
.pos-dashboard{
    min-height:255px;
    padding:14px;
    border:1px solid rgba(226,232,240,.12);
    border-radius:8px;
    background:#f8fafc;
}

.pos-row,
.pos-total,
.pos-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.pos-row{
    padding:10px 0;
    border-bottom:1px solid #e2e8f0;
    color:#334155;
    font-size:.82rem;
}

.pos-row strong{color:#0f172a}

.pos-total{
    margin-top:12px;
    padding:12px 0 10px;
    color:#0f172a;
    font-size:1rem;
}

.pos-total strong{
    color:#7c3aed;
    font-size:1.42rem;
}

.pos-ticket button{
    width:100%;
    min-height:42px;
    margin-top:8px;
    border:0;
    border-radius:8px;
    color:#ffffff;
    background:#10b981;
    font-weight:800;
}

.pos-dashboard{
    background:#ffffff;
}

.pos-kpi{
    padding:12px;
    border-radius:8px;
    background:#f1f5f9;
}

.pos-kpi strong{
    display:block;
    margin-top:5px;
    color:#0f172a;
    font-size:1.3rem;
}

.pos-bars{
    height:116px;
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:18px 0;
}

.pos-bars i{
    flex:1;
    border-radius:8px 8px 0 0;
    background:linear-gradient(180deg, #c084fc 0%, #7c3aed 100%);
}

.pos-status{
    padding:10px;
    border-radius:8px;
    background:#ecfdf5;
}

.pos-status strong{color:#047857}

.landing-section,
.landing-final-cta{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
}

.landing-section{
    padding:74px 0 0;
}

.landing-section-head{
    max-width:760px;
    margin-bottom:24px;
}

.landing-section-head h2,
.landing-trust-copy h2,
.landing-final-cta h2{
    margin:12px 0 0;
    color:#0f172a;
    font-size:2.32rem;
    line-height:1.12;
    font-weight:800;
}

.landing-section-head p,
.landing-trust-copy p,
.landing-final-cta p{
    margin:12px 0 0;
    color:#475569;
    font-size:1rem;
    line-height:1.7;
}

.landing-section .landing-section-kicker,
.landing-final-cta .landing-section-kicker,
.landing-trust-copy .landing-section-kicker{
    color:#5b21b6;
    border-color:#ddd6fe;
    background:#f5f3ff;
}

.landing-demo-grid,
.landing-feature-grid,
.landing-industry-grid,
.landing-plan-grid,
.landing-compare-grid,
.landing-trust-grid,
.landing-faq-list{
    display:grid;
    gap:16px;
}

.landing-demo-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
.landing-feature-grid{grid-template-columns:repeat(5, minmax(0, 1fr))}
.landing-industry-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
.landing-plan-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
.landing-compare-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}

.landing-demo-card,
.landing-feature-card,
.landing-industry-card,
.landing-plan-card,
.landing-compare-card,
.landing-faq-item{
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.landing-demo-card:hover,
.landing-feature-card:hover,
.landing-industry-card:hover,
.landing-plan-card:hover,
.landing-compare-card:hover{
    transform:translateY(-4px);
    border-color:#c4b5fd;
    box-shadow:0 22px 44px rgba(15,23,42,.1);
}

.landing-demo-card{
    padding:14px;
}

.landing-mini-screen{
    overflow:hidden;
    min-height:160px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#0f172a;
}

.mini-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    color:#e2e8f0;
    font-size:.72rem;
    font-weight:800;
}

.mini-top span{
    width:58px;
    height:10px;
    border-radius:999px;
    background:#334155;
}

.mini-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px;
}

.mini-content i,
.mini-panel{
    display:block;
    border-radius:8px;
    background:rgba(255,255,255,.1);
}

.mini-content i{height:38px}
.mini-content i:nth-child(1){background:rgba(34,211,238,.28)}
.mini-content i:nth-child(2){background:rgba(124,58,237,.28)}
.mini-content i:nth-child(3){background:rgba(16,185,129,.28)}

.mini-panel{
    grid-column:1 / -1;
    min-height:58px;
    background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
}

.landing-mini-screen.is-inventory .mini-content i:nth-child(1),
.landing-mini-screen.is-cash .mini-content i:nth-child(3),
.landing-mini-screen.is-admin .mini-content i:nth-child(2){
    background:#10b981;
}

.landing-status-pill{
    display:inline-flex;
    margin-top:14px;
    min-height:28px;
    align-items:center;
    padding:6px 9px;
    border-radius:999px;
    color:#075985;
    background:#ecfeff;
    border:1px solid #a5f3fc;
    font-size:.75rem;
    font-weight:800;
}

.landing-demo-card h3,
.landing-feature-card h3,
.landing-industry-card h3,
.landing-plan-card h3,
.landing-compare-card h3{
    margin:12px 0 0;
    color:#0f172a;
    font-size:1.05rem;
    font-weight:800;
}

.landing-demo-card p,
.landing-feature-card p,
.landing-industry-card p,
.landing-plan-card p,
.landing-compare-card li,
.landing-faq-item p{
    color:#475569;
    font-size:.92rem;
    line-height:1.6;
}

.landing-demo-card p,
.landing-feature-card p,
.landing-industry-card p{
    margin:8px 0 0;
}

.landing-feature-card,
.landing-industry-card{
    padding:18px;
}

.landing-card-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:8px;
    color:#ffffff;
    background:linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
    font-weight:900;
    box-shadow:0 14px 28px rgba(124,58,237,.22);
}

.landing-industry-card{
    min-height:150px;
    background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.landing-pricing{
    padding-top:86px;
}

.landing-plan-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:20px;
}

.landing-page .landing-plan-card::before{
    display:none;
}

.landing-plan-card.is-featured{
    border-color:#7c3aed;
    box-shadow:0 22px 54px rgba(124,58,237,.2);
    transform:translateY(-6px);
}

.landing-plan-card.is-featured::before{
    content:"";
    display:block;
    position:absolute;
    inset:-1px -1px auto -1px;
    height:5px;
    border-radius:8px 8px 0 0;
    background:linear-gradient(90deg, #7c3aed 0%, #c084fc 100%);
}

.landing-plan-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 14px;
}

.landing-plan-tag,
.landing-plan-iva{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:6px 9px;
    border-radius:999px;
    font-size:.74rem;
    font-weight:900;
}

.landing-plan-tag{
    color:#5b21b6;
    background:#f5f3ff;
    border:1px solid #ddd6fe;
}

.landing-plan-iva{
    color:#047857;
    background:#ecfdf5;
    border:1px solid #a7f3d0;
}

.landing-plan-term,
.landing-plan-month,
.landing-plan-note{
    margin:0;
}

.landing-plan-price{
    margin-top:14px;
    color:#0f172a;
    font-size:2.25rem;
    line-height:1;
    font-weight:900;
}

.landing-plan-month{
    margin-top:8px;
    color:#0f766e;
    font-weight:800;
}

.landing-plan-note{
    margin-top:12px;
}

.landing-plan-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:18px 0;
    padding:0;
    list-style:none;
}

.landing-plan-list li{
    position:relative;
    padding-left:22px;
    color:#334155;
    font-size:.9rem;
    line-height:1.45;
}

.landing-plan-list li::before{
    content:"";
    position:absolute;
    left:2px;
    top:.42em;
    width:10px;
    height:6px;
    border-left:2px solid #10b981;
    border-bottom:2px solid #10b981;
    transform:rotate(-45deg);
}

.landing-plan-save{
    margin-top:auto;
    padding:10px 11px;
    border-radius:8px;
    color:#047857;
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    font-size:.84rem;
    font-weight:900;
}

.landing-plan-save.is-neutral{
    color:#475569;
    background:#f8fafc;
    border-color:#e2e8f0;
}

.landing-plan-flow{
    width:100%;
    margin-top:14px;
    color:#ffffff;
    background:linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border:1px solid rgba(124,58,237,.2);
    box-shadow:0 14px 26px rgba(139,92,246,.22);
}

.landing-plan-flow:hover{
    color:#ffffff;
    background:linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    transform:translateY(-2px);
}

.landing-compare-card{
    padding:22px;
}

.landing-compare-card ul{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:16px 0 0;
    padding:0;
    list-style:none;
}

.landing-compare-card li{
    position:relative;
    padding-left:23px;
}

.landing-compare-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:.5em;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#94a3b8;
}

.landing-compare-card.is-after{
    border-color:#a7f3d0;
    background:linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.landing-compare-card.is-after li::before{background:#10b981}
.landing-compare-card.is-before li::before{background:#ef4444}

.landing-steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    position:relative;
}

.landing-steps article{
    padding:22px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.landing-steps span{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:8px;
    color:#ffffff;
    background:#7c3aed;
    font-weight:900;
}

.landing-steps h3{
    margin:14px 0 0;
    color:#0f172a;
    font-size:1.1rem;
}

.landing-steps p{
    margin:8px 0 0;
    color:#475569;
    line-height:1.6;
}

.landing-trust-section{
    display:grid;
    grid-template-columns:minmax(0, .86fr) minmax(0, 1fr);
    gap:28px;
    align-items:center;
    margin-top:76px;
    padding:34px;
    border:1px solid #dbeafe;
    border-radius:8px;
    background:linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
    box-shadow:0 18px 38px rgba(15,23,42,.08);
}

.landing-trust-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.landing-trust-grid span{
    display:flex;
    align-items:center;
    min-height:52px;
    padding:13px 14px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#ffffff;
    color:#0f172a;
    font-weight:800;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.landing-faq-list{
    grid-template-columns:1fr;
    max-width:860px;
}

.landing-faq-item{
    overflow:hidden;
}

.landing-faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:58px;
    padding:0 18px;
    color:#0f172a;
    font-weight:900;
    cursor:pointer;
    list-style:none;
}

.landing-faq-item summary::-webkit-details-marker{display:none}

.landing-faq-item summary span{
    width:22px;
    height:22px;
    border-radius:8px;
    border:1px solid #cbd5e1;
    position:relative;
    flex:0 0 auto;
}

.landing-faq-item summary span::before,
.landing-faq-item summary span::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:2px;
    border-radius:999px;
    background:#7c3aed;
    transform:translate(-50%, -50%);
}

.landing-faq-item summary span::after{
    transform:translate(-50%, -50%) rotate(90deg);
}

.landing-faq-item[open] summary span::after{display:none}

.landing-faq-item p{
    margin:0;
    padding:0 18px 18px;
}

.landing-final-cta{
    margin-top:82px;
    margin-bottom:54px;
    padding:42px;
    border-radius:8px;
    color:#ffffff;
    background:
        linear-gradient(135deg, rgba(124,58,237,.92) 0%, rgba(139,92,246,.9) 56%, rgba(6,182,212,.84) 100%),
        #070b1a;
    box-shadow:0 28px 64px rgba(139,92,246,.2);
}

.landing-final-cta h2,
.landing-final-cta p{
    color:#ffffff;
}

.landing-final-cta .landing-section-kicker{
    color:#dffafe;
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.24);
}

.landing-final-cta small{
    display:block;
    margin-top:20px;
    color:#e0f2fe;
    font-weight:800;
}

.has-landing-observer .landing-reveal{
    opacity:0;
    transform:translateY(18px);
}

.has-landing-observer .landing-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
    transition:opacity .5s ease, transform .5s ease;
}

@media (max-width:1180px){
    .landing-hero{
        grid-template-columns:1fr;
        padding-top:56px;
    }

    .landing-hero::before{height:auto}

    .landing-hero-visual{
        max-width:720px;
        width:100%;
        margin:0 auto;
    }

    .landing-demo-grid,
    .landing-feature-grid,
    .landing-industry-grid,
    .landing-plan-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:980px){
    .landing-topbar{
        width:calc(100% - 24px);
    }

    .landing-nav-toggle{
        display:block;
        flex:0 0 auto;
    }

    .landing-nav{
        position:absolute;
        left:0;
        right:0;
        top:calc(100% + 8px);
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:10px;
        border:1px solid rgba(226,232,240,.18);
        border-radius:8px;
        background:rgba(7,11,26,.96);
        box-shadow:0 18px 38px rgba(2,6,23,.32);
    }

    .landing-nav.is-open{
        display:flex;
    }

    .landing-nav a{
        justify-content:flex-start;
        width:100%;
    }

    .landing-nav .landing-nav-quote{
        margin-left:0;
        justify-content:center;
    }

    .landing-hero-title,
    .landing-page .landing-hero-copy .landing-hero-title{
        font-size:2.85rem;
    }

    .landing-trust-section,
    .landing-compare-grid{
        grid-template-columns:1fr;
    }

    .landing-steps{
        grid-template-columns:1fr;
    }
}

@media (max-width:720px){
    .landing-page{
        background:
            linear-gradient(180deg, #070b1a 0, #070b1a 130px, #f8fafc 130px, #f8fafc 100%);
    }

    .landing-topbar{
        top:8px;
        padding:8px;
    }

    .landing-brand-banner{
        height:32px;
        max-width:132px;
    }

    .landing-brand span{
        display:none;
    }

    .landing-hero,
    .landing-section,
    .landing-final-cta{
        width:calc(100% - 24px);
    }

    .landing-hero{
        gap:24px;
        margin-top:20px;
        padding:34px 0 42px;
    }

    .landing-hero::before{
        inset:-72px -24px 0 -24px;
        height:auto;
        transform:none;
    }

    .landing-hero-title,
    .landing-page .landing-hero-copy .landing-hero-title{
        font-size:2.05rem;
        line-height:1.06;
    }

    .landing-lead{
        font-size:1rem;
        line-height:1.55;
    }

    .landing-hero-actions .btn{
        width:100%;
    }

    .landing-trust-badges{
        display:none;
    }

    .landing-hero-visual{
        height:118px;
        max-height:118px;
        overflow:hidden;
    }

    .pos-window-body{
        grid-template-columns:1fr;
        min-height:260px;
    }

    .pos-sidebar{
        flex-direction:row;
        overflow:auto;
        border-right:0;
        border-bottom:1px solid rgba(226,232,240,.1);
    }

    .pos-sidebar span{
        flex:0 0 auto;
    }

    .pos-grid,
    .landing-demo-grid,
    .landing-feature-grid,
    .landing-industry-grid,
    .landing-plan-grid,
    .landing-trust-grid{
        grid-template-columns:1fr;
    }

    .landing-section{
        padding-top:30px;
    }

    .landing-section#demo{
        margin-top:-60px;
    }

    .landing-section-head h2,
    .landing-trust-copy h2,
    .landing-final-cta h2{
        font-size:1.78rem;
    }

    .landing-plan-card.is-featured{
        transform:none;
    }

    .landing-trust-section,
    .landing-final-cta{
        padding:24px;
    }
}

@media (max-width:420px){
    .landing-hero-title,
    .landing-page .landing-hero-copy .landing-hero-title{
        font-size:2rem;
    }

    .landing-plan-price{
        font-size:2rem;
    }

    .landing-faq-item summary{
        padding:0 14px;
    }

    .landing-faq-item p{
        padding:0 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce){
    .landing-hero-visual{animation:none}
    .landing-demo-card:hover,
    .landing-feature-card:hover,
    .landing-industry-card:hover,
    .landing-plan-card:hover,
    .landing-compare-card:hover,
    .landing-primary-btn:hover,
    .landing-secondary-btn:hover,
    .landing-plan-flow:hover{
        transform:none;
    }
}

/* ============================================================
   20260523 responsive polish: panel + landing producto real
   ============================================================ */

*{letter-spacing:0}

.topbar-left{
    display:flex;
    align-items:center;
    min-width:0;
    gap:12px;
}

.app-menu-toggle{
    display:none;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    border:1px solid var(--border-2);
    border-radius:8px;
    background:#ffffff;
    cursor:pointer;
}

.app-menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    margin:3px 0;
    border-radius:999px;
    background:#172033;
    transition:transform .18s ease,opacity .18s ease;
}

.app-menu-toggle.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.app-menu-toggle.is-open span:nth-child(2){opacity:0}
.app-menu-toggle.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.app-sidebar-backdrop{
    display:none;
}

.dashboard-head{
    align-items:center;
}

.dashboard-date{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 11px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#ffffff;
    color:var(--text-mute);
    font-size:.82rem;
    font-weight:800;
}

.dashboard-kpis{
    align-items:stretch;
}

.dashboard-kpi{
    min-height:134px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.dashboard-kpi .kpi-value{
    overflow-wrap:anywhere;
}

.landing-panel-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.landing-panel-card{
    overflow:hidden;
    border:1px solid #dbe3ef;
    border-radius:8px;
    background:#ffffff;
    box-shadow:0 16px 34px rgba(15,23,42,.08);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.landing-panel-card:hover{
    transform:translateY(-3px);
    border-color:#b7c7db;
    box-shadow:0 22px 46px rgba(15,23,42,.12);
}

.landing-panel-card img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    background:#0f172a;
}

.landing-panel-card div{
    padding:16px;
}

.landing-panel-card h3{
    margin:0;
    color:#0f172a;
    font-size:1rem;
    font-weight:800;
}

.landing-panel-card p{
    margin:8px 0 0;
    color:#475569;
    font-size:.92rem;
    line-height:1.55;
}

@media (max-width:1180px){
    .landing-panel-grid{grid-template-columns:1fr}
    .landing-panel-card{
        display:grid;
        grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);
        align-items:center;
    }
}

@media (max-width:980px){
    body.is-sidebar-open{overflow:hidden}

    .app-shell{display:block}

    .app-sidebar{
        position:fixed;
        inset:0 auto 0 0;
        left:auto;
        width:min(86vw, var(--sidebar-w));
        max-width:340px;
        height:100dvh;
        z-index:80;
        transform:translateX(-102%);
        transition:transform .22s ease;
        box-shadow:28px 0 60px rgba(2,6,23,.28);
    }

    .app-sidebar.open{
        left:auto;
        transform:translateX(0);
    }

    .app-sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:70;
        background:rgba(15,23,42,.48);
        opacity:0;
        pointer-events:none;
        transition:opacity .18s ease;
    }

    body.is-sidebar-open .app-sidebar-backdrop{
        opacity:1;
        pointer-events:auto;
    }

    .app-menu-toggle{display:inline-flex}

    .app-topbar{
        min-height:62px;
        height:auto;
        gap:12px;
        padding:10px 14px;
    }

    .app-topbar .crumbs{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .app-content{
        padding:16px;
    }

    .table-wrap{
        max-height:none;
    }

    .table{
        min-width:680px;
    }
}

@media (max-width:720px){
    .app-topbar .user{
        gap:8px;
    }

    .app-topbar .user .who{
        display:none;
    }

    .app-topbar .user .avatar{
        width:34px;
        height:34px;
        font-size:.78rem;
    }

    .app-content{
        padding:12px;
    }

    .page-head{
        align-items:flex-start;
    }

    .page-head .h h1{
        font-size:1.28rem;
        line-height:1.2;
    }

    .dashboard-date{
        min-height:30px;
        font-size:.78rem;
    }

    .dashboard-kpi{
        min-height:120px;
        padding:14px;
    }

    .dashboard-kpi .kpi-value{
        font-size:1.5rem;
    }

    .card{
        padding:14px;
    }

    .row.between{
        align-items:flex-start;
    }

    .landing-panel-card{
        display:block;
    }

    .landing-panel-card div{
        padding:14px;
    }
}

@media (max-width:420px){
    .app-menu-toggle{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .app-topbar{
        padding-inline:10px;
    }

    .app-content .btn{
        width:100%;
    }

    .card .card-actions,
    .page-head .actions{
        width:100%;
    }
}

/* =====================================================================
 * LANDING v2 — Tokens y sistema de diseno
 * Prefijo lv2- para no romper paneles autenticados.
 * DEPRECATED: clases landing-* legacy — limpiar tras QA
 * ===================================================================== */
.landing-body {
    --lv2-bg: #070b1a;
    --lv2-bg-2: #0f172a;
    --lv2-surface: rgba(255,255,255,0.04);
    --lv2-surface-2: rgba(255,255,255,0.07);
    --lv2-text: #f1f5f9;
    --lv2-text-dim: #cbd5e1;
    --lv2-muted: #94a3b8;
    --lv2-accent: #a855f7;
    --lv2-accent-2: #c084fc;
    --lv2-accent-gradient: linear-gradient(135deg, #a855f7 0%, #c084fc 50%, #8b5cf6 100%);
    --lv2-success: #10b981;
    --lv2-warning: #f59e0b;
    --lv2-danger: #ef4444;
    --lv2-radius-sm: 10px;
    --lv2-radius: 18px;
    --lv2-radius-lg: 28px;
    --lv2-shadow: 0 8px 30px rgba(0,0,0,0.4);
    --lv2-shadow-lg: 0 20px 60px -20px rgba(14,165,233,0.35);
    --lv2-glass-blur: 14px;
    --lv2-font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --lv2-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.landing-body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.65;
    color: var(--lv2-text);
    background: linear-gradient(180deg, var(--lv2-bg) 0%, var(--lv2-bg-2) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* ---- Skip link ---- */
.lv2-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 10px 20px;
    background: var(--lv2-accent);
    color: #fff;
    border-radius: var(--lv2-radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s;
}
.lv2-skip-link:focus {
    top: 16px;
}

/* ---- Topbar ---- */
.lv2-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: rgba(7,11,26,0.82);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lv2-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lv2-text);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.lv2-topbar-brand img {
    height: 34px;
    width: auto;
}
.lv2-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lv2-nav a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--lv2-radius-sm);
    color: var(--lv2-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
}
.lv2-nav a:hover {
    color: var(--lv2-text);
    background: var(--lv2-surface);
}
.lv2-nav a.is-active {
    color: var(--lv2-accent);
    background: rgba(14,165,233,0.1);
}
.lv2-nav-quote {
    background: var(--lv2-accent-gradient) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
}
.lv2-nav-quote:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--lv2-shadow-lg);
}
.lv2-nav-login {
    border: 1px solid rgba(255,255,255,0.2);
    margin-left: 4px;
}
.lv2-nav-login:hover {
    border-color: var(--lv2-accent);
}

/* ---- Mobile nav toggle ---- */
.lv2-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 101;
}
.lv2-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--lv2-text);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.lv2-nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.lv2-nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.lv2-nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Hero ---- */
.lv2-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px 60px;
    overflow: hidden;
}
.lv2-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -300px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.lv2-hero-copy {
    position: relative;
    z-index: 1;
}
.lv2-kicker {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(14,165,233,0.12);
    border: 1px solid rgba(14,165,233,0.25);
    border-radius: 20px;
    color: var(--lv2-accent-2);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}
.lv2-hero-title {
    font-family: var(--lv2-font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--lv2-text);
    margin: 0 0 18px;
}
.lv2-hero-title .lv2-highlight {
    background: var(--lv2-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lv2-hero-lead {
    font-size: 1.1rem;
    color: var(--lv2-text-dim);
    margin: 0 0 32px;
    max-width: 520px;
    line-height: 1.6;
}
.lv2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.lv2-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 8px;
}
.lv2-hero-stats div strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--lv2-accent-2);
    letter-spacing: -0.01em;
}
.lv2-hero-stats div span {
    font-size: 0.82rem;
    color: var(--lv2-muted);
}
.lv2-hero-visual {
    position: relative;
    z-index: 1;
}

/* ---- Botones ---- */
.lv2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--lv2-radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.2s var(--lv2-easing), box-shadow 0.2s var(--lv2-easing), opacity 0.2s;
    white-space: nowrap;
}
.lv2-btn:hover {
    transform: translateY(-2px);
}
.lv2-btn-primary {
    background: var(--lv2-accent-gradient);
    color: #fff;
    box-shadow: 0 4px 20px rgba(14,165,233,0.3);
}
.lv2-btn-primary:hover {
    box-shadow: 0 8px 30px rgba(14,165,233,0.45);
}
.lv2-btn-secondary {
    background: var(--lv2-surface-2);
    color: var(--lv2-text);
    border: 1px solid rgba(255,255,255,0.12);
}
.lv2-btn-secondary:hover {
    border-color: var(--lv2-accent);
    background: var(--lv2-surface);
}
.lv2-btn-outline {
    background: transparent;
    color: var(--lv2-text);
    border: 1px solid rgba(255,255,255,0.2);
}
.lv2-btn-outline:hover {
    border-color: var(--lv2-accent);
}

/* ---- POS Mockup (hero) ---- */
.lv2-mockup {
    background: var(--lv2-surface);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--lv2-radius-lg);
    backdrop-filter: none;
    overflow: hidden;
    box-shadow: var(--lv2-shadow-lg);
}
.lv2-mockup-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lv2-mockup-top span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.lv2-mockup-top span:nth-child(1) { background: #ef4444; }
.lv2-mockup-top span:nth-child(2) { background: #f59e0b; }
.lv2-mockup-top span:nth-child(3) { background: #10b981; }
.lv2-mockup-top strong {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--lv2-muted);
    font-weight: 500;
}
.lv2-mockup-body {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 280px;
}
.lv2-mockup-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px;
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.lv2-mockup-sidebar span {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--lv2-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.lv2-mockup-sidebar span.active {
    background: rgba(14,165,233,0.15);
    color: var(--lv2-accent-2);
    font-weight: 600;
}
.lv2-mockup-main {
    padding: 16px;
}
.lv2-mockup-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.lv2-mockup-toolbar small {
    font-size: 0.72rem;
    color: var(--lv2-muted);
    display: block;
}
.lv2-mockup-toolbar strong {
    font-size: 1rem;
    color: var(--lv2-text);
}
.lv2-mockup-toolbar span {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: rgba(16,185,129,0.15);
    color: var(--lv2-success);
    border-radius: 12px;
    font-weight: 600;
}
.lv2-mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lv2-mockup-ticket {
    background: rgba(255,255,255,0.03);
    border-radius: var(--lv2-radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lv2-mockup-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--lv2-text-dim);
}
.lv2-mockup-row strong {
    color: var(--lv2-text);
}
.lv2-mockup-total {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lv2-text);
}
.lv2-mockup-ticket button {
    margin-top: 6px;
    padding: 10px;
    background: var(--lv2-accent-gradient);
    color: #fff;
    border: none;
    border-radius: var(--lv2-radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.lv2-mockup-dash {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lv2-mockup-kpi {
    background: rgba(255,255,255,0.03);
    border-radius: var(--lv2-radius-sm);
    padding: 12px;
}
.lv2-mockup-kpi span {
    font-size: 0.72rem;
    color: var(--lv2-muted);
    display: block;
}
.lv2-mockup-kpi strong {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--lv2-accent-2);
}
.lv2-mockup-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 50px;
    padding: 6px 0;
}
.lv2-mockup-bars i {
    flex: 1;
    background: var(--lv2-accent-gradient);
    border-radius: 4px 4px 0 0;
    opacity: 0.6;
    transition: height 0.6s var(--lv2-easing);
}
.lv2-mockup-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(16,185,129,0.08);
    border-radius: var(--lv2-radius-sm);
}
.lv2-mockup-status span {
    font-size: 0.75rem;
    color: var(--lv2-success);
    font-weight: 600;
}
.lv2-mockup-status strong {
    font-size: 0.8rem;
    color: var(--lv2-text-dim);
}

/* ---- Secciones genericas ---- */
.lv2-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
}
.lv2-section-head {
    text-align: center;
    margin-bottom: 56px;
}
.lv2-section-head .lv2-kicker {
    margin-bottom: 16px;
}
.lv2-section-head h2 {
    font-family: var(--lv2-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -0.02em;
    color: var(--lv2-text);
    margin: 0 0 12px;
}
.lv2-section-head p {
    font-size: 1.05rem;
    color: var(--lv2-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Value props (3 cols) ---- */
.lv2-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.lv2-value-card {
    background: var(--lv2-surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--lv2-radius);
    padding: 32px 24px;
    transition: transform 0.25s var(--lv2-easing), border-color 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.lv2-value-card:hover {
    transform: translateY(-4px);
    border-color: var(--lv2-accent);
}
.lv2-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--lv2-radius-sm);
    background: rgba(14,165,233,0.12);
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.lv2-value-card h3 {
    font-family: var(--lv2-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--lv2-text);
    margin: 0 0 8px;
}
.lv2-value-card p {
    font-size: 0.9rem;
    color: var(--lv2-muted);
    margin: 0 0 12px;
    line-height: 1.55;
}
.lv2-value-card .lv2-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lv2-accent-2);
}

/* ---- Social proof band ---- */
.lv2-social-band {
    text-align: center;
    padding: 48px 24px;
    max-width: 1000px;
    margin: 0 auto;
}
.lv2-social-band p {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lv2-muted);
    margin-bottom: 20px;
}
.lv2-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}
.lv2-social-icons span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--lv2-text-dim);
    font-weight: 600;
}

/* ---- Features grid (5 cols) ---- */
.lv2-feature-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.lv2-feature-card {
    background: var(--lv2-surface);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--lv2-radius);
    padding: 24px 18px;
    text-align: center;
    transition: transform 0.25s var(--lv2-easing);
}
.lv2-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14,165,233,0.25);
}
.lv2-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(14,165,233,0.1);
    color: var(--lv2-accent-2);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 12px;
}
.lv2-feature-card h3 {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lv2-text);
    margin: 0 0 6px;
}
.lv2-feature-card p {
    font-size: 0.8rem;
    color: var(--lv2-muted);
    margin: 0;
    line-height: 1.45;
}

/* ---- Plans grid ---- */
.lv2-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.lv2-plan-card {
    background: var(--lv2-surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--lv2-radius);
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s var(--lv2-easing), border-color 0.25s;
}
.lv2-plan-card:hover {
    transform: translateY(-3px);
}
.lv2-plan-card.is-featured {
    border-color: var(--lv2-accent);
    background: rgba(14,165,233,0.06);
    box-shadow: var(--lv2-shadow-lg);
}
.lv2-plan-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.lv2-plan-tag {
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(14,165,233,0.15);
    color: var(--lv2-accent-2);
}
.lv2-plan-iva {
    font-size: 0.72rem;
    color: var(--lv2-muted);
    font-weight: 500;
}
.lv2-plan-card h3 {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--lv2-text);
    margin: 0 0 4px;
}
.lv2-plan-term {
    font-size: 0.82rem;
    color: var(--lv2-muted);
    margin: 0 0 16px;
}
.lv2-plan-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--lv2-text);
    letter-spacing: -0.02em;
}
.lv2-plan-monthly {
    font-size: 0.8rem;
    color: var(--lv2-muted);
    margin: 2px 0 12px;
}
.lv2-plan-note {
    font-size: 0.78rem;
    color: var(--lv2-muted);
    margin: 0 0 14px;
    font-style: italic;
}
.lv2-plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    flex: 1;
}
.lv2-plan-list li {
    padding: 6px 0;
    padding-left: 22px;
    position: relative;
    font-size: 0.85rem;
    color: var(--lv2-text-dim);
}
.lv2-plan-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--lv2-success);
    font-weight: 700;
}
.lv2-plan-save {
    padding: 8px 14px;
    background: rgba(16,185,129,0.1);
    border-radius: var(--lv2-radius-sm);
    color: var(--lv2-success);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
}
.lv2-plan-save.is-neutral {
    background: rgba(255,255,255,0.03);
    color: var(--lv2-muted);
}
.lv2-plan-btn {
    display: block;
    text-align: center;
    padding: 12px;
    background: var(--lv2-accent-gradient);
    color: #fff;
    border-radius: var(--lv2-radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}
.lv2-plan-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ---- Compare grid ---- */
.lv2-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.lv2-compare-card {
    padding: 28px 24px;
    border-radius: var(--lv2-radius);
}
.lv2-compare-card.is-before {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
}
.lv2-compare-card.is-after {
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
}
.lv2-compare-card h3 {
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0 0 12px;
    color: var(--lv2-text);
}
.lv2-compare-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lv2-compare-card li {
    padding: 6px 0;
    font-size: 0.88rem;
    color: var(--lv2-text-dim);
}
.lv2-compare-card li::before {
    display: inline-block;
    width: 18px;
    margin-right: 6px;
    font-weight: 700;
}
.lv2-compare-card.is-before li::before {
    content: '✗';
    color: var(--lv2-danger);
}
.lv2-compare-card.is-after li::before {
    content: '✓';
    color: var(--lv2-success);
}

/* ---- Steps ---- */
.lv2-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.lv2-steps article {
    padding: 24px;
}
.lv2-steps article span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lv2-accent-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.lv2-steps article h3 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--lv2-text);
    margin: 0 0 6px;
}
.lv2-steps article p {
    font-size: 0.85rem;
    color: var(--lv2-muted);
    margin: 0;
}

/* ---- Trust section ---- */
.lv2-trust-section {
    text-align: center;
}
.lv2-trust-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 800px;
    margin: 32px auto 0;
}
.lv2-trust-grid span {
    padding: 8px 18px;
    background: var(--lv2-surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;
    font-size: 0.85rem;
    color: var(--lv2-text-dim);
    font-weight: 500;
}

/* ---- FAQ ---- */
.lv2-faq-list {
    max-width: 720px;
    margin: 0 auto;
}
.lv2-faq-item {
    background: var(--lv2-surface);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--lv2-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.lv2-faq-item summary {
    padding: 18px 40px 18px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--lv2-text);
    cursor: pointer;
    position: relative;
    list-style: none;
}
.lv2-faq-item summary::-webkit-details-marker { display: none; }
.lv2-faq-item summary::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--lv2-muted);
    border-bottom: 2px solid var(--lv2-muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s;
}
.lv2-faq-item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
.lv2-faq-item p {
    padding: 0 20px 18px;
    margin: 0;
    font-size: 0.88rem;
    color: var(--lv2-muted);
    line-height: 1.55;
}

/* ---- Final CTA ---- */
.lv2-final-cta {
    text-align: center;
    padding: 80px 24px;
    max-width: 700px;
    margin: 0 auto;
}
.lv2-final-cta h2 {
    font-family: var(--lv2-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -0.02em;
    color: var(--lv2-text);
    margin: 0 0 12px;
}
.lv2-final-cta p {
    font-size: 1.05rem;
    color: var(--lv2-muted);
    margin: 0 0 28px;
}
.lv2-final-cta .lv2-hero-actions {
    justify-content: center;
}
.lv2-final-cta small {
    display: block;
    margin-top: 20px;
    font-size: 0.8rem;
    color: var(--lv2-muted);
}

/* ---- Footer ---- */
.lv2-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 60px 24px 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.lv2-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.lv2-footer-brand img {
    height: 32px;
    width: auto;
    margin-bottom: 12px;
}
.lv2-footer-brand p {
    font-size: 0.85rem;
    color: var(--lv2-muted);
    margin: 0;
    max-width: 280px;
}
.lv2-footer-col h4 {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--lv2-text);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lv2-footer-col a {
    display: block;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--lv2-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.lv2-footer-col a:hover {
    color: var(--lv2-accent-2);
}
.lv2-footer-bottom {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 0.78rem;
    color: var(--lv2-muted);
}

/* ---- WhatsApp flotante ---- */
.lv2-wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 6px 24px rgba(37,211,102,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--lv2-easing);
}
.lv2-wa-float:hover {
    transform: scale(1.1);
}
.lv2-wa-float svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* ---- Reveal animations ---- */
.lv2-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--lv2-easing), transform 0.6s var(--lv2-easing);
}
.lv2-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .lv2-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lv2-mockup-ticket button,
    .lv2-btn,
    .lv2-value-card,
    .lv2-feature-card,
    .lv2-plan-card,
    .lv2-wa-float {
        transition: none;
    }
    .lv2-hero {
        animation: none;
    }
}

/* ---- Focus visible ---- */
.lv2-btn:focus-visible,
.lv2-nav a:focus-visible,
.lv2-skip-link:focus-visible,
.lv2-faq-item summary:focus-visible {
    outline: 2px solid var(--lv2-accent);
    outline-offset: 3px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .lv2-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .lv2-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .lv2-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .lv2-topbar {
        padding: 0 16px;
    }
    .lv2-nav-toggle {
        display: flex;
    }
    .lv2-nav {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        background: rgba(7,11,26,0.97);
        backdrop-filter: none;
        padding: 20px;
        gap: 4px;
        z-index: 99;
        overflow-y: auto;
    }
    .lv2-nav.is-open {
        display: flex;
    }
    .lv2-nav a {
        width: 100%;
        padding: 14px 18px;
        font-size: 1rem;
    }
    .lv2-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 16px 40px;
    }
    .lv2-hero-visual {
        order: -1;
    }
    .lv2-value-grid {
        grid-template-columns: 1fr;
    }
    .lv2-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .lv2-plan-grid {
        grid-template-columns: 1fr 1fr;
    }
    .lv2-compare-grid {
        grid-template-columns: 1fr;
    }
    .lv2-steps {
        grid-template-columns: 1fr;
    }
    .lv2-section {
        padding: 48px 16px;
    }
    .lv2-mockup-body {
        grid-template-columns: 1fr;
    }
    .lv2-mockup-sidebar {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .lv2-mockup-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .lv2-hero-actions {
        flex-direction: column;
    }
    .lv2-hero-actions .lv2-btn {
        width: 100%;
        justify-content: center;
    }
    .lv2-hero-stats {
        gap: 16px;
    }
    .lv2-plan-grid {
        grid-template-columns: 1fr;
    }
    .lv2-feature-grid {
        grid-template-columns: 1fr;
    }
    .lv2-social-icons {
        gap: 16px;
    }
    .lv2-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .lv2-wa-float {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
}

/* ---- Iconos SVG ---- */
.lv2-icon{width:1.25rem;height:1.25rem;display:inline-block;vertical-align:-.18em;flex-shrink:0;color:currentColor}
.lv2-icon.is-lg{width:1.75rem;height:1.75rem}
.lv2-icon.is-xl{width:2.25rem;height:2.25rem}
.lv2-icon-box{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--lv2-bg-1);color:var(--lv2-accent);border:1px solid #c7d2fe;border-radius:14px}
.lv2-icon-box.is-sm{width:44px;height:44px;border-radius:12px}
.lv2-icon-box.is-lg{width:64px;height:64px;border-radius:16px}

/* ---- Pills ---- */
.lv2-pill{display:inline-block;padding:.35rem .85rem;background:var(--lv2-bg-1);color:var(--lv2-accent);border:1px solid #c7d2fe;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em}

/* =====================================================================
 * === lv2 light theme ===
 * Sobrescribe el tema dark previo con paleta light indigo.
 * Scope: .landing-body (no afecta paneles autenticados).
 * ===================================================================== */

/* ---- Variables light ---- */
.landing-body {
    --lv2-bg: #ffffff;
    --lv2-bg-0: #ffffff;
    --lv2-bg-1: #f8fafc;
    --lv2-bg-2: #f1f5f9;
    --lv2-surface: #ffffff;
    --lv2-surface-2: #f8fafc;
    --lv2-border: #e2e8f0;
    --lv2-border-2: #cbd5e1;
    --lv2-text: #0f172a;
    --lv2-text-dim: #334155;
    --lv2-muted: #64748b;
    --lv2-accent: #7c3aed;
    --lv2-accent-2: #8b5cf6;
    --lv2-accent-gradient: linear-gradient(135deg, #7c3aed, #8b5cf6);
    --lv2-success: #16a34a;
    --lv2-success-soft: #dcfce7;
    --lv2-warning: #d97706;
    --lv2-danger: #dc2626;
    --lv2-danger-soft: #fef2f2;
    --lv2-whatsapp: #128c7e;
    --lv2-primary-ring: rgba(124,58,237,.18);
    --lv2-shadow: 0 8px 24px -12px rgba(15,23,42,.18);
    --lv2-shadow-lg: 0 20px 48px -20px rgba(124,58,237,.35);
    --lv2-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --lv2-glass-blur: 0;
    --lv2-easing: cubic-bezier(.2,.7,.2,1);
    --lv2-radius-sm: 12px;
    --lv2-radius: 16px;
    --lv2-radius-lg: 24px;
}

/* ---- Body light ---- */
.landing-body {
    background: var(--lv2-bg-0);
    color: var(--lv2-text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}
h1,h2,h3,h4,.lv2-hero-title,.lv2-section-head h2,.lv2-final-cta h2,.lv2-plan-price { font-family: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif; }
.landing-body::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 900px; height: 420px;
    transform: translateX(-50%) translateY(-10%);
    background: radial-gradient(900px 420px at 50% -10%, rgba(124,58,237,.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.lv2-main { position: relative; z-index: 1; }

/* ---- Surface override: dark rgba → white cards ---- */
.lv2-topbar {
    background: rgba(255,255,255,.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--lv2-border);
    box-shadow: var(--lv2-shadow-sm);
}
.lv2-topbar-brand { color: var(--lv2-text); }
.lv2-nav a { color: var(--lv2-muted); }
.lv2-nav a:hover { color: var(--lv2-accent); background: var(--lv2-bg-1); }
.lv2-nav a.is-active { color: var(--lv2-accent); background: rgba(124,58,237,.08); }
.lv2-nav-quote { background: var(--lv2-accent) !important; color: #fff !important; }
.lv2-nav-quote:hover { background: #6d28d9 !important; }
.lv2-nav-login { border-color: var(--lv2-border); color: var(--lv2-muted) !important; }
.lv2-nav-login:hover { border-color: var(--lv2-accent); color: var(--lv2-accent) !important; background: transparent !important; }
.lv2-nav-toggle span { background: var(--lv2-text); }

/* ---- Hero light ---- */
.lv2-hero::before { background: none; }
.lv2-kicker { background: rgba(124,58,237,.08); border-color: #c7d2fe; color: var(--lv2-accent); }
.lv2-hero-title { color: var(--lv2-text); }
.lv2-hero-title .lv2-highlight { color: var(--lv2-accent); -webkit-text-fill-color: var(--lv2-accent); text-decoration:underline; text-decoration-color:rgba(124,58,237,.35); text-decoration-thickness:.12em; text-underline-offset:.2em; background:none; }
.lv2-hero-lead { color: var(--lv2-text-dim); }

/* ---- Botones light ---- */
.lv2-btn-primary { background: var(--lv2-accent); color: #fff; box-shadow: 0 4px 20px rgba(124,58,237,.25); }
.lv2-btn-primary:hover { background: #6d28d9; box-shadow: 0 8px 28px rgba(124,58,237,.4); }
.lv2-btn-secondary { background: var(--lv2-surface); color: var(--lv2-accent); border: 1.5px solid var(--lv2-accent); }
.lv2-btn-secondary:hover { background: rgba(124,58,237,.06); border-color: var(--lv2-accent); }
.lv2-btn-outline { background: transparent; color: var(--lv2-text-dim); border: 1px solid var(--lv2-border); }
.lv2-btn-outline:hover { border-color: var(--lv2-accent); color: var(--lv2-accent); background: transparent; }

/* ---- Mockup POS ---- */
.lv2-mockup { background: var(--lv2-surface); border-color: var(--lv2-border); box-shadow: var(--lv2-shadow); }
.lv2-mockup-top { background: var(--lv2-bg-1); border-color: var(--lv2-border); }
.lv2-mockup-body { }
.lv2-mockup-sidebar { background: var(--lv2-bg-1); border-color: var(--lv2-border); }
.lv2-mockup-sidebar span { color: var(--lv2-muted); }
.lv2-mockup-sidebar span.active { background: rgba(124,58,237,.1); color: var(--lv2-accent); }
.lv2-mockup-ticket { background: var(--lv2-bg-1); }
.lv2-mockup-row { color: var(--lv2-text-dim); }
.lv2-mockup-row strong { color: var(--lv2-text); }
.lv2-mockup-total { border-color: var(--lv2-border); color: var(--lv2-text); }
.lv2-mockup-ticket button { background: var(--lv2-accent); }
.lv2-mockup-kpi { background: var(--lv2-bg-1); }
.lv2-mockup-status { background: var(--lv2-success-soft); }
.lv2-mockup-status span { color: var(--lv2-success); }
.lv2-mockup-status strong { color: var(--lv2-text-dim); }
.lv2-mockup-toolbar strong { color: var(--lv2-text); }
.lv2-mockup-toolbar small { color: var(--lv2-muted); }
.lv2-mockup-bars i { background: var(--lv2-accent); }

/* ---- Secciones ---- */
.lv2-section-head h2 { color: var(--lv2-text); }
.lv2-section-head p { color: var(--lv2-muted); }

/* ---- Value cards ---- */
.lv2-value-card { background: var(--lv2-surface); border-color: var(--lv2-border); box-shadow: var(--lv2-shadow-sm); }
.lv2-value-card:hover { border-color: var(--lv2-border-2); box-shadow: var(--lv2-shadow); }
.lv2-value-card h3 { color: var(--lv2-text); }
.lv2-value-card p { color: var(--lv2-muted); }
.lv2-value-icon { background: rgba(124,58,237,.08); color: var(--lv2-accent); }

/* ---- Feature cards ---- */
.lv2-feature-card { background: var(--lv2-surface); border-color: var(--lv2-border); box-shadow: var(--lv2-shadow-sm); }
.lv2-feature-card:hover { border-color: var(--lv2-border-2); box-shadow: var(--lv2-shadow); }
.lv2-feature-card h3 { color: var(--lv2-text); }
.lv2-feature-card p { color: var(--lv2-muted); }
.lv2-feature-icon { background: rgba(124,58,237,.08); color: var(--lv2-accent); }

/* ---- Plans ---- */
.lv2-plan-card { background: var(--lv2-surface); border-color: var(--lv2-border); box-shadow: var(--lv2-shadow-sm); }
.lv2-plan-card:hover { border-color: var(--lv2-border-2); box-shadow: var(--lv2-shadow); }
.lv2-plan-card.is-featured { border: 2px solid var(--lv2-accent); box-shadow: var(--lv2-shadow-lg); background: #fff; }
.lv2-plan-card h3 { color: var(--lv2-text); }
.lv2-plan-term { color: var(--lv2-muted); }
.lv2-plan-price { color: var(--lv2-text); }
.lv2-plan-monthly { color: var(--lv2-muted); }
.lv2-plan-note { color: var(--lv2-muted); }
.lv2-plan-list li { color: var(--lv2-text-dim); }
.lv2-plan-list li::before { color: var(--lv2-success); }
.lv2-plan-save { background: var(--lv2-success-soft); color: var(--lv2-success); }
.lv2-plan-save.is-neutral { background: var(--lv2-bg-1); color: var(--lv2-muted); }
.lv2-plan-btn { background: var(--lv2-accent); color: #fff; }
.lv2-plan-btn:hover { background: #6d28d9; }
.lv2-plan-tag { background: rgba(124,58,237,.08); color: var(--lv2-accent); }
.lv2-plan-iva { color: var(--lv2-muted); }

/* ---- Compare ---- */
.lv2-compare-card.is-before { background: var(--lv2-danger-soft); border-color: rgba(220,38,38,.15); }
.lv2-compare-card.is-after { background: var(--lv2-success-soft); border-color: rgba(22,163,74,.15); }
.lv2-compare-card h3 { color: var(--lv2-text); }
.lv2-compare-card li { color: var(--lv2-text-dim); }

/* ---- Steps ---- */
.lv2-steps article span { background: var(--lv2-accent); }
.lv2-steps article h3 { color: var(--lv2-text); }
.lv2-steps article p { color: var(--lv2-muted); }

/* ---- Trust ---- */
.lv2-trust-grid span { background: var(--lv2-bg-1); border-color: var(--lv2-border); color: var(--lv2-text-dim); }

/* ---- FAQ ---- */
.lv2-faq-item { background: var(--lv2-surface); border-color: var(--lv2-border); box-shadow: var(--lv2-shadow-sm); }
.lv2-faq-item summary { color: var(--lv2-text); }
.lv2-faq-item summary::after { border-color: var(--lv2-muted); }
.lv2-faq-item p { color: var(--lv2-muted); }

/* ---- Final CTA ---- */
.lv2-final-cta h2 { color: var(--lv2-text); }
.lv2-final-cta p { color: var(--lv2-muted); }
.lv2-final-cta small { color: var(--lv2-muted); }

/* ---- Footer ---- */
.lv2-footer { border-color: var(--lv2-border); background: var(--lv2-bg-1); max-width:none; padding:60px 24px 32px 24px; }
.lv2-footer-col h4 { color: var(--lv2-text); }
.lv2-footer-col a { color: var(--lv2-muted); }
.lv2-footer-col a:hover { color: var(--lv2-accent); }
.lv2-footer-brand p { color: var(--lv2-muted); }
.lv2-footer-bottom { border-color: var(--lv2-border); color: var(--lv2-muted); }

/* ---- Social band ---- */
.lv2-social-band p { color: var(--lv2-muted); }
.lv2-social-icons span { color: var(--lv2-text-dim); }

/* ---- WhatsApp float light ---- */
.lv2-wa-float {
    bottom: 20px; right: 20px;
    width: auto; height: auto;
    border-radius: 999px;
    background: var(--lv2-surface);
    box-shadow: var(--lv2-shadow);
    border: 1px solid rgba(18,140,126,.2);
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--lv2-whatsapp);
    text-decoration: none;
}
.lv2-wa-float svg { width: 20px; height: 20px; fill: none; stroke: var(--lv2-whatsapp); stroke-width: 1.75; }
.lv2-wa-float:hover { transform: translateY(-2px); }

/* ---- Section alternation ---- */
.lv2-section:nth-child(even) { background: var(--lv2-bg-1); padding: 80px 24px; max-width:none; }
.lv2-section:nth-child(even) .lv2-section { padding: 0; background: transparent; }

/* ---- Hero stats ---- */
.lv2-hero-stats div strong { color: var(--lv2-accent); }
.lv2-hero-stats div span { color: var(--lv2-muted); }

/* ---- Focus visible ---- */
.lv2-btn:focus-visible, .lv2-nav a:focus-visible, .lv2-skip-link:focus-visible, .lv2-faq-item summary:focus-visible {
    outline: 2px solid var(--lv2-accent);
    outline-offset: 3px;
}

/* ---- Mascot ---- */
.lv2-mascot{user-select:none;pointer-events:none;filter:none}
.lv2-mascot--hero{max-width:420px;width:100%;height:auto}
.lv2-acad-hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.lv2-acad-hero-art::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.14),transparent 70%);pointer-events:none}

/* ---- Nav mobile light ---- */
@media (max-width: 768px) {
    .lv2-nav { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--lv2-border); }
    .lv2-wa-float { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; gap: 0; background: var(--lv2-whatsapp); }
    .lv2-wa-float svg { stroke: #fff; }
    .lv2-mascot--hero { max-width: 220px; }
}

/* =====================================================================
 * Landing hotfix 20260525: fluidez + mascota liviana.
 * Scope: solo body.landing-body para no afectar paneles autenticados.
 * ===================================================================== */
.landing-body::before {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 360px;
    transform: none;
    background: radial-gradient(900px 360px at 50% -10%, rgba(124,58,237,.10), transparent 62%);
    contain: paint;
}

.landing-body .lv2-topbar,
.landing-body .lv2-mockup,
.landing-body .lv2-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.landing-body .lv2-topbar {
    background: rgba(255,255,255,.96);
}

.landing-body .lv2-main {
    isolation: isolate;
}

.landing-body .lv2-hero {
    overflow: visible;
}

.landing-body .lv2-mockup,
.landing-body .lv2-plan-card.is-featured {
    box-shadow: 0 10px 28px -18px rgba(15,23,42,.28);
}

.landing-body .lv2-value-card,
.landing-body .lv2-feature-card,
.landing-body .lv2-plan-card,
.landing-body .lv2-faq-item,
.landing-body .demo-catalog-btn,
.landing-body .demo-ticket-panel,
.landing-body .demo-cb-card,
.landing-body .demo-report-card {
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-btn,
.landing-body .lv2-value-card,
.landing-body .lv2-feature-card,
.landing-body .lv2-plan-card,
.landing-body .lv2-wa-float,
.landing-body .demo-catalog-btn {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.landing-body .lv2-btn:hover,
.landing-body .lv2-value-card:hover,
.landing-body .lv2-feature-card:hover,
.landing-body .lv2-plan-card:hover,
.landing-body .lv2-wa-float:hover,
.landing-body .demo-catalog-btn:hover {
    transform: translateY(-1px);
}

.landing-body .lv2-reveal,
.landing-body .landing-reveal {
    transform: translateY(10px);
    transition: opacity .42s ease, transform .42s ease;
}

.landing-body .lv2-reveal.is-visible,
.landing-body .landing-reveal.is-visible {
    transform: none;
}

.landing-body .lv2-mascot-picture {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 100%;
}

.landing-body .lv2-mascot {
    display: block;
    position: relative;
    z-index: 1;
    width: min(180px, 100%);
    height: auto;
    filter: none;
}

.landing-body .lv2-mascot--hero {
    width: min(420px, 100%);
    max-width: 420px;
    animation: none;
}

.landing-body .lv2-acad-hero-art::before {
    z-index: 0;
    width: min(340px, 86vw);
    height: min(340px, 86vw);
}

@media (max-width: 768px) {
    .landing-body .lv2-academia-teaser {
        grid-template-columns: 1fr !important;
        justify-items: center;
        text-align: center;
    }

    .landing-body .lv2-mascot--hero {
        width: min(220px, 70vw);
        max-width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-body .lv2-reveal,
    .landing-body .landing-reveal,
    .landing-body .lv2-btn,
    .landing-body .lv2-value-card,
    .landing-body .lv2-feature-card,
    .landing-body .lv2-plan-card,
    .landing-body .lv2-wa-float,
    .landing-body .demo-catalog-btn {
        transition: none;
        transform: none;
    }
}

/* =====================================================================
 * Visual polish 20260525: subtle motion, non-clickable hero mockup.
 * Scope: public landing only.
 * ===================================================================== */
.landing-body .lv2-reveal,
.landing-body .landing-reveal {
    transition-delay: var(--lv2-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.landing-body .lv2-hero-visual,
.landing-body .lv2-mockup,
.landing-body .lv2-mockup * {
    cursor: default !important;
}

.landing-body .lv2-mockup {
    pointer-events: none;
    transform-origin: center top;
    animation: lv2-mockup-rise .58s cubic-bezier(.2,.7,.2,1) .12s both;
}

.landing-body .lv2-mockup-sidebar span,
.landing-body .lv2-mockup-ticket button {
    cursor: default !important;
}

.landing-body .lv2-mockup-row {
    animation: lv2-ticket-line .42s ease both;
}

.landing-body .lv2-mockup-row:nth-child(1) { animation-delay: .22s; }
.landing-body .lv2-mockup-row:nth-child(2) { animation-delay: .30s; }
.landing-body .lv2-mockup-row:nth-child(3) { animation-delay: .38s; }
.landing-body .lv2-mockup-total { animation: lv2-ticket-line .42s ease .48s both; }
.landing-body .lv2-mockup-ticket button { animation: lv2-ticket-line .42s ease .56s both; }

.landing-body .lv2-mockup-bars i {
    transform-origin: bottom;
    animation: lv2-bar-grow .52s cubic-bezier(.2,.7,.2,1) both;
}

.landing-body .lv2-mockup-bars i:nth-child(1) { animation-delay: .24s; }
.landing-body .lv2-mockup-bars i:nth-child(2) { animation-delay: .30s; }
.landing-body .lv2-mockup-bars i:nth-child(3) { animation-delay: .36s; }
.landing-body .lv2-mockup-bars i:nth-child(4) { animation-delay: .42s; }
.landing-body .lv2-mockup-bars i:nth-child(5) { animation-delay: .48s; }

.landing-body .lv2-mockup-toolbar span,
.landing-body .lv2-mockup-status {
    animation: lv2-soft-pop .44s ease .62s both;
}

.landing-body .lv2-value-card,
.landing-body .lv2-feature-card,
.landing-body .lv2-plan-card,
.landing-body .lv2-faq-item,
.landing-body .lv2-final-cta,
.landing-body .lv2-social-icons span {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.landing-body .lv2-value-card:hover,
.landing-body .lv2-feature-card:hover,
.landing-body .lv2-plan-card:hover,
.landing-body .lv2-faq-item:hover,
.landing-body .lv2-social-icons span:hover {
    transform: translateY(-2px);
}

.landing-body .lv2-plan-price,
.landing-body .lv2-report-card strong,
.landing-body .lv2-hero-stats strong {
    transition: color .18s ease, transform .18s ease;
}

.landing-body .lv2-plan-card:hover .lv2-plan-price,
.landing-body .lv2-hero-stats div:hover strong {
    transform: translateY(-1px);
}

.landing-body .lv2-plan-list li,
.landing-body .lv2-check-list li {
    animation: lv2-list-in .36s ease both;
}

.landing-body .lv2-plan-list li:nth-child(1),
.landing-body .lv2-check-list li:nth-child(1) { animation-delay: .04s; }
.landing-body .lv2-plan-list li:nth-child(2),
.landing-body .lv2-check-list li:nth-child(2) { animation-delay: .08s; }
.landing-body .lv2-plan-list li:nth-child(3),
.landing-body .lv2-check-list li:nth-child(3) { animation-delay: .12s; }
.landing-body .lv2-plan-list li:nth-child(4),
.landing-body .lv2-check-list li:nth-child(4) { animation-delay: .16s; }

.landing-body .lv2-mascot-picture {
    isolation: isolate;
}

.landing-body .lv2-mascot-picture::before {
    content: "";
    position: absolute;
    inset: 12% 7% 8%;
    z-index: 0;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(124,58,237,.13), transparent 68%);
    pointer-events: none;
}

.landing-body .lv2-acad-hero-art .lv2-mascot-picture::before {
    inset: 4% 0 0;
}

@keyframes lv2-mockup-rise {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes lv2-ticket-line {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

@keyframes lv2-bar-grow {
    from { opacity: .45; transform: scaleY(.2); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes lv2-soft-pop {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

@keyframes lv2-list-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .landing-body .lv2-mockup {
        animation-duration: .42s;
    }

    .landing-body .lv2-mockup-row,
    .landing-body .lv2-mockup-total,
    .landing-body .lv2-mockup-ticket button,
    .landing-body .lv2-mockup-bars i,
    .landing-body .lv2-mockup-toolbar span,
    .landing-body .lv2-mockup-status {
        animation-delay: .1s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-body .lv2-reveal,
    .landing-body .landing-reveal {
        transition-delay: 0ms;
        will-change: auto;
    }

    .landing-body .lv2-mockup,
    .landing-body .lv2-mockup-row,
    .landing-body .lv2-mockup-total,
    .landing-body .lv2-mockup-ticket button,
    .landing-body .lv2-mockup-bars i,
    .landing-body .lv2-mockup-toolbar span,
    .landing-body .lv2-mockup-status,
    .landing-body .lv2-plan-list li,
    .landing-body .lv2-check-list li {
        animation: none !important;
    }
}

/* =====================================================================
 * === Auth UI v2: login + authenticated POS panels ===
 * Scope: body:not(.landing-body), owner/client/auth only.
 * ===================================================================== */
body:not(.landing-body) {
    --ui2-primary: #7c3aed;
    --ui2-primary-strong: #6d28d9;
    --ui2-primary-soft: #eef2ff;
    --ui2-accent: #a855f7;
    --ui2-accent-soft: #e0f2fe;
    --ui2-bg: #f6f8fc;
    --ui2-surface: #ffffff;
    --ui2-surface-soft: #f8fafc;
    --ui2-border: #e2e8f0;
    --ui2-border-strong: #cbd5e1;
    --ui2-text: #0f172a;
    --ui2-muted: #64748b;
    --ui2-dim: #94a3b8;
    --ui2-sidebar-bg: #0f172f;
    --ui2-sidebar-bg-2: #101a39;
    --ui2-sidebar-text: #e5edff;
    --ui2-sidebar-muted: #9fb0da;
    --ui2-radius: 16px;
    --ui2-radius-sm: 10px;
    --ui2-radius-lg: 22px;
    --ui2-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
    --ui2-shadow: 0 12px 34px -22px rgba(15,23,42,.28);
    --ui2-shadow-hover: 0 18px 42px -24px rgba(124,58,237,.30);
    --ui2-gradient: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 58%, #a855f7 100%);
    accent-color: var(--ui2-primary);
}

.ui2-icon {
    width: 1.12rem;
    height: 1.12rem;
    display: inline-block;
    flex-shrink: 0;
    color: currentColor;
    vertical-align: -.16em;
}

.ui2-icon-lg {
    width: 1.45rem;
    height: 1.45rem;
}

body:not(.landing-body) :focus-visible {
    outline: 2px solid var(--ui2-accent);
    outline-offset: 3px;
}

.ui2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 10px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: var(--ui2-primary-soft);
    color: var(--ui2-primary);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ui2-chip.is-light {
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.13);
    color: #fff;
}

/* Auth */
.auth-body {
    background: var(--ui2-bg);
    overflow-x: hidden;
}

.auth-shell.auth-shell-v2 {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    padding: 0;
    background:
        radial-gradient(820px 360px at 8% 0%, rgba(124,58,237,.12), transparent 62%),
        linear-gradient(180deg, #fff 0%, var(--ui2-bg) 100%);
}

.auth-main-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 34px;
    overflow: hidden;
}

.auth-side-panel {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 46px;
    color: #fff;
    background:
        radial-gradient(620px 360px at 72% 12%, rgba(14,165,233,.34), transparent 62%),
        var(--ui2-gradient);
}

.auth-side-panel::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -170px;
    bottom: -120px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}

.auth-side-brand,
.auth-side-copy,
.auth-side-features {
    position: relative;
    z-index: 1;
}

.auth-side-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 900;
}

.auth-side-brand img {
    width: 46px;
    height: 46px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.16);
}

.auth-side-copy {
    max-width: 560px;
}

.auth-side-copy h2 {
    max-width: 620px;
    margin: 18px 0 12px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.03;
    letter-spacing: -.02em;
}

.auth-side-copy p {
    max-width: 500px;
    color: rgba(255,255,255,.82);
    font-size: 1rem;
    line-height: 1.65;
}

.auth-side-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-side-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    font-weight: 800;
}

.auth-card.auth-card-v2 {
    min-width: 0;
    width: min(100%, calc(100vw - 48px));
    max-width: 440px;
    border-radius: var(--ui2-radius-lg);
    border-color: var(--ui2-border);
    box-shadow: 0 24px 60px -34px rgba(15,23,42,.42);
}

.auth-card.auth-card-v2,
.auth-card.auth-card-v2 form,
.auth-card.auth-card-v2 .form-group,
.auth-card.auth-card-v2 .row,
.auth-card.auth-card-v2 .ui2-input-wrap {
    min-width: 0;
    max-width: 100%;
}

.auth-title-block {
    margin: 0 0 22px;
}

.auth-title-block h1 {
    margin: 14px 0 8px;
    font-size: 1.75rem;
    letter-spacing: -.02em;
}

.auth-title-block p {
    margin: 0;
    color: var(--ui2-muted);
}

.ui2-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.ui2-input-wrap > .ui2-icon {
    position: absolute;
    left: 12px;
    color: var(--ui2-dim);
    pointer-events: none;
}

.ui2-input-wrap .input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding-left: 40px;
    min-height: 44px;
    border-radius: 12px;
}

.ui2-password-toggle {
    position: absolute;
    right: 7px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ui2-muted);
    cursor: pointer;
}

.auth-card.auth-card-v2 .btn-block {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.ui2-password-toggle:hover {
    background: var(--ui2-surface-soft);
    color: var(--ui2-primary);
}

.ui2-field-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    color: var(--ui2-muted);
    font-size: .82rem;
    line-height: 1.4;
}

.ui2-alert {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* App shell */
.ui2-app-body,
.owner-body,
.client-body {
    background:
        radial-gradient(900px 380px at 35% -10%, rgba(124,58,237,.08), transparent 60%),
        var(--ui2-bg);
}

.app-shell {
    background: transparent;
}

.app-sidebar {
    background:
        radial-gradient(260px 220px at 30% 0%, rgba(139,92,246,.22), transparent 70%),
        linear-gradient(180deg, var(--ui2-sidebar-bg) 0%, var(--ui2-sidebar-bg-2) 100%);
    border-right: 1px solid rgba(255,255,255,.08);
}

.app-sidebar .brand {
    min-height: 76px;
}

.app-sidebar .brand img {
    background: rgba(255,255,255,.12);
    box-shadow: 0 12px 28px -18px rgba(0,0,0,.6);
}

.app-sidebar nav .section {
    color: var(--ui2-sidebar-muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.app-sidebar nav a {
    position: relative;
    gap: 11px;
    color: var(--ui2-sidebar-text);
    border-radius: 12px;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}

.app-sidebar nav a svg {
    opacity: .9;
}

.app-sidebar nav a:hover {
    transform: translateX(2px);
    background: rgba(255,255,255,.075);
}

.app-sidebar nav a.active {
    background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(139,92,246,.10));
    border-color: rgba(165,180,252,.26);
    box-shadow: inset 3px 0 0 #818cf8;
}

.app-sidebar nav a.is-hidden-by-search,
.app-sidebar nav .section.is-hidden-by-search {
    display: none;
}

.app-topbar.ui2-topbar {
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(220px, 420px) minmax(170px, 1fr);
    gap: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 1px 0 var(--ui2-border), 0 14px 32px -28px rgba(15,23,42,.35);
    backdrop-filter: blur(10px);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.topbar-right {
    justify-content: flex-end;
}

.topbar-center {
    min-width: 0;
}

.ui2-topbar-search {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid var(--ui2-border);
    border-radius: 999px;
    background: var(--ui2-surface);
    color: var(--ui2-muted);
}

.ui2-topbar-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ui2-text);
    font: inherit;
    font-size: .88rem;
}

.ui2-dropdown {
    position: relative;
}

.ui2-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    border: 1px solid var(--ui2-border);
    border-radius: 999px;
    background: #fff;
    padding: 5px 8px 5px 5px;
    color: var(--ui2-text);
    cursor: pointer;
    font: inherit;
    box-shadow: var(--ui2-shadow-sm);
}

.ui2-user-trigger .who {
    display: grid;
    min-width: 0;
    line-height: 1.15;
    text-align: left;
}

.ui2-user-trigger .who b,
.ui2-dropdown-head strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui2-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    width: min(260px, calc(100vw - 24px));
    display: none;
    padding: 8px;
    border: 1px solid var(--ui2-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px -34px rgba(15,23,42,.45);
}

.ui2-dropdown.is-open .ui2-dropdown-menu {
    display: grid;
    gap: 4px;
}

.ui2-dropdown-head {
    display: grid;
    gap: 2px;
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--ui2-border);
    margin-bottom: 4px;
}

.ui2-dropdown-head span {
    color: var(--ui2-muted);
    font-size: .78rem;
}

.ui2-dropdown-menu a,
.ui2-dropdown-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ui2-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ui2-dropdown-menu a:hover,
.ui2-dropdown-menu button:hover {
    background: var(--ui2-surface-soft);
    color: var(--ui2-primary);
}

.ui2-dropdown-menu form {
    margin: 0;
}

/* Content polish */
.app-content {
    padding: 28px;
}

.app-content > h1.mb-3,
.app-content > .row.between.mb-3,
.page-head {
    padding: 18px 20px;
    margin-bottom: 18px;
    border: 1px solid var(--ui2-border);
    border-radius: var(--ui2-radius-lg);
    background:
        radial-gradient(480px 180px at 85% 0%, rgba(124,58,237,.08), transparent 64%),
        var(--ui2-surface);
    box-shadow: var(--ui2-shadow-sm);
}

.app-content > h1.mb-3 {
    display: block;
}

.page-head .crumb,
.dashboard-date {
    color: var(--ui2-muted);
}

.card,
.kpi-card {
    border-color: var(--ui2-border);
    border-radius: var(--ui2-radius);
    box-shadow: var(--ui2-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card:hover,
.kpi-card:hover {
    border-color: var(--ui2-border-strong);
    box-shadow: var(--ui2-shadow-hover);
}

.grid .card[href],
.grid a.card {
    display: block;
    color: inherit;
}

.kpi-card {
    min-height: 132px;
}

.ui2-kpi-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ui2-primary-soft);
    color: var(--ui2-primary);
}

.kpi-card .kpi-value,
.stat .value {
    color: var(--ui2-text);
    letter-spacing: -.02em;
}

.kpi-card .kpi-label,
.stat .label {
    color: var(--ui2-muted);
    font-weight: 900;
}

.table-wrap {
    border-color: var(--ui2-border);
    border-radius: var(--ui2-radius);
    box-shadow: none;
}

.table thead th,
.table-modern thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui2-surface-soft);
    color: #475569;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.badge {
    border: 1px solid transparent;
}

.btn {
    border-radius: 12px;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--ui2-gradient);
    box-shadow: 0 14px 30px -20px rgba(124,58,237,.65);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 60%, #9333ea 100%);
}

.input,
.select,
.textarea {
    border-color: var(--ui2-border);
    border-radius: 12px;
}

.progress {
    background: #eef2f7;
}

.progress > span,
.progress-bar {
    background: var(--ui2-gradient);
}

.ui2-empty,
.card > .muted:first-child,
.card > .muted.small:first-child {
    padding: 34px 16px;
    border: 1px dashed #c7d2fe;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    text-align: center;
}

@media (max-width: 1180px) {
    .app-topbar.ui2-topbar {
        grid-template-columns: 1fr auto;
    }

    .topbar-center {
        display: none;
    }
}

@media (max-width: 980px) {
    .app-content {
        padding: 18px;
    }

    .app-topbar.ui2-topbar {
        padding: 0 14px;
    }
}

@media (max-width: 760px) {
    .auth-shell.auth-shell-v2 {
        grid-template-columns: 1fr;
    }

    .auth-side-panel {
        display: none;
    }

    .auth-main-panel {
        width: 100%;
        max-width: 100vw;
        padding: 18px;
    }

    .auth-card.auth-card-v2 {
        width: 100%;
        max-width: none;
        padding: 24px;
    }

    .auth-title-block h1 {
        font-size: clamp(1.45rem, 8vw, 1.75rem);
    }

    .ui2-user-trigger .who {
        display: none;
    }

    .app-content > h1.mb-3,
    .app-content > .row.between.mb-3,
    .page-head {
        padding: 16px;
    }
}

@media (max-width: 520px) {
    .app-topbar .crumbs {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ui2-user-trigger {
        padding-right: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar nav a,
    .card,
    .kpi-card,
    .btn,
    .ui2-password-toggle {
        transition: none;
    }

    .app-sidebar nav a:hover,
    .card:hover,
    .kpi-card:hover,
    .btn:hover {
        transform: none;
    }
}

/* =====================================================================
 * === Auth UI v3: shell rail + owner/client polish ===
 * ===================================================================== */
body:not(.landing-body) {
    --ui3-sidebar-w: 260px;
    --ui3-sidebar-rail: 72px;
    --ui3-topbar-h: 64px;
    --ui3-ease: cubic-bezier(.2,.7,.2,1);
    --ui3-ok: #16a34a;
    --ui3-warn: #d97706;
    --ui3-danger: #dc2626;
    --ui3-info: #a855f7;
}

.app-sidebar {
    width: var(--ui3-sidebar-w);
    flex-basis: var(--ui3-sidebar-w);
    transition: width .24s var(--ui3-ease), flex-basis .24s var(--ui3-ease), left .2s ease;
}

.app-sidebar .brand > div,
.app-sidebar nav a span,
.app-sidebar nav .section {
    transition: opacity .16s ease, transform .16s ease;
}

body.is-sidebar-rail .app-sidebar {
    width: var(--ui3-sidebar-rail);
    flex-basis: var(--ui3-sidebar-rail);
    overflow-x: visible;
}

body.is-sidebar-rail .app-sidebar .brand {
    justify-content: center;
    padding-inline: 10px;
}

body.is-sidebar-rail .app-sidebar .brand > div,
body.is-sidebar-rail .app-sidebar nav a span {
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-6px);
}

body.is-sidebar-rail .app-sidebar nav {
    padding-inline: 10px;
}

body.is-sidebar-rail .app-sidebar nav .section {
    height: 12px;
    padding: 10px 0 4px;
    color: transparent;
    text-align: center;
}

body.is-sidebar-rail .app-sidebar nav .section::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 0 auto;
    background: rgba(255,255,255,.18);
}

body.is-sidebar-rail .app-sidebar nav a {
    justify-content: center;
    padding: 12px;
}

.app-sidebar nav a[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 90;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity .14s ease, transform .14s ease;
}

body.is-sidebar-rail .app-sidebar nav a:hover::after,
body.is-sidebar-rail .app-sidebar nav a:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.app-sidebar nav .section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.app-sidebar nav .section::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.app-sidebar nav .section.is-collapsed::after {
    transform: rotate(-45deg);
}

.app-sidebar nav a.is-hidden-by-section,
.app-sidebar nav a.is-hidden-by-search,
.app-sidebar nav .section.is-hidden-by-search {
    display: none;
}

.ui2-sidebar-empty {
    margin: 12px 10px;
    padding: 12px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 12px;
    color: var(--ui2-sidebar-muted);
    font-size: .82rem;
    text-align: center;
}

.app-menu-toggle {
    transition: background-color .16s ease, transform .16s ease;
}

.app-menu-toggle:hover {
    transform: translateY(-1px);
}

.ui2-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ui2-page-head .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.ui2-filter-card {
    background:
        radial-gradient(420px 120px at 88% 0%, rgba(14,165,233,.07), transparent 62%),
        var(--ui2-surface);
}

.ui2-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ui2-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.ui2-stat-tile {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--ui2-border);
    border-radius: var(--ui2-radius);
    background: var(--ui2-surface);
    box-shadow: var(--ui2-shadow-sm);
}

.ui2-stat-tile::after {
    content: "";
    position: absolute;
    inset: auto 16px 12px auto;
    width: 70px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124,58,237,.10), rgba(14,165,233,.16));
    transform: skewX(-14deg);
}

.ui2-stat-tile span {
    display: block;
    color: var(--ui2-muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ui2-stat-tile strong {
    display: block;
    margin-top: 8px;
    color: var(--ui2-text);
    font-size: 1.55rem;
    letter-spacing: -.02em;
}

.ui2-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.ui2-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 16px;
    border: 1px solid var(--ui2-border);
    border-radius: var(--ui2-radius);
    background: var(--ui2-surface);
    color: var(--ui2-text);
    text-decoration: none;
    box-shadow: var(--ui2-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ui2-action-card:hover {
    border-color: #c7d2fe;
    box-shadow: var(--ui2-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.ui2-action-card .ui2-icon,
.ui2-action-card .ui2-icon-lg {
    color: var(--ui2-primary);
}

.ui2-action-card b,
.ui2-action-card span {
    display: block;
}

.ui2-action-card span {
    color: var(--ui2-muted);
    font-size: .82rem;
}

.ui2-plan-card {
    min-height: 190px;
}

.ui2-plan-card h3 {
    margin: 14px 0 8px;
    color: var(--ui2-text);
}

.ui2-plan-card strong {
    display: block;
    margin: 14px 0 4px;
    color: var(--ui2-primary);
    font-size: 1.35rem;
}

.ui2-empty h3 {
    margin: 10px 0 5px;
    color: var(--ui2-text);
}

.ui2-empty p {
    max-width: 440px;
    margin: 0 auto;
    color: var(--ui2-muted);
}

.ui2-empty-action {
    margin-top: 14px;
}

.ui2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.ui2-tabs button {
    border: 1px solid var(--ui2-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ui2-muted);
    padding: 9px 13px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ui2-tabs button.is-active {
    border-color: #c7d2fe;
    background: var(--ui2-primary-soft);
    color: var(--ui2-primary);
}

.ui2-tab-panel[hidden] {
    display: none;
}

.ui2-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.ui2-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ui2-status-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui2-dim);
}

.ui2-status-dot.is-online::before {
    background: var(--ui3-ok);
    box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

.ui2-status-dot.is-warning::before {
    background: var(--ui3-warn);
    box-shadow: 0 0 0 4px rgba(217,119,6,.12);
}

@media (max-width: 980px) {
    body.is-sidebar-rail .app-sidebar {
        width: var(--ui3-sidebar-w);
        flex-basis: var(--ui3-sidebar-w);
    }

    body.is-sidebar-rail .app-sidebar .brand > div,
    body.is-sidebar-rail .app-sidebar nav a span {
        width: auto;
        opacity: 1;
        transform: none;
    }

    body.is-sidebar-rail .app-sidebar nav a {
        justify-content: flex-start;
    }

    .ui2-stat-row,
    .ui2-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ui2-page-head,
    .ui2-table-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui2-stat-row,
    .ui2-actions-grid {
        grid-template-columns: 1fr;
    }

    .ui2-copy-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
 * === Academy quiz + compact funciones polish ===
 * Scope: landing/public pages only.
 * ===================================================================== */
.landing-body .lv2-academy-page .lv2-hero-copy,
.landing-body .lv2-functions-page .lv2-hero-copy {
    max-width: 660px;
}

.landing-body .lv2-academy-hero,
.landing-body .lv2-functions-hero {
    align-items: center;
}

.landing-body .lv2-level-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 30px;
}

.landing-body .lv2-course-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.landing-body .lv2-course-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    background: var(--lv2-surface);
    border: 1px solid var(--lv2-border);
    border-radius: var(--lv2-radius);
    box-shadow: var(--lv2-shadow-sm);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.landing-body .lv2-course-card:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe;
    box-shadow: 0 18px 40px -24px rgba(124,58,237,.52), 0 1px 2px rgba(15,23,42,.06);
}

.landing-body .lv2-course-media {
    display: block;
    aspect-ratio: 1.12 / .82;
    background: var(--lv2-primary-soft);
}

.landing-body .lv2-course-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.landing-body .lv2-course-body {
    padding: 16px 18px 18px;
}

.landing-body .lv2-course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--lv2-text-soft);
    font-size: .78rem;
}

.landing-body .lv2-course-meta > span:not(.lv2-pill) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.landing-body .lv2-course-card h3,
.landing-body .lv2-function-card h3,
.landing-body .lv2-related-card h3 {
    margin: 12px 0 8px;
    color: var(--lv2-text);
    font-size: 1rem;
    line-height: 1.25;
}

.landing-body .lv2-course-card p,
.landing-body .lv2-function-card p,
.landing-body .lv2-related-card p {
    margin: 0;
    color: var(--lv2-text-soft);
    font-size: .84rem;
    line-height: 1.55;
}

.landing-body .lv2-course-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--lv2-primary);
    font-size: .82rem;
    font-weight: 800;
}

.landing-body .lv2-course-card.is-locked .lv2-course-media img {
    filter: saturate(.9);
}

.landing-body .lv2-course-number {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--lv2-primary);
    font-size: .76rem;
    font-weight: 900;
    box-shadow: 0 8px 20px -14px rgba(15,23,42,.35);
}

.landing-body .lv2-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1120px;
    margin: 0 auto 22px;
    color: var(--lv2-text-soft);
    font-size: .86rem;
}

.landing-body .lv2-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lv2-primary);
    text-decoration: none;
    font-weight: 800;
}

.landing-body .lv2-lesson-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, .55fr);
    gap: 28px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto 28px;
    padding: 30px;
    border: 1px solid var(--lv2-border);
    border-radius: var(--lv2-radius-lg);
    background: var(--lv2-surface);
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-lesson-hero h1 {
    margin: 14px 0 12px;
    color: var(--lv2-text);
    font-family: var(--lv2-font-display);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    line-height: 1.08;
}

.landing-body .lv2-lesson-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--lv2-text-soft);
    line-height: 1.65;
}

.landing-body .lv2-lesson-art {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / .9;
    border-radius: 18px;
    background: var(--lv2-primary-soft);
}

.landing-body .lv2-lesson-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.landing-body .lv2-lesson-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.landing-body .lv2-quiz-card,
.landing-body .lv2-syllabus-card {
    overflow: hidden;
    border: 1px solid var(--lv2-border);
    border-radius: var(--lv2-radius-lg);
    background: var(--lv2-surface);
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-quiz-card {
    display: grid;
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
}

.landing-body .lv2-quiz-visual {
    min-height: 100%;
    background: var(--lv2-primary-soft);
}

.landing-body .lv2-quiz-visual picture,
.landing-body .lv2-quiz-visual img {
    width: 100%;
    height: 100%;
    display: block;
}

.landing-body .lv2-quiz-visual img {
    object-fit: cover;
}

.landing-body .lv2-quiz-panel {
    padding: 28px;
}

.landing-body .lv2-quiz-panel h2,
.landing-body .lv2-syllabus-card h2 {
    margin: 12px 0 8px;
    color: var(--lv2-text);
    font-size: 1.25rem;
}

.landing-body .lv2-quiz-intro {
    margin: 0 0 18px;
    color: var(--lv2-text-soft);
}

.landing-body .lv2-quiz-progress {
    margin-bottom: 18px;
}

.landing-body .lv2-quiz-progress span {
    display: block;
    margin-bottom: 7px;
    color: var(--lv2-text-soft);
    font-size: .82rem;
    font-weight: 800;
}

.landing-body .lv2-quiz-progress div {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: var(--lv2-bg-2);
}

.landing-body .lv2-quiz-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--lv2-primary);
    transition: width .22s ease;
}

.landing-body .lv2-quiz-question {
    display: none;
}

.landing-body .lv2-quiz-question.is-active {
    display: block;
}

.landing-body .lv2-quiz-question h3 {
    margin: 0 0 14px;
    color: var(--lv2-text);
    font-size: 1.05rem;
    line-height: 1.35;
}

.landing-body .lv2-quiz-options {
    display: grid;
    gap: 10px;
}

.landing-body .lv2-quiz-options button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--lv2-border);
    border-radius: 14px;
    background: #fff;
    color: var(--lv2-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.landing-body .lv2-quiz-options button:hover {
    transform: translateY(-1px);
    border-color: #c7d2fe;
    background: var(--lv2-primary-soft);
}

.landing-body .lv2-quiz-options button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--lv2-bg-2);
    color: var(--lv2-primary);
    font-size: .8rem;
}

.landing-body .lv2-quiz-options button.is-correct {
    border-color: rgba(22,163,74,.45);
    background: var(--lv2-success-soft);
}

.landing-body .lv2-quiz-options button.is-wrong {
    border-color: rgba(220,38,38,.38);
    background: #fee2e2;
}

.landing-body .lv2-quiz-feedback {
    min-height: 42px;
    margin: 14px 0;
    color: var(--lv2-text-soft);
    font-size: .9rem;
    line-height: 1.45;
}

.landing-body .lv2-quiz-feedback.is-correct {
    color: #166534;
}

.landing-body .lv2-quiz-feedback.is-wrong {
    color: #991b1b;
}

.landing-body .lv2-quiz-done {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #c7d2fe;
    border-radius: 18px;
    background: var(--lv2-primary-soft);
    text-align: center;
}

.landing-body .lv2-quiz-done h3 {
    margin: 10px 0 6px;
    color: var(--lv2-text);
}

.landing-body .lv2-syllabus-card {
    align-self: start;
    padding: 22px;
}

.landing-body .lv2-syllabus-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.landing-body .lv2-syllabus-card ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-body .lv2-syllabus-card li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    color: var(--lv2-text);
    font-size: .9rem;
}

.landing-body .lv2-syllabus-card small {
    grid-column: 2;
    color: var(--lv2-text-dim);
}

.landing-body .lv2-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
}

.landing-body .lv2-related-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--lv2-border);
    border-radius: 18px;
    background: var(--lv2-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-related-card picture {
    overflow: hidden;
    aspect-ratio: 1 / .78;
    border-radius: 14px;
}

.landing-body .lv2-related-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.landing-body .lv2-functions-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
}

.landing-body .lv2-functions-mascot {
    position: relative;
    display: block;
    max-width: 420px;
    justify-self: center;
}

.landing-body .lv2-functions-mascot::before {
    content: "";
    position: absolute;
    inset: 8% 4%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.15), transparent 68%);
}

.landing-body .lv2-functions-mascot img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    filter: drop-shadow(0 14px 24px rgba(124,58,237,.14));
}

.landing-body .lv2-functions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.landing-body .lv2-function-card {
    padding: 20px;
    border: 1px solid var(--lv2-border);
    border-radius: var(--lv2-radius);
    background: var(--lv2-surface);
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-function-card details {
    margin-top: 14px;
}

.landing-body .lv2-function-card summary {
    color: var(--lv2-primary);
    font-weight: 900;
    cursor: pointer;
}

.landing-body .lv2-function-card details p {
    margin-top: 10px;
}

.landing-body .lv2-function-card ul {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.landing-body .lv2-function-card li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--lv2-text-soft);
    font-size: .84rem;
}

.landing-body .lv2-function-card li .lv2-icon {
    color: var(--lv2-success);
}

.landing-body .lv2-rubro-grid,
.landing-body .lv2-panel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.landing-body .lv2-rubro-grid article,
.landing-body .lv2-panel-grid article {
    overflow: hidden;
    border: 1px solid var(--lv2-border);
    border-radius: var(--lv2-radius);
    background: var(--lv2-surface);
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-rubro-grid article {
    padding: 18px;
}

.landing-body .lv2-rubro-grid h3,
.landing-body .lv2-panel-grid h3 {
    margin: 0 0 6px;
    color: var(--lv2-text);
    font-size: .95rem;
}

.landing-body .lv2-rubro-grid p,
.landing-body .lv2-panel-grid p {
    margin: 0;
    color: var(--lv2-text-soft);
    font-size: .82rem;
    line-height: 1.45;
}

.landing-body .lv2-panel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-body .lv2-panel-grid img {
    width: 100%;
    display: block;
}

.landing-body .lv2-panel-grid div {
    padding: 16px;
}

/* === Mascot lock + dialogue quiz polish 20260525 === */
.landing-body .lv2-academy-lock {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 28px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid #c7d2fe;
    border-radius: 28px;
    background:
        radial-gradient(circle at 78% 22%, rgba(124,58,237,.15), transparent 34%),
        linear-gradient(135deg, #fff 0%, #f8fafc 56%, #eef2ff 100%);
    box-shadow: 0 18px 42px -26px rgba(124,58,237,.42);
}

.landing-body .lv2-lock-copy h2 {
    max-width: 680px;
    margin: 10px 0 12px;
    color: var(--lv2-text);
    font-family: var(--lv2-font-heading);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.08;
}

.landing-body .lv2-lock-copy p {
    max-width: 690px;
    margin: 0;
    color: var(--lv2-text-soft);
    line-height: 1.65;
}

.landing-body .lv2-lock-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.landing-body .lv2-lock-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--lv2-border);
    border-radius: 999px;
    background: #fff;
    color: var(--lv2-text-soft);
    font-size: .84rem;
    font-weight: 800;
}

.landing-body .lv2-lock-features .lv2-icon {
    color: var(--lv2-success);
}

.landing-body .lv2-lock-stage {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: end;
    min-height: 330px;
}

.landing-body .lv2-lock-stage::before {
    content: "";
    position: absolute;
    inset: 8% 2% 14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.18), transparent 68%);
}

.landing-body .lv2-lock-main {
    position: relative;
    z-index: 1;
    display: block;
    width: min(300px, 82%);
}

.landing-body .lv2-lock-main img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 16px 28px rgba(124,58,237,.15));
}

.landing-body .lv2-lock-dialogue {
    position: relative;
    z-index: 2;
    max-width: 310px;
    margin-top: -18px;
    padding: 14px 16px;
    border: 2px solid #312e81;
    border-radius: 18px;
    background: #fff;
    color: var(--lv2-text);
    box-shadow: 0 12px 24px -18px rgba(15,23,42,.45);
}

.landing-body .lv2-lock-dialogue strong,
.landing-body .lv2-lock-dialogue span {
    display: block;
}

.landing-body .lv2-lock-dialogue strong {
    margin-bottom: 4px;
    color: var(--lv2-primary);
    font-size: .86rem;
}

.landing-body .lv2-lock-dialogue span {
    color: var(--lv2-text-soft);
    font-size: .9rem;
    line-height: 1.45;
}

.landing-body .lv2-quiz-card.is-dialogue {
    grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr);
}

.landing-body .lv2-quiz-card.is-dialogue .lv2-quiz-visual {
    position: relative;
    display: flex;
    min-height: 560px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, rgba(124,58,237,.18), transparent 34%),
        linear-gradient(180deg, #eef2ff 0%, #fff 100%);
}

.landing-body .lv2-quiz-backdrop {
    position: absolute;
    inset: 18px 18px auto;
    height: 210px;
    overflow: hidden;
    border: 1px solid rgba(199,210,254,.85);
    border-radius: 20px;
    opacity: .28;
}

.landing-body .lv2-quiz-card.is-dialogue .lv2-quiz-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-body .lv2-quiz-mascot {
    position: relative;
    z-index: 1;
    display: block;
    width: min(260px, 82%);
    height: auto;
    margin: 150px auto 0;
}

.landing-body .lv2-quiz-card.is-dialogue .lv2-quiz-mascot img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 26px rgba(124,58,237,.14));
}

.landing-body .lv2-dialogue-box {
    position: relative;
    z-index: 2;
    padding: 15px 16px 16px;
    border: 2px solid #312e81;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 24px -18px rgba(15,23,42,.5);
}

.landing-body .lv2-dialogue-box::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 34px;
    width: 18px;
    height: 18px;
    border-top: 2px solid #312e81;
    border-left: 2px solid #312e81;
    background: #fff;
    transform: rotate(45deg);
}

.landing-body .lv2-dialogue-box strong {
    display: block;
    margin-bottom: 6px;
    color: var(--lv2-primary);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.landing-body .lv2-dialogue-box p {
    margin: 0;
    color: var(--lv2-text);
    font-weight: 800;
    line-height: 1.45;
}

.landing-body .lv2-mascot-guide-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.landing-body .lv2-mascot-guide-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--lv2-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: var(--lv2-shadow-sm);
}

.landing-body .lv2-mascot-guide-card picture {
    position: relative;
    display: block;
}

.landing-body .lv2-mascot-guide-card picture::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
}

.landing-body .lv2-mascot-guide-card img {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    object-fit: contain;
    display: block;
}

.landing-body .lv2-mascot-guide-card h3 {
    margin: 0 0 5px;
    color: var(--lv2-text);
    font-size: .98rem;
}

.landing-body .lv2-mascot-guide-card p {
    margin: 0;
    color: var(--lv2-text-soft);
    font-size: .84rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .landing-body .lv2-course-grid,
    .landing-body .lv2-functions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-body .lv2-rubro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-body .lv2-lesson-grid,
    .landing-body .lv2-quiz-card {
        grid-template-columns: 1fr;
    }

    .landing-body .lv2-academy-lock,
    .landing-body .lv2-quiz-card.is-dialogue,
    .landing-body .lv2-mascot-guide-row {
        grid-template-columns: 1fr;
    }

    .landing-body .lv2-syllabus-card {
        order: -1;
    }
}

@media (max-width: 760px) {
    .landing-body .lv2-course-grid,
    .landing-body .lv2-functions-grid,
    .landing-body .lv2-rubro-grid,
    .landing-body .lv2-panel-grid,
    .landing-body .lv2-related-grid,
    .landing-body .lv2-functions-hero,
    .landing-body .lv2-lesson-hero {
        grid-template-columns: 1fr;
    }

    .landing-body .lv2-course-body,
    .landing-body .lv2-quiz-panel,
    .landing-body .lv2-syllabus-card,
    .landing-body .lv2-function-card {
        padding: 18px;
    }

    .landing-body .lv2-related-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .landing-body .lv2-functions-mascot {
        max-width: 280px;
    }

    .landing-body .lv2-lock-stage,
    .landing-body .lv2-quiz-card.is-dialogue .lv2-quiz-visual {
        min-height: auto;
    }

    .landing-body .lv2-quiz-mascot {
        margin-top: 130px;
    }

    .landing-body .lv2-mascot-guide-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .landing-body .lv2-mascot-guide-card img {
        width: 78px;
        height: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-body .lv2-course-card,
    .landing-body .lv2-quiz-options button,
    .landing-body .lv2-quiz-progress i {
        transition: none;
    }

    .landing-body .lv2-course-card:hover,
    .landing-body .lv2-quiz-options button:hover {
        transform: none;
    }
}