/* ==========================================================================
   Aurex AI — Sistema de diseño v2 · "Dark Ember"
   Negro cálido · luz naranja incandescente · acento celeste. Ver DESIGN.md.
   Fuente única de tokens: la consumen views/layout.twig y views/landing.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* ---- Fondo ---- */
  --void:      #08070A;
  --base:      #0C0B10;
  --surface:   #131218;
  --surface-2: #191822;
  --surface-3: #22212C;

  /* ---- Tinta ---- */
  --ink:   #FFFFFF;
  --ink-2: #C9C6D0;
  --ink-3: #918D9E;
  --ink-4: #5F5B6B;

  /* ---- Reglas ---- */
  --rule:        rgba(255,255,255,.07);
  --rule-strong: rgba(255,255,255,.13);

  /* ---- Ember: señal primaria ---- */
  --ember:      #FF7A18;
  --ember-hi:   #FFA23D;
  --ember-deep: #C2410C;
  --ember-glow: rgba(255,122,24,.28);
  --ember-wash: rgba(255,122,24,.10);
  --on-ember:   #140A02;

  /* ---- Ice: acento secundario ---- */
  --ice:       #7DD3FC;
  --ice-deep:  #38BDF8;
  --ice-glow:  rgba(125,211,252,.20);
  --ice-wash:  rgba(125,211,252,.09);

  /* ---- Semántica de dato (sólo numerales) ---- */
  --gain: #34D399;
  --loss: #FB7185;
  --gain-wash: rgba(52,211,153,.10);
  --loss-wash: rgba(251,113,133,.10);

  /* ---- Tipografía ---- */
  --font-display:'Outfit',system-ui,sans-serif;
  --font-ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-2xs:.6875rem; --t-xs:.75rem;  --t-sm:.875rem; --t-base:1rem;
  --t-lg:1.125rem;  --t-xl:1.25rem; --t-2xl:1.5rem; --t-3xl:1.875rem;
  --t-4xl:2.25rem;  --t-5xl:3rem;   --t-6xl:3.75rem; --t-7xl:4.5rem;

  /* ---- Espacio ---- */
  --s-0:0; --s-1:2px; --s-2:4px; --s-3:8px; --s-4:12px; --s-5:16px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;
  --s-11:80px; --s-12:96px;

  /* ---- Radio ---- */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:20px; --r-full:999px;

  /* ---- Elevación ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 16px 48px rgba(0,0,0,.55);
  --glow-ember:0 0 0 1px rgba(255,122,24,.28), 0 8px 32px rgba(255,122,24,.18);
  --glow-ice:0 0 0 1px rgba(125,211,252,.24), 0 8px 28px rgba(125,211,252,.12);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:260ms; --dur-4:640ms;

  /* ---- Layout ---- */
  --w-page:1280px;
  --w-prose:66ch;
  --w-hero:760px;
  --side-w:264px;
  --top-h:64px;
  --nav-h:64px;
  --pad-x:20px;

  /* ======================================================================
     ALIAS HEREDADOS — no borrar.
     Las vistas tienen style="…" inline que referencian estos nombres.
     Se remapean a la paleta nueva. Ver DESIGN.md §8.
     ====================================================================== */
  --bg:var(--base); --bg-2:var(--surface); --bg-3:var(--surface-2);
  --card:var(--surface); --card-border:var(--rule);
  --text:var(--ink); --text-2:var(--ink-2);
  --muted:var(--ink-3); --muted-2:var(--ink-3);

  --cyan:var(--ice); --cyan-soft:var(--ice); --cyan-deep:var(--ice-deep);
  --blue:var(--ice-deep); --blue-soft:var(--ice);
  --violet:var(--ember); --violet-soft:var(--ember-hi);
  --magenta:var(--ember); --magenta-soft:var(--ember-hi);
  --gold:var(--ember); --gold-soft:var(--ember-hi);
  --green:var(--gain); --green-soft:var(--gain); --green-deep:var(--gain);
  --red:var(--loss); --red-soft:var(--loss);

  --grad:linear-gradient(90deg,var(--ember),var(--ember-hi));
  --grad-brand:linear-gradient(90deg,var(--ember),var(--ember-hi));
  --grad-3:linear-gradient(90deg,var(--ember),var(--ember-hi),var(--ice));
  --admin-grad:linear-gradient(90deg,var(--ember),var(--ice));
  --glow-cyan:var(--glow-ice); --glow-green:var(--glow-ember);

  --fd:var(--font-display); --fb:var(--font-ui); --fm:var(--font-mono);
}

@media (min-width:768px){ :root{ --pad-x:32px } }
@media (min-width:1280px){ :root{ --pad-x:40px } }

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  background:var(--base);
}
body{
  background:var(--base);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--t-base);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-weight:300;letter-spacing:-.025em;line-height:1.06}
p{text-wrap:pretty}

a{color:inherit;text-decoration:none}
a:not([class]){color:var(--ice);text-decoration:underline;text-underline-offset:2px}
a:not([class]):hover{color:var(--ice-deep)}

button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img,svg,canvas,video{display:block;max-width:100%}
/* El display:block de arriba pisaba el estilo de UA de [hidden]: lo restituimos. */
[hidden]{display:none !important}
table{border-collapse:collapse;width:100%}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
code{font-family:var(--font-mono);font-size:.9em}

::selection{background:var(--ember);color:var(--on-ember)}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--base)}
::-webkit-scrollbar-thumb{background:var(--surface-3);border:3px solid var(--base);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

:focus{outline:none}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:var(--r-1)}

.skip-link{
  position:absolute;left:var(--s-4);top:calc(-1 * var(--s-12));z-index:200;
  padding:var(--s-3) var(--s-5);
  background:var(--ember);color:var(--on-ember);
  border-radius:var(--r-2);font-size:var(--t-sm);font-weight:700;
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{top:var(--s-4)}

main,nav,header,footer,section,aside{position:relative}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--w-page);margin-inline:auto;padding-inline:var(--pad-x)}
.prose{max-width:var(--w-prose)}

.overline{
  display:block;font-family:var(--font-ui);
  font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);
}
.rule{height:1px;background:var(--rule);border:0}

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA UTILITARIA
   -------------------------------------------------------------------------- */
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1;
  letter-spacing:-.02em;
}
.num{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums}

/* Las cifras grandes van en display con tabular-nums, no en mono: el punto
   decimal monoespaciado abre un hueco enorme ("$0 . 00"). El mono queda para
   addresses, hashes e ids, que es donde el ancho fijo sirve. */
.kpi .value .mono,
.bigger .mono,
.mini-v .mono,
.kpi-cell dd .mono,
.hero-strip dd .mono,
.rc-count .mono,
.rt-v .mono,
.value .mono{
  font-family:var(--font-display);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.t-gain{color:var(--gain)}
.t-loss{color:var(--loss)}
.t-ice{color:var(--ice)}
.t-muted{color:var(--ink-3)}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-height:44px;padding:var(--s-3) var(--s-6);
  border-radius:var(--r-2);
  font-family:var(--font-ui);
  font-size:var(--t-sm);font-weight:600;line-height:1.2;
  text-align:center;white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease);
}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn:disabled{
  background:var(--surface-3);border-color:var(--rule);color:var(--ink-4);
  cursor:not-allowed;transform:none;box-shadow:none;
}
.btn-pill{border-radius:var(--r-full)}

.btn-primary{background:var(--ember);color:var(--on-ember);border-color:var(--ember)}
.btn-primary:hover:not([disabled]){background:var(--ember-hi);border-color:var(--ember-hi);box-shadow:var(--glow-ember)}

.btn-ghost{background:var(--surface-2);color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover:not([disabled]){background:var(--surface-3);border-color:rgba(255,255,255,.22)}

.btn-quiet{background:none;border-color:transparent;color:var(--ink-2);padding-inline:var(--s-3)}
.btn-quiet:hover:not([disabled]){color:var(--ink)}

.btn-danger{background:transparent;color:var(--loss);border-color:rgba(251,113,133,.35)}
.btn-danger:hover:not([disabled]){background:var(--loss-wash);border-color:var(--loss)}

.btn-sm{min-height:34px;padding:var(--s-2) var(--s-4);font-size:var(--t-xs);gap:var(--s-2)}
.btn-block{width:100%}

/* --------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-5)}
.field > label,.form-label{
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}

.input,
input[type=text],input[type=email],input[type=number],input[type=password],
select,textarea{
  width:100%;min-height:44px;
  padding:var(--s-4);
  background:var(--surface-3);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-2);
  color:var(--ink);
  font-size:var(--t-sm);line-height:1.4;
  outline:none;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.input::placeholder,input::placeholder,textarea::placeholder{color:var(--ink-4)}
.input:hover,input:hover:not(:disabled){border-color:rgba(255,255,255,.22)}
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(255,122,24,.18);
  background:var(--surface-2);
}
.input:disabled,input:disabled{background:var(--surface);color:var(--ink-4);cursor:not-allowed}
.input.mono,input.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.field-error{color:var(--loss);font-size:var(--t-xs);font-weight:500}
.field-hint{color:var(--ink-3);font-size:var(--t-xs)}

.switch{
  position:relative;width:44px;height:26px;flex:0 0 auto;
  background:var(--surface-3);border:1px solid var(--rule-strong);
  border-radius:var(--r-full);padding:0;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.switch::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;
  background:var(--ink-3);border-radius:var(--r-full);
  transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.switch.on{background:var(--ember-wash);border-color:var(--ember);box-shadow:var(--glow-ember)}
.switch.on::after{transform:translateX(18px);background:var(--ember)}

/* --------------------------------------------------------------------------
   7. SUPERFICIES
   -------------------------------------------------------------------------- */
.card,.surface{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-4);
  padding:var(--s-6);
}
.card.featured{
  border-color:rgba(255,122,24,.28);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(255,122,24,.10),transparent 58%),
    var(--surface);
}
.card.success{border-color:rgba(52,211,153,.24)}
.card.warn{border-color:rgba(255,122,24,.24)}

/* El glassmorphism del look anterior se elimina; los nombres siguen vivos. */
.glass,.glass-strong{
  background:var(--surface);
  border:1px solid var(--rule);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

.hover-lift{transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.hover-lift:hover{border-color:var(--rule-strong);background:var(--surface-2)}

.alert{
  padding:var(--s-5);
  border:1px solid var(--rule-strong);
  border-left:3px solid var(--ink-3);
  border-radius:var(--r-3);
  background:var(--surface);
  font-size:var(--t-sm);
  margin-bottom:var(--s-5);
}
.alert-warn{border-left-color:var(--ember);background:var(--ember-wash)}
.alert-ok{border-left-color:var(--gain);background:var(--gain-wash)}
.alert-err{border-left-color:var(--loss);background:var(--loss-wash)}

/* Ficha técnica clave/valor */
.spec{display:grid;gap:0}
.spec-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-4) 0;border-top:1px solid var(--rule);
}
.spec-row:first-child{border-top:0}
.spec-k{font-size:var(--t-xs);color:var(--ink-3);flex:0 0 auto}
.spec-v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-sm);color:var(--ink-2);text-align:right;overflow-wrap:anywhere;
}
.spec-v a{color:var(--ice)}

/* --------------------------------------------------------------------------
   8. CHIPS Y ESTADOS
   -------------------------------------------------------------------------- */
.chip,.pill,.status-pill{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-full);
  background:var(--surface);
  font-size:var(--t-xs);font-weight:500;color:var(--ink-2);
  white-space:nowrap;
}
.chip svg{width:14px;height:14px;flex:0 0 auto;color:var(--ink-3)}
.chip .dot,.pill .dot,.status-pill .dot{
  width:6px;height:6px;border-radius:var(--r-full);background:var(--ember);flex:0 0 auto;
}
.chip.ice svg{color:var(--ice)}
.chip.ice .dot{background:var(--ice)}
.pill.ok,.status-pill.ok{border-color:rgba(52,211,153,.35);color:var(--gain);background:var(--gain-wash)}
.pill.ok .dot,.status-pill.ok .dot{background:var(--gain)}
.pill.warn{border-color:rgba(255,122,24,.35);color:var(--ember-hi);background:var(--ember-wash)}
.pill.err{border-color:rgba(251,113,133,.35);color:var(--loss);background:var(--loss-wash)}
.pill.err .dot{background:var(--loss)}

.live-dot{
  width:6px;height:6px;border-radius:var(--r-full);
  background:var(--ember);flex:0 0 auto;
  box-shadow:0 0 0 3px var(--ember-wash);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* --------------------------------------------------------------------------
   9. TABLAS
   -------------------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);
  border-radius:var(--r-3);
  background:var(--surface);
}
.table,.table-wrap table{width:100%;font-size:var(--t-sm)}
.table th,.table-wrap th{
  text-align:left;padding:var(--s-4);
  background:var(--surface-2);
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--rule-strong);
  white-space:nowrap;
}
.table td,.table-wrap td{
  padding:var(--s-4);border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink-2);
}
.table tbody tr:last-child td,.table-wrap tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover,.table-wrap tbody tr:hover{background:var(--surface-2)}
.table .r,.table-wrap .r{text-align:right;font-variant-numeric:tabular-nums}
.table .empty,.table-wrap .empty{
  text-align:center;padding:var(--s-10) var(--s-5);color:var(--ink-3);font-size:var(--t-sm);
}

/* --------------------------------------------------------------------------
   10. TOAST
   -------------------------------------------------------------------------- */
#toast-container{
  position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:500;
  display:flex;flex-direction:column;gap:var(--s-3);pointer-events:none;
}
.toast{
  pointer-events:auto;max-width:380px;
  padding:var(--s-4) var(--s-5);
  background:var(--surface-2);
  border:1px solid var(--rule-strong);
  border-left:3px solid var(--ember);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-2);
  font-size:var(--t-sm);font-weight:500;color:var(--ink);
  animation:toast-in var(--dur-3) var(--ease-out) both;
}
.toast.ok{border-left-color:var(--gain)}
.toast.err{border-left-color:var(--loss)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   11. MODAL
   -------------------------------------------------------------------------- */
.modal-bg{
  position:fixed;inset:0;z-index:300;
  background:rgba(8,7,10,.72);
  display:none;align-items:center;justify-content:center;padding:var(--s-5);
}
.modal-bg.open{display:flex}
.modal-box{
  width:100%;max-width:480px;
  background:var(--surface-2);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-4);
  box-shadow:var(--shadow-2);
  padding:var(--s-6);
  animation:modal-in var(--dur-3) var(--ease-out) both;
}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   12. REVEAL + COMPAT DE ANIMACIONES HEREDADAS
   -------------------------------------------------------------------------- */
/* Sólo se esconde si hay JS para volver a mostrarlo. Sin JS, todo visible. */
.js .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;will-change:auto}
.reveal.d1{transition-delay:80ms}
.reveal.d2{transition-delay:160ms}
.reveal.d3{transition-delay:240ms}
.reveal.d4{transition-delay:320ms}

.anim-fade-in,.anim-fade-in-up,.anim-slide-in-right,.anim-scale-in{
  animation:quiet-in var(--dur-3) var(--ease-out) both;
}
@keyframes quiet-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anim-float{animation:none}
.shimmer{background:var(--surface-2);animation:none}
.stagger > *{animation:quiet-in var(--dur-3) var(--ease-out) both}
.stagger > *:nth-child(2){animation-delay:50ms}
.stagger > *:nth-child(3){animation-delay:100ms}
.stagger > *:nth-child(4){animation-delay:150ms}
.stagger > *:nth-child(5){animation-delay:200ms}

/* Decoración del look anterior: fuera. */
.nebula,.grid-overlay,#stars{display:none !important}

/* ==========================================================================
   13. NAV DE LANDING — barra horizontal
   ========================================================================== */
.topnav{
  position:sticky;top:0;z-index:80;
  background:rgba(12,11,16,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.topnav.scrolled{border-bottom-color:var(--rule);background:rgba(12,11,16,.94)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:var(--nav-h)}

.logo{display:flex;align-items:center;gap:var(--s-3);color:var(--ink);flex:0 0 auto}
.logo-mark{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--r-2);
  background:linear-gradient(140deg,var(--ember),var(--ember-deep));
  color:var(--on-ember);
  box-shadow:0 4px 16px rgba(255,122,24,.30);
}
.logo-word{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-base);
  letter-spacing:-.02em;white-space:nowrap;
}
.logo-word em{font-style:normal;color:var(--ember)}
.logo-sub{display:block;font-family:var(--font-ui);font-size:var(--t-2xs);font-weight:500;color:var(--ink-3);letter-spacing:.02em}

.nav-right{display:flex;align-items:center;gap:var(--s-6)}
.net-badge{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--rule-strong);border-radius:var(--r-full);
  background:var(--surface);
  font-size:var(--t-2xs);font-weight:500;color:var(--ink-3);
}
.net-short{display:none}

.nav-link{
  position:relative;display:inline-flex;align-items:center;
  padding:var(--s-3) 0;
  font-size:var(--t-sm);font-weight:500;color:var(--ink-3);
  white-space:nowrap;
  transition:color var(--dur-2) var(--ease);
}
.nav-link::after{
  content:'';position:absolute;left:0;right:0;bottom:var(--s-1);height:1.5px;
  background:var(--ember);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease);
}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.active{color:var(--ink);font-weight:600}
.nav-link.active::after{transform:scaleX(1)}

/* Piezas exclusivas del panel móvil */
.nav-panel-label,.nav-panel-foot{display:none}
.topnav .nav-right > .net-badge{display:none}

.burger,.nav-close{display:none}
.burger{
  width:44px;height:44px;margin-right:calc(var(--s-3) * -1);
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:var(--r-2);transition:background-color var(--dur-2) var(--ease);
}
.burger:hover{background:var(--surface-2)}
.burger span{
  display:block;width:18px;height:1.5px;border-radius:2px;background:var(--ink);
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease);
}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-close{
  position:absolute;top:var(--s-4);right:var(--pad-x);
  width:44px;height:44px;place-items:center;border-radius:var(--r-2);color:var(--ink);
}
.nav-close:hover{background:var(--surface-2)}

@media (max-width:900px){
  /* CLAVE: backdrop-filter en .topnav lo vuelve bloque contenedor de sus hijos
     position:fixed — el panel quedaba encerrado en la franja del header.
     En móvil el nav va opaco y sin filtro para que el panel sea de viewport. */
  .topnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--base)}
  .topnav.scrolled{background:var(--base)}

  .burger{display:flex}
  .nav-close{display:grid}
  .net-full{display:none}
  .net-short{display:inline}

  /* ---- Panel a pantalla completa ---- */
  .nav-right{
    position:fixed;inset:0;z-index:120;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;
    padding:calc(var(--nav-h) + var(--s-7)) var(--pad-x) calc(var(--s-9) + env(safe-area-inset-bottom,0px));
    background:var(--base);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transform:translateY(-10px) scale(.985);
    transform-origin:50% 0;
    transition:opacity var(--dur-3) var(--ease-out),
               transform var(--dur-3) var(--ease-out),
               visibility var(--dur-3);
  }
  .nav-right.is-open{opacity:1;visibility:visible;transform:none}

  /* Brasa al pie: el menú también pertenece al mundo visual */
  .nav-right::after{
    content:'';position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);
    width:min(680px,150%);aspect-ratio:1;z-index:-1;pointer-events:none;
    background:radial-gradient(circle,rgba(255,122,24,.16),transparent 62%);
  }

  .nav-panel-label{display:block;margin-bottom:var(--s-5);color:var(--ink-4)}
  .topnav .nav-right > .net-badge{display:inline-flex}
  .nav-panel-foot{
    display:block;order:10;margin-top:var(--s-6);
    font-size:var(--t-xs);color:var(--ink-4);
    opacity:0;transform:translateY(14px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
  }

  .nav-right .nav-link{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:var(--s-5) 0;
    font-family:var(--font-display);
    font-size:var(--t-2xl);font-weight:400;letter-spacing:-.02em;color:var(--ink-2);
    border-bottom:1px solid var(--rule);
    opacity:0;transform:translateY(14px);
    transition:opacity var(--dur-3) var(--ease-out),
               transform var(--dur-3) var(--ease-out),
               color var(--dur-2) var(--ease);
  }
  .nav-right .nav-link::after{display:none}
  .nav-right .nav-link::before{
    content:'';width:6px;height:6px;border-radius:var(--r-full);
    background:var(--ember);order:2;flex:0 0 auto;
    opacity:0;transform:scale(.86);
    transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
  }
  .nav-right .nav-link:hover,
  .nav-right .nav-link:focus-visible{color:var(--ink)}
  .nav-right .nav-link:hover::before,
  .nav-right .nav-link.active::before{opacity:1;transform:none}
  .nav-right .nav-link.active{color:var(--ember)}

  .nav-right .net-badge{
    align-self:flex-start;order:9;margin-top:var(--s-7);
    padding:var(--s-3) var(--s-5);font-size:var(--t-xs);
    opacity:0;transform:translateY(14px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
  }
  .nav-right .nav-cta{
    order:8;margin-top:var(--s-8);margin-left:0;
    width:100%;min-height:52px;font-size:var(--t-base);
    opacity:0;transform:translateY(14px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
  }

  /* Cascada al abrir */
  .nav-right.is-open .nav-link,
  .nav-right.is-open .nav-cta,
  .nav-right.is-open .net-badge,
  .nav-right.is-open .nav-panel-foot{opacity:1;transform:none}
  .nav-right.is-open .nav-link:nth-of-type(1){transition-delay:70ms}
  .nav-right.is-open .nav-link:nth-of-type(2){transition-delay:110ms}
  .nav-right.is-open .nav-link:nth-of-type(3){transition-delay:150ms}
  .nav-right.is-open .nav-link:nth-of-type(4){transition-delay:190ms}
  .nav-right.is-open .nav-link:nth-of-type(5){transition-delay:230ms}
  .nav-right.is-open .nav-cta{transition-delay:270ms}
  .nav-right.is-open .net-badge{transition-delay:310ms}
  .nav-right.is-open .nav-panel-foot{transition-delay:340ms}

  /* ---- Cierre ilustrado: el aro se traza y la X se dibuja ---- */
  .nav-close{
    position:fixed;top:calc((var(--nav-h) - 44px) / 2);right:var(--pad-x);
    z-index:121;width:44px;height:44px;
    place-items:center;border-radius:var(--r-full);color:var(--ink);
    background:var(--surface-2);border:1px solid var(--rule-strong);
  }
  .nav-close svg{overflow:visible;transition:transform var(--dur-3) var(--ease-out)}
  .nav-close:hover svg{transform:rotate(90deg)}
  .nav-close .ring{
    stroke-dasharray:82;stroke-dashoffset:82;opacity:.5;
    transition:stroke-dashoffset 620ms var(--ease-out);
  }
  .nav-close .x1,.nav-close .x2{
    stroke-dasharray:15;stroke-dashoffset:15;
    transition:stroke-dashoffset 320ms var(--ease-out);
  }
  .nav-right.is-open .nav-close .ring{stroke-dashoffset:0;transition-delay:120ms}
  .nav-right.is-open .nav-close .x1{stroke-dashoffset:0;transition-delay:220ms}
  .nav-right.is-open .nav-close .x2{stroke-dashoffset:0;transition-delay:290ms}

  body.nav-open{overflow:hidden}
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .nav-right,.nav-right .nav-link,.nav-right .nav-cta,
  .nav-right .net-badge,.nav-panel-foot{transform:none !important;transition-delay:0ms !important}
  .nav-close .ring,.nav-close .x1,.nav-close .x2{stroke-dashoffset:0 !important}
}

/* ==========================================================================
   14. APP SHELL — sidebar + topbar (backoffice)
   ========================================================================== */
.shell{display:flex;min-height:100vh}

.side{
  position:fixed;inset:0 auto 0 0;z-index:90;
  width:var(--side-w);
  display:flex;flex-direction:column;
  background:var(--surface);
  border-right:1px solid var(--rule);
  transform:translateX(-100%);
  visibility:hidden;
  transition:transform var(--dur-3) var(--ease),visibility var(--dur-3);
  overflow-y:auto;
}
.side.is-open{transform:translateX(0);visibility:visible}

.side-head{padding:var(--s-5);border-bottom:1px solid var(--rule)}
.side-brand{display:flex;align-items:center;gap:var(--s-3)}

.side-nav{padding:var(--s-5) var(--s-4);flex:1 1 auto;min-height:0}
.side-group + .side-group{margin-top:var(--s-6)}
.side-group > .overline{padding:0 var(--s-3) var(--s-3)}

.side-link{
  position:relative;
  display:flex;align-items:center;gap:var(--s-4);
  min-height:44px;padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-1);
  border-radius:var(--r-2);
  font-size:var(--t-sm);font-weight:500;color:var(--ink-3);
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.side-link svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.side-link:hover{background:var(--surface-2);color:var(--ink)}
.side-link:active{transform:scale(.97)}
.side-link.active{background:var(--surface-2);color:var(--ink);font-weight:600}
.side-link.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:20px;border-radius:2px;background:var(--ember);
}
.side-link .badge-num{
  margin-left:auto;padding:1px var(--s-3);border-radius:var(--r-full);
  background:var(--surface-3);border:1px solid var(--rule-strong);
  font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ink-2);
}

.side-foot{padding:var(--s-5);border-top:1px solid var(--rule)}
.side-wallet{
  display:block;padding:var(--s-4);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-3);
  margin-bottom:var(--s-4);
}
.side-wallet .k{display:block;font-size:var(--t-2xs);color:var(--ink-3);margin-bottom:var(--s-2)}
.side-wallet .v{display:block;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-2);word-break:break-all}
a.side-wallet:hover{border-color:var(--rule-strong)}

.side-backdrop{
  position:fixed;inset:0;z-index:89;
  background:rgba(8,7,10,.6);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2);
}
.side-backdrop.is-open{opacity:1;visibility:visible}

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

.topbar{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;gap:var(--s-4);
  height:var(--top-h);
  padding-inline:var(--pad-x);
  background:rgba(12,11,16,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.topbar-title{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-base);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:var(--s-4)}
.topbar-burger{
  display:grid;place-items:center;width:40px;height:40px;
  margin-left:calc(var(--s-2) * -1);
  border-radius:var(--r-2);color:var(--ink);
  transition:background-color var(--dur-2) var(--ease);
}
.topbar-burger:hover{background:var(--surface-2)}

.app-main{flex:1;padding:var(--s-6) var(--pad-x) var(--s-10)}

@media (min-width:1024px){
  .side{transform:none;visibility:visible}
  .side-backdrop{display:none}
  .topbar-burger{display:none}
  .shell-main{margin-left:var(--side-w)}
  .app-main{padding:var(--s-7) var(--pad-x) var(--s-11)}
}

/* --------------------------------------------------------------------------
   15. TOUCH / RESPONSIVE BASE
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .btn,.btn-sm{min-height:44px}
  .nav-link,.tab,.filter-pill,.side-link{min-height:44px}
  /* Los enlaces de listas (footer, cadena on-chain) necesitan alto propio
     para llegar a 44px sin agrandar la tipografía. */
  .foot ul a,.foot-legal a,.foot-chain dd a,.appfoot-links a,.idbar-btn,.chg{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .skip-link{min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px}
}
@media (max-width:640px){
  #toast-container{left:var(--s-4);right:var(--s-4);bottom:var(--s-4)}
  .toast{max-width:none}
  .card,.surface{padding:var(--s-5)}
  .topbar-title{font-size:var(--t-sm)}
}

/* Presupuesto de luz: un solo relleno ember por viewport. Hasta que la
   sidebar sea fija, la vista ya ofrece la acción y el CTA del topbar duplica. */
@media (max-width:1023px){
  .topbar-actions .btn{display:none}
}

/* --------------------------------------------------------------------------
   16. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .live-dot{animation:none}
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .topnav,.side,.topbar,#toast-container,.btn,footer{display:none !important}
  body,.card{background:#fff;color:#000}
  .shell-main{margin-left:0}
}

/* ==========================================================================
   18. ICONOGRAFÍA ANIMADA DE LA SIDEBAR
   Cada icono reacciona al hover y se queda "encendido" en el ítem activo.
   Sólo transform / opacity / stroke-dashoffset: nada que fuerce layout.
   ========================================================================== */
.side-link .ico{
  width:20px;height:20px;flex:0 0 auto;
  display:grid;place-items:center;
  color:var(--ink-3);
  transition:color var(--dur-2) var(--ease);
}
.side-link .ico svg{width:20px;height:20px;overflow:visible}
.side-link:hover .ico,
.side-link.active .ico{color:var(--ember)}

/* Cada parte gira sobre su propio centro, no sobre el del viewBox. */
.side-link .ico [class]{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease);
}

/* --- Grid: los cuadros entran escalonados --- */
.ico-grid .g{opacity:.55}
.side-link:hover .ico-grid .g,
.side-link.active .ico-grid .g{opacity:1;transform:scale(.84)}
.side-link:hover .ico-grid .g2,
.side-link.active .ico-grid .g2{transition-delay:40ms}
.side-link:hover .ico-grid .g3,
.side-link.active .ico-grid .g3{transition-delay:80ms}
.side-link:hover .ico-grid .g4,
.side-link.active .ico-grid .g4{transition-delay:120ms}

/* --- Wallet: la moneda entra en la ranura --- */
.ico-wallet .coin{opacity:0;transform:translateX(5px) scale(.86)}
.ico-wallet .band{opacity:.5}
.side-link:hover .ico-wallet .coin,
.side-link.active .ico-wallet .coin{opacity:1;transform:none}
.side-link:hover .ico-wallet .band,
.side-link.active .ico-wallet .band{opacity:1}

/* --- Red: los enlaces se trazan y los nodos laten --- */
.ico-net .lnk{stroke-dasharray:9;stroke-dashoffset:9;opacity:.5;transition:stroke-dashoffset 420ms var(--ease-out),opacity var(--dur-2) var(--ease)}
.side-link:hover .ico-net .lnk,
.side-link.active .ico-net .lnk{stroke-dashoffset:0;opacity:1}
.side-link:hover .ico-net .nd,
.side-link.active .ico-net .nd{transform:scale(1.16)}
.side-link:hover .ico-net .n2,
.side-link.active .ico-net .n2{transition-delay:60ms}
.side-link:hover .ico-net .n3,
.side-link.active .ico-net .n3{transition-delay:120ms}

/* --- Depósito: la flecha cae sobre la bandeja --- */
.ico-dep .tray{opacity:.5}
.side-link:hover .ico-dep .arr,
.side-link.active .ico-dep .arr{transform:translateY(2.5px)}
.side-link:hover .ico-dep .tray,
.side-link.active .ico-dep .tray{opacity:1;transform:scaleX(1.1)}

/* --- Pago en curso --- */
.ico-pay .band{opacity:.5}
.ico-pay .coin{opacity:.5;transform:translateX(-3px)}
.side-link:hover .ico-pay .coin,
.side-link.active .ico-pay .coin{opacity:1;transform:none}

/* --- Escudo: el check se dibuja --- */
.ico-shield .tick{stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset 420ms var(--ease-out)}
.side-link:hover .ico-shield .tick,
.side-link.active .ico-shield .tick{stroke-dashoffset:0}

/* --- Salida: la flecha se va por la puerta --- */
.side-link:hover .ico-out .arr{transform:translateX(2.5px)}

/* --- Cambiar wallet: gira medio giro --- */
.side-link:hover .ico-swap .spin{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .side-link .ico [class]{transition:none !important;transform:none !important}
  .ico-net .lnk,.ico-shield .tick{stroke-dashoffset:0 !important}
  .ico-wallet .coin,.ico-pay .coin{opacity:1 !important}
}

/* ==========================================================================
   19. TARJETA PROMO DE LA SIDEBAR
   Fondo técnico + el objeto recortado en PNG transparente (sin blend-mode:
   por eso ya no aparece el recuadro del JPEG). Toda la tarjeta es el enlace.
   ========================================================================== */
.side-promo{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  margin:var(--s-5);
  min-height:200px;
  border:1px solid var(--rule-strong);
  border-radius:var(--r-3);
  background:var(--surface-2);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.side-promo:active{transform:scale(.985)}

.side-promo-bg{position:absolute;inset:0;z-index:0}
.side-promo-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  opacity:.7;
  transition:transform var(--dur-4) var(--ease-out),opacity var(--dur-3) var(--ease);
}
/* Scrim: el texto manda */
.side-promo::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,16,.15) 0%,rgba(12,11,16,.05) 30%,rgba(12,11,16,.88) 66%,var(--base) 100%);
}

.side-promo-art{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  z-index:2;width:112px;pointer-events:none;
  transition:transform var(--dur-3) var(--ease-out);
}
.side-promo-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}

.side-promo-body{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);
  padding:var(--s-5);
}
.side-promo-k{
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember);
}
.side-promo-t{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-sm);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;
}
.side-promo-a{
  display:inline-flex;align-items:center;gap:var(--s-3);
  margin-top:var(--s-3);
  font-size:var(--t-xs);font-weight:600;color:var(--ink-2);
}
.side-promo-a svg{transition:transform var(--dur-2) var(--ease)}

@media (hover:hover) and (pointer:fine){
  .side-promo:hover{border-color:rgba(255,122,24,.42)}
  .side-promo:hover .side-promo-bg img{transform:scale(1.06);opacity:.9}
  .side-promo:hover .side-promo-art{transform:translate(-50%,-56%)}
  .side-promo:hover .side-promo-a{color:var(--ember)}
  .side-promo:hover .side-promo-a svg{transform:translateX(3px)}
}

@media (max-height:820px){
  .side-promo{min-height:158px;margin:var(--s-4)}
  .side-promo-art{width:82px;top:31%}
  .side-promo-body{padding:var(--s-4)}
}
@media (max-height:660px){
  .side-promo{min-height:0;display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4)}
  .side-promo::after{background:linear-gradient(90deg,rgba(12,11,16,.5),rgba(12,11,16,.9))}
  .side-promo-art{position:static;transform:none;width:44px;flex:0 0 auto}
  .side-promo-body{position:static;padding:0;gap:0}
  .side-promo-k{display:none}
  .side-promo-t{font-size:var(--t-xs)}
  .side-promo-a{margin-top:var(--s-1);font-size:var(--t-2xs)}
}

/* ==========================================================================
   20. PILL SEGMENTADO DE RED EN EL TOPBAR
   ========================================================================== */
.net-badge.seg{padding:0;overflow:hidden;gap:0}
.net-badge.seg > *{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
}
.net-badge.seg .seg-b{
  border-left:1px solid var(--rule-strong);
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   21. SIDEBAR COLAPSABLE (sólo ≥1024, donde la sidebar es fija)
   Riel de 72px con tiles de 40px centrados. Lo que no cabe se quita del flujo
   con display:none — ocultarlo con width:0 dejaba huecos y descentraba todo.
   Al pasar el mouse se despliega POR ENCIMA del contenido; el click lo fija.
   ========================================================================== */
.side-toggle{
  display:none;
  width:32px;height:32px;flex:0 0 auto;margin-left:auto;
  place-items:center;border-radius:var(--r-2);
  color:var(--ink-4);
  transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.side-toggle:hover{color:var(--ink-2);background:var(--surface-2)}
.side-toggle svg [class]{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-3) var(--ease)}
.side-toggle:hover .st-arrow{transform:translateX(-2px)}

@media (min-width:1024px){
  .side-head{display:flex;align-items:flex-start;gap:var(--s-3)}
  .side-toggle{display:grid}

  .side{width:var(--side-w);transition:width var(--dur-3) var(--ease)}
  .shell-main{transition:margin-left var(--dur-3) var(--ease)}

  /* ---------- Estado colapsado (riel) ---------- */
  .side-collapsed .shell-main{margin-left:72px}
  .side-collapsed .side{width:72px;z-index:95}

  /* Fuera del flujo: si ocupa alto o ancho, descentra. */
  .side-collapsed .side .logo-word,
  .side-collapsed .side .logo-sub,
  .side-collapsed .side .side-label,
  .side-collapsed .side .badge-num,
  .side-collapsed .side .overline,
  .side-collapsed .side .side-wallet,
  .side-collapsed .side .side-promo,
  .side-collapsed .side .side-toggle{display:none}

  .side-collapsed .side .side-head{padding:var(--s-4) 0;justify-content:center}
  .side-collapsed .side .logo{justify-content:center;gap:0;width:100%}

  .side-collapsed .side .side-nav{padding:var(--s-4) 0;display:flex;flex-direction:column;align-items:center}
  .side-collapsed .side .side-group{width:100%;display:flex;flex-direction:column;align-items:center}
  /* El overline desaparece: la separación de grupos la marca una regla fina */
  .side-collapsed .side .side-group + .side-group{
    margin-top:var(--s-4);padding-top:var(--s-4);
    border-top:1px solid var(--rule);
  }

  /* Cada ítem es un tile cuadrado centrado */
  .side-collapsed .side .side-link{
    width:40px;min-height:40px;padding:0;margin:0 0 var(--s-2);
    justify-content:center;gap:0;border-radius:var(--r-2);
  }
  /* En el riel el activo se marca con el propio tile, no con una barra suelta */
  .side-collapsed .side .side-link.active::before{display:none}
  .side-collapsed .side .side-link.active{
    background:var(--ember-wash);
    box-shadow:inset 0 0 0 1px rgba(255,122,24,.32);
  }

  .side-collapsed .side .side-foot{
    padding:var(--s-4) 0;display:flex;flex-direction:column;align-items:center;
  }

  /* ---------- Despliegue temporal ---------- */
  /* Teclado: siempre. */

  .side-collapsed .side:focus-within{
    width:var(--side-w);
    box-shadow:24px 0 48px rgba(0,0,0,.5);
  }
  .side-collapsed .side:focus-within .logo-word,
  .side-collapsed .side:focus-within .logo-sub,
  .side-collapsed .side:focus-within .side-label,
  .side-collapsed .side:focus-within .overline,
  .side-collapsed .side:focus-within .side-wallet{display:block;animation:quiet-in var(--dur-3) var(--ease-out) both}
  .side-collapsed .side:focus-within .badge-num{display:inline-block}
  .side-collapsed .side:focus-within .side-toggle{display:grid}
  .side-collapsed .side:focus-within .side-promo{display:block;animation:quiet-in var(--dur-3) var(--ease-out) both}
  .side-collapsed .side:focus-within .side-head{padding:var(--s-5);justify-content:flex-start}
  .side-collapsed .side:focus-within .logo{justify-content:flex-start;gap:var(--s-3);width:auto}
  .side-collapsed .side:focus-within .side-nav{padding:var(--s-5) var(--s-4);align-items:stretch}
  .side-collapsed .side:focus-within .side-group{align-items:stretch}
  .side-collapsed .side:focus-within .side-group + .side-group{border-top:0;padding-top:0;margin-top:var(--s-6)}
  .side-collapsed .side:focus-within .side-link{
    width:auto;padding:var(--s-3) var(--s-4);gap:var(--s-4);
    justify-content:flex-start;margin-bottom:var(--s-1);
  }
  .side-collapsed .side:focus-within .side-link.active{box-shadow:none;background:var(--surface-2)}
  .side-collapsed .side:focus-within .side-link.active::before{display:block}
  .side-collapsed .side:focus-within .side-foot{padding:var(--s-5);align-items:stretch}
  .side-collapsed .side:focus-within .side-toggle .st-arrow{transform:rotate(180deg)}
}

/* El despliegue por hover sólo donde hay puntero fino: en táctil un tap
   dispara :hover y el riel quedaría abierto sin que nadie lo pidiera. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){

  .side-collapsed .side:hover{
    width:var(--side-w);
    box-shadow:24px 0 48px rgba(0,0,0,.5);
  }
  .side-collapsed .side:hover .logo-word,
  .side-collapsed .side:hover .logo-sub,
  .side-collapsed .side:hover .side-label,
  .side-collapsed .side:hover .overline,
  .side-collapsed .side:hover .side-wallet{display:block;animation:quiet-in var(--dur-3) var(--ease-out) both}
  .side-collapsed .side:hover .badge-num{display:inline-block}
  .side-collapsed .side:hover .side-toggle{display:grid}
  .side-collapsed .side:hover .side-promo{display:block;animation:quiet-in var(--dur-3) var(--ease-out) both}
  .side-collapsed .side:hover .side-head{padding:var(--s-5);justify-content:flex-start}
  .side-collapsed .side:hover .logo{justify-content:flex-start;gap:var(--s-3);width:auto}
  .side-collapsed .side:hover .side-nav{padding:var(--s-5) var(--s-4);align-items:stretch}
  .side-collapsed .side:hover .side-group{align-items:stretch}
  .side-collapsed .side:hover .side-group + .side-group{border-top:0;padding-top:0;margin-top:var(--s-6)}
  .side-collapsed .side:hover .side-link{
    width:auto;padding:var(--s-3) var(--s-4);gap:var(--s-4);
    justify-content:flex-start;margin-bottom:var(--s-1);
  }
  .side-collapsed .side:hover .side-link.active{box-shadow:none;background:var(--surface-2)}
  .side-collapsed .side:hover .side-link.active::before{display:block}
  .side-collapsed .side:hover .side-foot{padding:var(--s-5);align-items:stretch}
  .side-collapsed .side:hover .side-toggle .st-arrow{transform:rotate(180deg)}
}

@media (prefers-reduced-motion:reduce){
  .side,.shell-main,.side-toggle svg [class]{transition:none !important}
}


/* ==========================================================================
   22. HOVER DECORATIVO — sólo con puntero fino
   ========================================================================== */
@media (hover:none), (pointer:coarse){
  .hover-lift:hover{border-color:var(--rule);background:var(--surface)}
  .kpi:hover::after{opacity:.40}
  .side-promo-a:hover svg{transform:none}
  .side-toggle:hover .st-arrow{transform:none}
}


/* ==========================================================================
   23. MARCA — favicon en el riel, logo horizontal expandido
   ========================================================================== */
.brand-mark{display:none;width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-2)}
.brand-logo{display:block;flex:0 0 auto}
.brand-logo img{display:block;width:132px;height:auto}
.logo:hover .brand-logo img,.logo:hover .brand-mark{opacity:.9}
.brand-logo img,.brand-mark{transition:opacity var(--dur-2) var(--ease)}

/* En la landing el nav es horizontal: siempre el logo, salvo muy angosto */
@media (max-width:400px){
  .topnav .brand-logo{display:none}
  .topnav .brand-mark-nav{display:block}
}

/* Footer */
.foot-brand .brand-logo img{width:148px}

@media (min-width:1024px){
  /* Riel: sólo el favicon */
  .side-collapsed .side .brand-logo{display:none}
  .side-collapsed .side .brand-mark{display:block}
  /* Al desplegarse vuelve el logo */
  .side-collapsed .side:focus-within .brand-logo{display:block}
  .side-collapsed .side:focus-within .brand-mark{display:none}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .side-collapsed .side:hover .brand-logo{display:block}
  .side-collapsed .side:hover .brand-mark{display:none}
}

/* ==========================================================================
   24. SELECTOR DE IDIOMA (Google Translate)
   ========================================================================== */
.lang{position:relative;display:inline-block;flex:0 0 auto}
.lang-btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:36px;padding:var(--s-2) var(--s-4);
  border:1px solid var(--rule-strong);border-radius:var(--r-full);
  background:var(--surface);color:var(--ink-2);
  font-size:var(--t-xs);font-weight:600;line-height:1;
  transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.lang-btn svg:first-child{color:var(--ink-3)}
.lang-chev{transition:transform var(--dur-2) var(--ease);opacity:.7}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .lang-btn:hover{color:var(--ink);border-color:rgba(255,122,24,.42);background:var(--surface-2)}
  .lang-btn:hover svg:first-child{color:var(--ember)}
}

.lang-menu{
  position:absolute;right:0;top:calc(100% + var(--s-3));z-index:130;
  width:196px;padding:var(--s-2);
  background:var(--surface-2);
  border:1px solid var(--rule-strong);border-radius:var(--r-3);
  box-shadow:var(--shadow-2);
  animation:quiet-in var(--dur-2) var(--ease-out) both;
}
.lang-item{
  display:flex;align-items:center;gap:var(--s-4);width:100%;
  min-height:40px;padding:var(--s-2) var(--s-3);
  border-radius:var(--r-2);
  color:var(--ink-2);font-size:var(--t-sm);text-align:left;
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.lang-item:hover{background:var(--surface-3);color:var(--ink)}
.lang-item:active{transform:scale(.98)}
.lang-code{
  flex:0 0 auto;min-width:30px;padding:2px var(--s-2);
  border-radius:var(--r-1);background:var(--surface-3);border:1px solid var(--rule);
  font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ink-3);text-align:center;
}
.lang-name{flex:1}
.lang-check{color:var(--ember);flex:0 0 auto}

/* El gadget y la barra de Google no se muestran nunca */
.goog-te-banner-frame,.goog-te-gadget,#google_translate_element,.skiptranslate{display:none !important}
body{top:0 !important}
.goog-te-spinner-pos{display:none !important}
font[style]{background:none !important;box-shadow:none !important}

/* En el panel móvil ocupa el ancho */
@media (max-width:900px){
  .nav-right .lang{order:7;margin-top:var(--s-6);width:100%}
  .nav-right .lang-btn{width:100%;justify-content:center;min-height:48px;font-size:var(--t-sm)}
  .nav-right .lang-menu{left:0;right:0;width:auto}
}