/* ===================================================================
   Caudal - Tesoreria - sistema visual
   Wall Street, 1986: papel de diario, tinta, laton y pantalla de fosforo
   =================================================================== */
:root{
  --deep:#141110; --deep-2:#1E1917; --deep-3:#2B2320;
  --mint:#C9A227; --mint-2:#E2C264; --mint-dim:#F2E7C6;
  --phos:#3BE07C; --amber:#FFB000; --oxblood:#7E1C15;
  --sand:#E9E1D2; --card:#FBF7EE;
  --ink:#16120F; --ink-2:#463A2E; --ink-3:#6E5F50; --ink-4:#9B8B79;
  --line:#D8CCB6; --line-2:#BFAF93;
  --ok:#1C6A46; --warn:#A06C15; --bad:#8E1B14; --info:#2A4C7D;
  --ok-bg:#E3EFE6; --warn-bg:#F7EBD4; --bad-bg:#F6E3DF; --info-bg:#E4EAF3;
  --r:3px; --r-lg:4px; --r-sm:2px; --r-pill:2px;
  --sh:0 1px 0 rgba(22,18,15,.06),0 10px 24px -18px rgba(22,18,15,.5);
  --sh-lg:0 24px 50px -26px rgba(22,18,15,.65);
  --d:"Playfair Display",Georgia,"Times New Roman",serif;
  --f:Inter,system-ui,-apple-system,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --e:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth}
html,body{margin:0;overflow-x:hidden;background:var(--sand);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--d);letter-spacing:-.012em;margin:0;font-weight:900;line-height:1.06}
p{margin:0}
[hidden]{display:none!important}
.num{font-family:var(--m);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
::selection{background:var(--mint);color:var(--deep)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---------- marca ---------- */
.mark{width:30px;height:30px;border-radius:10px;background:var(--deep);flex:none;display:grid;place-items:center;position:relative;overflow:hidden}
.mark svg{width:70%;height:70%}
.mark--mint{background:var(--mint)}
.mark--xl{width:104px;height:104px;border-radius:32px}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--d);font-size:20px;font-weight:700;letter-spacing:-.03em}
.logo small{font-weight:500;color:var(--ink-3);font-size:13px;letter-spacing:0}

/* ---------- átomos ---------- */
.btn{border:0;border-radius:var(--r-pill);padding:14px 26px;font-weight:600;font-family:var(--m);font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;transition:transform .18s var(--e),background .18s,box-shadow .18s,color .18s}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--mint{background:var(--mint);color:var(--deep);box-shadow:inset 0 -2px 0 rgba(0,0,0,.28)}
.btn--mint:hover{background:var(--mint-2)}
.btn--deep{background:var(--deep);color:var(--mint)}
.btn--deep:hover{background:var(--deep-3)}
.btn--ghost{background:transparent;border:1.5px solid var(--line-2);color:var(--ink)}
.btn--ghost:hover{background:#fff;border-color:var(--ink-3)}
.btn--ghost-lite{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);color:#fff}
.btn--ghost-lite:hover{background:rgba(255,255,255,.16)}
.btn--sm{padding:9px 15px;font-size:11px}
.btn--lg{padding:17px 32px;font-size:13.5px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);background:var(--mint-dim);color:#6b5210;font-family:var(--m);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid rgba(0,0,0,.07)}
.chip--soft{background:#fff;border:1px solid var(--line);color:var(--ink-3)}
.chip--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--warn{background:var(--warn-bg);color:#8a5200}
.chip--bad{background:var(--bad-bg);color:#8e1b1b}
.chip--info{background:var(--info-bg);color:#17457f}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;flex:none;animation:pulse 2.4s infinite}
.dot--warn{background:var(--warn);animation-name:pulseW}
.dot--bad{background:var(--bad);animation-name:pulseB}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,122,82,.5)}70%{box-shadow:0 0 0 9px rgba(15,122,82,0)}100%{box-shadow:0 0 0 0 rgba(15,122,82,0)}}
@keyframes pulseW{0%{box-shadow:0 0 0 0 rgba(183,107,0,.5)}70%{box-shadow:0 0 0 9px rgba(183,107,0,0)}100%{box-shadow:0 0 0 0 rgba(183,107,0,0)}}
@keyframes pulseB{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}70%{box-shadow:0 0 0 9px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:22px}
.lbl{font-family:var(--m);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.mut{color:var(--ink-3)}
.hair{height:1px;background:var(--line);border:0;margin:18px 0}
.up{animation:up .7s var(--e) both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.g{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pos{color:var(--ok)}.neg{color:var(--bad)}

/* ===================================================================
   LANDING
   =================================================================== */
.nav{position:sticky;top:0;z-index:30;background:rgba(246,245,241,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s}
.nav.stick{border-bottom-color:var(--line);background:rgba(246,245,241,.95)}
.nav__in{max-width:1220px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:28px}
.nav__links{display:flex;gap:26px;margin-left:16px}
.nav__links a{font-weight:600;font-size:14.5px;color:var(--ink-2);transition:.18s}
.nav__links a:hover{color:var(--deep)}
.nav__cta{margin-left:auto;display:flex;gap:10px;align-items:center}

.hero{position:relative;overflow:hidden;background:var(--deep);color:#fff;border-radius:0 0 42px 42px}
.hero__orbs i{position:absolute;border-radius:50%;filter:blur(100px);opacity:.34}
.hero__orbs i:nth-child(1){width:60vmax;height:60vmax;background:var(--mint);left:-22vmax;top:-30vmax}
.hero__orbs i:nth-child(2){width:50vmax;height:50vmax;background:#2A4C7D;right:-20vmax;bottom:-28vmax;animation:orb 18s var(--e) infinite alternate}
.hero__orbs i:nth-child(3){width:34vmax;height:34vmax;background:#1C6A46;left:36vw;bottom:-24vmax;opacity:.28;animation:orb 22s var(--e) infinite alternate-reverse}
@keyframes orb{to{transform:translate(6vmax,5vmax) scale(1.14)}}
.hero__in{position:relative;max-width:1220px;margin:0 auto;padding:86px 24px 0;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(40px,5.3vw,70px);letter-spacing:-.04em;font-weight:900}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero__p{font-size:18.5px;color:rgba(255,255,255,.76);margin-top:22px;max-width:30em}
.hero__cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero__micro{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;color:rgba(255,255,255,.55);font-size:13px;font-weight:600}
.hero__micro span{display:flex;align-items:center;gap:8px}
.hero__art{position:relative;padding-bottom:40px}

/* tarjeta flotante de liquidez (hero) */
.float{background:#fff;color:var(--ink);border-radius:24px;box-shadow:var(--sh-lg);padding:22px;animation:up .9s .15s var(--e) both}
.float__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.float__big{font-family:var(--m);font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:1}
.float__big small{font-size:18px;color:var(--ink-3);font-weight:700}
.float__spark{height:92px;margin:14px -6px 6px}
.float__rows{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:14px}
.float__row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.float__row b{margin-left:auto;font-variant-numeric:tabular-nums}
.float__b{width:30px;height:30px;border-radius:9px;background:var(--sand);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink-2);flex:none}
.float2{position:absolute;right:-14px;bottom:-4px;background:var(--deep-2);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 16px;max-width:290px;box-shadow:var(--sh-lg);animation:up .9s .4s var(--e) both}
.float2 .lbl{color:var(--mint)}
.float2 p{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:6px}

.strip{max-width:1220px;margin:0 auto;padding:34px 24px 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--ink-3);font-size:13px;font-weight:600}
.sec{max-width:1220px;margin:0 auto;padding:84px 24px}
.sec__h{max-width:38em;margin-bottom:38px}
.sec__h h2{font-size:clamp(28px,3.6vw,44px)}
.sec__h p{color:var(--ink-2);font-size:17px;margin-top:14px}
.feat{padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:.24s var(--e)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.feat__ic{width:42px;height:42px;border-radius:13px;background:var(--mint-dim);display:grid;place-items:center;margin-bottom:16px}
.feat__ic svg{width:21px;height:21px;stroke:#0b5a44}
.feat h3{font-size:18px;margin-bottom:8px}
.feat p{font-size:14.5px;color:var(--ink-2)}
.feat ul{margin:12px 0 0;padding-left:18px;color:var(--ink-3);font-size:13.5px}
.feat li{margin-bottom:4px}

.show{background:var(--deep);color:#fff;border-radius:42px;padding:54px;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;overflow:hidden;position:relative}
.show h2{font-size:clamp(26px,3.2vw,38px)}
.show p{color:rgba(255,255,255,.72);margin-top:14px}
.show__chat{display:grid;gap:12px}
.bub{padding:14px 18px;border-radius:18px;font-size:14.5px;max-width:86%;animation:up .6s var(--e) both}
.bub--u{background:var(--mint);color:var(--deep);margin-left:auto;border-bottom-right-radius:6px;font-weight:600}
.bub--a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:6px}
.bub--a b{color:var(--mint)}

.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabla td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .16s}
.tabla tbody tr:hover{background:#F7F2E6}
.tabla .r{text-align:right;font-variant-numeric:tabular-nums}
.tw{overflow-x:auto}

.si-no{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sn{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line);background:#fff}
.sn--si{border-color:#C4A85A;background:linear-gradient(180deg,#FBF6E8,#fff)}
.sn--no{background:linear-gradient(180deg,#fbf9f7,#fff)}
.sn h3{font-size:19px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sn ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.sn li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2)}
.sn li i{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;font-style:normal;margin-top:2px}
.sn--si li i{background:var(--ok-bg);color:var(--ok)}
.sn--no li i{background:var(--bad-bg);color:var(--bad)}

.pas{counter-reset:p;display:grid;gap:14px}
.pas__i{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.pas__n{width:44px;height:44px;border-radius:14px;background:var(--deep);color:var(--mint);display:grid;place-items:center;font-family:var(--d);font-weight:800;font-size:17px}
.plan{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:28px;display:flex;flex-direction:column;gap:14px}
.plan--best{background:var(--deep);color:#fff;border-color:var(--deep);box-shadow:var(--sh-lg)}
.plan--best .mut,.plan--best p{color:rgba(255,255,255,.72)}
.plan__p{font-family:var(--m);font-size:34px;font-weight:900;letter-spacing:-.03em}
.plan__p small{font-size:14px;font-weight:600;color:var(--ink-3)}
.plan--best .plan__p small{color:rgba(255,255,255,.6)}
.plan ul{margin:0;padding-left:18px;font-size:14px;display:grid;gap:7px}
.cta{border-radius:42px;background:linear-gradient(135deg,var(--deep),#12433C);color:#fff;padding:60px;text-align:center;position:relative;overflow:hidden}
.cta h2{font-size:clamp(28px,4vw,48px)}
.cta p{color:rgba(255,255,255,.74);margin:16px auto 30px;max-width:44em}
.pie{max-width:1220px;margin:0 auto;padding:44px 24px 60px;color:var(--ink-3);font-size:13px;display:grid;gap:14px}
.pie__n{border-top:1px solid var(--line);padding-top:20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* ===================================================================
   ENTRADA POR CORREO
   =================================================================== */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth__art{background:var(--deep);color:#fff;padding:52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth__art .hero__orbs i{opacity:.3}
.auth__art>*{position:relative}
.auth__q{font-family:var(--d);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.03em;max-width:22em}
.auth__q em{font-style:normal;color:var(--mint)}
.auth__form{display:grid;place-items:center;padding:40px 24px}
.auth__box{width:100%;max-width:410px;animation:up .7s var(--e) both}
.fld{display:grid;gap:7px;margin-bottom:16px}
.fld>span{font-size:13px;font-weight:650;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{padding:14px 16px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;font-size:15px;transition:.18s;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--deep);outline:none;box-shadow:0 0 0 4px rgba(201,162,39,.28)}
.fld small{color:var(--ink-4);font-size:12.5px}
.otp{display:flex;gap:10px;justify-content:space-between;margin:6px 0 16px}
.otp input{width:100%;aspect-ratio:3/4;max-height:70px;text-align:center;font:800 26px var(--d);border:1.5px solid var(--line-2);border-radius:15px;background:#fff;transition:.18s}
.otp input:focus{border-color:var(--deep);outline:none;box-shadow:0 0 0 4px rgba(201,162,39,.28);transform:translateY(-2px)}
.otp.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.hint{background:var(--mint-dim);border:1px dashed #C9A227;color:#6b5210;border-radius:14px;padding:12px 14px;font-size:13px;margin-bottom:18px}
.err{color:var(--bad);font-size:13.5px;font-weight:650;min-height:20px;margin-top:4px}

/* ===================================================================
   ONBOARDING
   =================================================================== */
.ob{min-height:100vh;display:grid;grid-template-rows:auto 1fr}
.ob__top{border-bottom:1px solid var(--line);background:#fff}
.ob__top-in{max-width:980px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:18px}
.steps{display:flex;gap:8px;margin-left:auto;align-items:center}
.steps i{width:30px;height:5px;border-radius:99px;background:var(--line-2);transition:.3s var(--e)}
.steps i.on{background:var(--mint);width:44px}
.steps i.done{background:var(--deep)}
.ob__body{max-width:980px;margin:0 auto;padding:44px 24px 80px;width:100%}
.ob__h{margin-bottom:28px}
.ob__h .lbl{color:var(--mint);color:#6b5210;margin-bottom:10px;display:block}
.ob__h h2{font-size:clamp(26px,3.4vw,38px)}
.ob__h p{color:var(--ink-2);margin-top:12px;max-width:44em}
.pick{display:grid;gap:12px}
.pick__i{display:grid;grid-template-columns:46px 1fr auto;gap:16px;align-items:center;padding:18px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;transition:.2s var(--e)}
.pick__i:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh)}
.pick__i.on{border-color:var(--deep);box-shadow:0 0 0 3px rgba(201,162,39,.3)}
.pick__ic{width:46px;height:46px;border-radius:14px;background:var(--sand);display:grid;place-items:center;font-weight:800;font-family:var(--d);font-size:13px;color:var(--ink-2)}
.pick__i.on .pick__ic{background:var(--mint);color:var(--deep)}
.pick__i b{display:block;font-size:15.5px}
.pick__i small{color:var(--ink-3);font-size:13px}
.tick{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none;transition:.2s}
.pick__i.on .tick{background:var(--deep);border-color:var(--deep)}
.pick__i.on .tick svg{stroke:var(--mint)}
.tick svg{width:13px;height:13px;stroke:transparent;stroke-width:3}
.ob__nav{display:flex;gap:12px;margin-top:32px;align-items:center}
.drop{border:2px dashed var(--line-2);border-radius:var(--r);padding:34px;text-align:center;background:#fff;transition:.2s}
.drop.hot{border-color:var(--mint);background:var(--mint-dim)}
.fila-arch{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:10px;font-size:14px}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;flex:1;max-width:160px;margin-left:auto}
.bar i{display:block;height:100%;background:var(--mint);width:0;transition:width .9s var(--e)}

/* ===================================================================
   APP (shell de escritorio)
   =================================================================== */
.shell{display:grid;grid-template-columns:258px 1fr;min-height:100vh}
.side{background:var(--deep);color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;z-index:25}
.side .logo{color:#fff;padding:6px 10px}
.side .logo small{color:var(--mint)}
.snav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.snav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;color:rgba(255,255,255,.7);font-weight:600;font-size:14.5px;transition:.16s}
.snav a svg{width:19px;height:19px;flex:none;stroke-width:1.9}
.snav a:hover{background:rgba(255,255,255,.08);color:#fff}
.snav a.on{background:var(--mint);color:var(--deep)}
.snav a .cnt{margin-left:auto;background:rgba(255,255,255,.16);border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700}
.snav a.on .cnt{background:rgba(22,18,15,.15)}
.snav__sep{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:16px 13px 6px;font-weight:700}
.side__pie{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:grid;gap:10px}
.usr{display:flex;align-items:center;gap:10px;font-size:13px}
.usr__av{width:34px;height:34px;border-radius:11px;background:var(--mint);color:var(--deep);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.usr b{display:block;font-size:13.5px}
.usr small{color:rgba(255,255,255,.5)}
.side__x{font-size:12px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:8px}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:rgba(246,245,241,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:16px}
.top h1{font-size:21px}
.top__s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.top__r{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;place-items:center}
.view{padding:26px;display:grid;gap:18px;animation:up .5s var(--e) both}

/* KPI */
.kpi{padding:20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);position:relative;overflow:hidden;transition:.24s var(--e)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.kpi:hover::after{transform:scaleX(1)}
.kpi__v{font-family:var(--m);font-weight:600;font-size:30px;font-weight:900;letter-spacing:-.035em;line-height:1.05;margin:10px 0 4px}
.kpi__v small{font-size:15px;color:var(--ink-3);font-weight:700}
.kpi__d{font-size:12.5px;color:var(--ink-3)}
.kpi--deep{background:var(--deep);color:#fff;border-color:var(--deep)}
.kpi--deep .lbl{color:rgba(255,255,255,.5)}
.kpi--deep .kpi__d{color:rgba(255,255,255,.6)}
.kpi--deep .kpi__v small{color:var(--mint)}
.kpi--bad::after{background:var(--bad)}
.kpi--warn::after{background:var(--warn)}
.spark{height:34px;margin-top:10px;display:block}

.ch{position:relative;height:320px}
.ch--sm{height:210px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;border-radius:99px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink-3);transition:.18s}
.seg button.on{background:var(--deep);color:var(--mint)}
.bank{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.bank:last-child{border-bottom:0}
.bank__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;flex:none;font-family:var(--d)}
.bank b{display:block;font-size:14.5px}
.bank small{color:var(--ink-3);font-size:12.5px}
.bank__v{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.bank__v b{font-family:var(--m);font-size:16px}
.mini{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.mini i{display:block;height:100%;background:var(--deep);width:0;transition:width 1.1s var(--e)}
.mini i.mint{background:var(--mint)}
.mini i.bad{background:var(--bad)}
.mini i.warn{background:var(--warn)}

.alert{display:grid;grid-template-columns:38px 1fr auto;gap:14px;padding:16px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);border-left:3px solid var(--warn);align-items:center}
.alert--bad{border-left-color:var(--bad)}
.alert--info{border-left-color:var(--info)}
.alert--ok{border-left-color:var(--ok)}
.alert__ic{width:38px;height:38px;border-radius:12px;background:var(--warn-bg);display:grid;place-items:center}
.alert--bad .alert__ic{background:var(--bad-bg)}
.alert--info .alert__ic{background:var(--info-bg)}
.alert--ok .alert__ic{background:var(--ok-bg)}
.alert b{font-size:14.5px}
.alert p{font-size:13px;color:var(--ink-3);margin-top:3px}

/* chat IA */
.ia{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.chat{display:flex;flex-direction:column;height:min(70vh,620px);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat__h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.chat__b{flex:1;overflow-y:auto;padding:18px;display:grid;gap:14px;align-content:start;background:linear-gradient(180deg,#F7F2E6,#fff)}
.msg{max-width:84%;padding:13px 17px;border-radius:18px;font-size:14.5px;animation:up .45s var(--e) both;white-space:pre-wrap}
.msg--u{background:var(--deep);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.msg--a{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:var(--sh)}
.msg--a b{color:#6b5210}
.msg__meta{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink-4)}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:ty 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat__f{border-top:1px solid var(--line);padding:12px;display:flex;gap:10px;background:#fff}
.chat__f input{flex:1;border:1.5px solid var(--line-2);border-radius:99px;padding:12px 18px;font-size:14.5px}
.chat__f input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px rgba(201,162,39,.25)}
.sug{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}
.sug button{border:1px solid var(--line-2);background:#fff;border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.18s}
.sug button:hover{border-color:var(--deep);background:var(--mint-dim);color:#6b5210}
.esc{padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;display:grid;gap:8px}
.esc.on{border-color:var(--deep);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.slid{display:grid;gap:6px}
.slid input[type=range]{width:100%;accent-color:var(--deep)}
.slid .spread{font-size:13px}

.foot{padding:22px 26px 46px;color:var(--ink-4);font-size:12.5px;display:grid;gap:8px}
.foot b{color:var(--ink-3)}

/* ===================================================================
   MÓVIL
   =================================================================== */
.mob{max-width:520px;margin:0 auto;min-height:100vh;background:var(--sand);padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.mob__top{background:var(--deep);color:#fff;padding:20px 20px 26px;border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.mob__top .hero__orbs i{opacity:.22;filter:blur(70px)}
.mob__top>*{position:relative}
.mob__big{font-family:var(--m);font-size:38px;font-weight:900;letter-spacing:-.04em;line-height:1}
.mob__big small{font-size:16px;color:var(--mint);font-weight:700}
.mob__body{padding:16px;display:grid;gap:14px}
.tabbar{position:fixed;bottom:0;left:0;right:0;background:rgba(251,247,238,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 6px calc(12px + env(safe-area-inset-bottom));z-index:30;max-width:520px;margin:0 auto}
.tabbar button{border:0;background:transparent;display:grid;justify-items:center;gap:4px;padding:6px 0;color:var(--ink-4);font-size:11px;font-weight:700;border-radius:14px;transition:.18s}
.tabbar button svg{width:22px;height:22px;stroke-width:1.9}
.tabbar button.on{color:var(--deep)}
.tabbar button.on svg{stroke:#0b5a44}
.mrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow__v{margin-left:auto;text-align:right;font-weight:600;font-family:var(--m);font-size:13px}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1100px){
  .hero__in{grid-template-columns:1fr;padding-top:60px;gap:36px}
  .hero__art{max-width:520px}
  .float2{position:static;margin-top:16px;max-width:none}
  .show{grid-template-columns:1fr;padding:34px;border-radius:30px}
  .ia{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:1fr}
  .auth__art{display:none}
}
@media (max-width:860px){
  .nav__links{display:none}
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:264px;transform:translateX(-102%);transition:transform .3s var(--e);box-shadow:var(--sh-lg)}
  .side.open{transform:none}
  .menu-btn{display:grid}
  .g3,.g2,.si-no{grid-template-columns:1fr}
  .sec{padding:56px 20px}
  .cta{padding:38px 24px;border-radius:30px}
  .view{padding:16px}
  .top{padding:12px 16px}
  .pas__i{grid-template-columns:1fr}
}
@media (max-width:520px){
  .g4{grid-template-columns:1fr}
  .float__big{font-size:34px}
  .hero{border-radius:0 0 28px 28px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ticker{overflow-x:auto}
  .ticker__t{animation:none!important;transform:none!important}
  .ticker__t+.ticker__t{display:none}
}

/* ===================================================================
   Wall Street 1986 - piezas propias
   =================================================================== */
.rule{border:0;border-top:3px double var(--ink);opacity:.45;margin:22px 0}
.pinstripe{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 7px)}

/* cinta de cotizaciones */
.ticker{background:var(--deep);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  overflow:hidden;white-space:nowrap;display:flex;contain:content}
.ticker__t{display:flex;flex:0 0 auto;align-items:center;padding:9px 0;font-family:var(--m);font-size:11.5px;
  letter-spacing:.09em;color:rgba(255,255,255,.62);
  animation:tick var(--tk-dur,90s) linear infinite;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.ticker:hover .ticker__t,.ticker:focus-within .ticker__t{animation-play-state:paused}
.ticker__t span{flex:0 0 auto;padding:0 22px;border-right:1px solid rgba(255,255,255,.14)}
.ticker__t b{color:#fff;font-weight:600;margin-right:7px}
.ticker__t i{font-style:normal;margin-left:6px}
.ticker__t i.up{color:var(--phos)}
.ticker__t i.dn{color:#FF7A6B}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}}

/* cabecera de diario */
.masthead{text-align:center;padding:30px 0 20px;border-bottom:3px double currentColor}
.masthead__k{font-family:var(--m);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;opacity:.72}
.masthead h1{font-size:clamp(38px,6.6vw,86px);letter-spacing:-.02em;margin:12px 0 10px}
.masthead__s{font-family:var(--d);font-style:italic;font-size:clamp(15px,2vw,21px);opacity:.82}

/* pantalla de fosforo */
.crt{position:relative;background:#0A0F0B;border:1px solid #223027;border-radius:var(--r);overflow:hidden;color:var(--phos);font-family:var(--m)}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.crt__h{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #223027;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7FE6AA}
.crt__b{padding:14px;font-size:12.5px;line-height:1.75}
.crt b{color:#fff}
.crt .dim{color:#3d7a55}
.blink{animation:bl 1.15s steps(2) infinite}
@keyframes bl{50%{opacity:0}}

/* foto */
.shot{position:relative;overflow:hidden;background:var(--deep)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.5) contrast(1.12) brightness(.6) sepia(.35)}
.shot__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,16,.55),rgba(20,17,16,.92)),linear-gradient(115deg,rgba(126,28,21,.4),transparent 58%,rgba(201,162,39,.3))}
.shot__cap{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* tablas y columnas de diario */
.tabla th{font-family:var(--m);font-size:10px;letter-spacing:.14em}
.tabla td.r{font-family:var(--m)}
.cols{column-count:2;column-gap:38px;column-rule:1px solid var(--line)}
.cols p{margin-bottom:14px;break-inside:avoid}
.dcap::first-letter{float:left;font-family:var(--d);font-size:56px;line-height:.82;padding:6px 10px 0 0;font-weight:900}
@media (max-width:760px){.cols{column-count:1}}

/* ===================================================================
   Grillas de la app (clases, no estilos en linea: los inline
   no se pueden sobreescribir desde una media query)
   =================================================================== */
.gx-main{grid-template-columns:1.5fr 1fr}
.gx-even{grid-template-columns:1fr 1.06fr}
@media (max-width:1040px){.gx-main,.gx-even{grid-template-columns:1fr}}

/* ===================================================================
   PASADA MOVIL  —  <=860px
   =================================================================== */
@media (max-width:860px){
  html,body{font-size:14.5px}

  /* barra superior de la app: una linea, sin ruido */
  .top{padding:10px 14px;gap:10px}
  .top h1{font-size:18px}
  .top__s{display:none}
  .top__r{gap:6px}
  .top__r .chip{font-size:9.5px;padding:4px 8px}
  #reloj{display:none}
  .menu-btn{width:38px;height:38px;flex:none}

  /* KPI compactos: dos por fila, numero legible */
  .view{padding:14px;gap:14px}
  .g{gap:12px}
  .g4{grid-template-columns:1fr 1fr}
  .kpi{padding:14px}
  .kpi__v{font-size:21px;margin:7px 0 3px}
  .kpi__v small{font-size:11px}
  .kpi__d{font-size:11.5px;line-height:1.45}
  .lbl{font-size:9.5px;letter-spacing:.13em}
  .card.pad{padding:16px}

  /* graficos mas bajos en pantalla angosta */
  .ch{height:230px}
  .ch--sm{height:180px}

  /* tablas: densas y con desplazamiento propio */
  .tabla{font-size:12.5px}
  .tabla th{font-size:9px;padding:0 8px 8px}
  .tabla td{padding:9px 8px}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}

  .alert{grid-template-columns:30px 1fr;padding:12px;gap:10px}
  .alert__ic{width:30px;height:30px}
  .alert b{font-size:13px}
  .alert p{font-size:12px}
  .alert>.chip{display:none}

  .bank{padding:11px 0;gap:10px}
  .bank__ic{width:34px;height:34px;font-size:11px}
  .bank b{font-size:13.5px}
  .bank small{font-size:11.5px}

  .seg{width:100%;display:flex}
  .seg button{flex:1;padding:9px 6px;font-size:11.5px}
  .chat{height:66vh}
  .sug{padding:0 12px 10px}
  .sug button{font-size:11.5px;padding:7px 11px}
  .foot{padding:16px 14px 40px;font-size:11.5px}

  /* areas tactiles minimas */
  .btn--sm{padding:11px 15px}
  .snav a{padding:13px}
}

/* ===================================================================
   PASADA MOVIL  —  PORTADA
   =================================================================== */
@media (max-width:860px){
  .art{padding:40px 18px}
  .art__h{padding-bottom:14px;margin-bottom:20px}
  .art__h h2{font-size:26px}
  .art__h .sub{font-size:15px;margin-top:8px}
  .art__body{font-size:14.5px;line-height:1.62}
  .art__k{font-size:9.5px;letter-spacing:.2em}
  .cols p{margin-bottom:11px}
  .dcap::first-letter{font-size:44px}
  .quote{font-size:19px;padding-left:16px}
  .fx{padding:16px 0;grid-template-columns:34px 1fr;gap:14px}
  .fx h3{font-size:17px}
  .fx p{font-size:13.5px}
  .fx ul{font-size:12.5px}
  .plan{padding:20px}
  .plan ul{font-size:13px}
  .sn{padding:20px}
  .sn li{font-size:13.5px}
  .masthead{padding:18px 0 14px}
  .masthead h1{font-size:44px;margin:8px 0 6px}
  .masthead__s{font-size:14.5px}
  .masthead__k{font-size:9px;letter-spacing:.2em}
  .pie{padding:26px 18px 44px;font-size:11.5px}
  .pie__n{gap:12px}
  .ticker__t{font-size:10.5px;padding:7px 0}
  .ticker__t span{padding:0 14px}
}
@media (max-width:520px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .kpi__v{font-size:24px}
  .band__in{grid-template-columns:1fr 1fr;padding:18px 16px;gap:14px}
  .band .v{font-size:19px}
}

/* ===================================================================
   Ajustes finos de movil (segunda pasada, sobre medicion real)
   =================================================================== */
@media (max-width:860px){
  /* cabeceras de vista: el selector arriba, el dato debajo, nada cortado */
  .view>.spread{flex-direction:column;align-items:stretch;gap:10px}
  .view>.spread>.chip{align-self:flex-start}
  .seg button{white-space:nowrap}

  /* chat: mas conversacion, menos botonera */
  .chat{height:74vh}
  .chat__h{padding:11px 13px;gap:8px}
  .chat__h b{font-size:14px}
  .chat__h .chip{display:none}
  .chat__b{padding:13px;gap:11px}
  .msg{max-width:92%;font-size:13.5px;padding:11px 14px}
  .sug{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 12px 11px;scrollbar-width:none}
  .sug::-webkit-scrollbar{display:none}
  .sug button{flex:0 0 auto}
  .chat__f{padding:10px}
  .chat__f input{font-size:16px;padding:11px 15px}  /* 16px evita el zoom de iOS */
  .fld input,.fld select,.fld textarea{font-size:16px}

  /* palancas del escenario */
  .slid input[type=range]{height:28px}
  .esc{padding:12px}
}
@media (max-width:520px){
  .g4{grid-template-columns:1fr 1fr}
  .kpi__v{font-size:19px;letter-spacing:-.04em}
  .kpi__d{font-size:10.5px}
  .kpi{padding:12px}
  .lbl{font-size:9px}
  /* la tarjeta oscura de saldo manda: ocupa el ancho entero */
  .g4>.kpi--deep{grid-column:1/-1}
  .g4>.kpi--deep .kpi__v{font-size:30px}
  .ch{height:210px}
}