body::before{
content:"";
position:fixed;
inset:-20%;
background:
radial-gradient(700px 320px at 15% 10%, rgba(0,255,213,.10), transparent 65%),
radial-gradient(560px 280px at 85% 15%, rgba(0,163,255,.08), transparent 60%);
z-index:-1;
pointer-events:none;
}

:root{
  /* Glass – Dark theme */
  --glass-dark-1: rgba(10, 20, 26, 0.45);
  --glass-dark-2: rgba(10, 20, 26, 0.65);
  --glass-dark-3: rgba(10, 20, 26, 0.82);

  /* Glass – Light theme */
  --glass-light-1: rgba(255, 255, 255, 0.65);
  --glass-light-2: rgba(255, 255, 255, 0.82);
  --glass-light-3: rgba(255, 255, 255, 0.94);

  /* Común */
  --glass-blur: blur(18px) saturate(130%);
}

.topbar{position:sticky;top:0;z-index:50;position:relative;backdrop-filter:blur(10px);background:color-mix(in oklab,var(--bg),transparent 20%);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-link{text-decoration:none;display:inline-flex;align-items:baseline}
.iconbar{display:flex;gap:10px;align-items:center}
.icon-btn{width:42px;height:38px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;user-select:none}
.icon-btn:hover{background:rgba(255,255,255,.10)}
.icon-btn:active{transform:translateY(1px)}
.navbar{display:none}

.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:80}
.drawer-backdrop.show{opacity:1;pointer-events:auto}


.drawer{
position:fixed;
top:0;
right:0;
height:100%;
width:min(360px,92vw);


background: rgba(10, 20, 26, 0.45);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);


border-left:1px solid var(--border);
transform:translateX(104%);
transition:transform .22s ease;
z-index:90;
display:flex;
flex-direction:column;
box-shadow:0 18px 60px rgba(16, 41, 12, 0.45),0 0 0 1px rgba(17, 114, 98, 0.12) inset;
}

.drawer.open{transform:translateX(0)}
.drawer-head{padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)}
.drawer-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.drawer-section{padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.04)}
.drawer-section h4{margin:0 0 8px;font-size:13px;opacity:.85;letter-spacing:.2px}
.drawer-row{display:flex;gap:10px;flex-wrap:wrap}
.drawer-link{text-decoration:none;font-weight:900;font-size:13px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.06);display:inline-flex;align-items:center;gap:10px}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:60;position:relative;background:color-mix(in oklab,var(--bg),transparent 10%);border-top:1px solid var(--border);backdrop-filter:blur(12px)}
.bottom-nav-inner{max-width:1100px;margin:0 auto;padding:8px 10px 10px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.bottom-btn{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:900;text-decoration:none;opacity:.72;padding:7px 4px;border-radius:14px}
.bottom-btn .ico{font-size:18px;line-height:1}
.bottom-btn .lbl{font-size:11px}
.bottom-btn.active{opacity:1;background:linear-gradient(135deg,var(--primary),var(--accent));color:#08101a}
body{padding-bottom:78px}

.modal{position:fixed;inset:0;display:none;z-index:120}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal-card{position:relative;width:min(980px,92vw);margin:6vh auto 0;border-radius:24px;border:1px solid var(--border);background:color-mix(in oklab,var(--panel),transparent 12%);box-shadow:var(--shadow);overflow:hidden}
.modal-headbar{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}

.profile-card{padding:0}
.profile-grid{display:grid;grid-template-columns:330px 1fr;min-height:560px}
.profile-left{padding:16px;border-right:1px solid var(--border);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:12px}
.profile-right{padding:16px;display:flex;flex-direction:column;gap:12px}

@media (max-width:820px){.profile-grid{grid-template-columns:180px 1fr}}
@media (max-width:520px){.profile-grid{grid-template-columns:160px 1fr}}

.profile-avatar{width:80px;height:80px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.06);overflow:hidden;display:flex;align-items:center;justify-content:center}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar.empty{background:rgba(255,255,255,.04)}
.profile-avatar.empty::after{content:"🏅";font-size:24px;opacity:.55}
.profile-avatar.empty img{display:none}

.profile-level .lvl{font-weight:1000;font-size:20px;letter-spacing:-.4px;line-height:1.1}
.profile-level .rank{margin-top:4px;font-weight:900;opacity:.92;color:var(--primary);text-shadow:0 0 16px rgba(0,255,213,.18)}
.profile-addr{font-family:var(--mono);font-size:12px;opacity:.85;word-break:break-word}

.profile-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.slot{border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.04);padding:10px}
.slot-k{font-size:11px;opacity:.8;font-weight:900}
.slot-v{margin-top:6px;font-size:12px;font-weight:900}

.profile-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.tab-btn{border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.06);cursor:pointer;font-weight:1000;padding:10px 12px}
.tab-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#08101a;border:0}

.profile-fixed{
display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;

    /* scroll suave */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.03);padding:12px;display:flex;flex-direction:column;gap:10px}

@media (max-width: 480px){

  .pf-balances{
    display: flex;
    gap: 8px;
    min-width: 220px;
  }
  
.profile-fixed > *{
    flex: 0 0 auto;
    min-width: 220px;
    scroll-snap-align: start;
  }
  
.profile-fixed::-webkit-scrollbar{
    display: none;
  }

  .profile-fixed{
    scrollbar-width: none;
  }


}
.barbox .bar-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bar-track{width:100%;height:12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);overflow:hidden}
.bar-fill{height:100%;border-radius:999px}
.bar-fill.dharma{background:linear-gradient(90deg,#00A3FF,#00FFD5);box-shadow:0 0 18px rgba(0,163,255,.22)}
.bar-fill.karma{background:linear-gradient(90deg,#FF2D55,#FF6A00);box-shadow:0 0 18px rgba(255,45,85,.20)}
.pf-balances{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pf-balances>div{padding:10px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.04);font-weight:900}
.profile-content{border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.02);padding:12px;min-height:200px}
.dex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
@media (max-width:520px){.dex-grid{grid-template-columns:1fr}}

@media (pointer:coarse) and (max-width:520px){
html{zoom:.7}
}

/* ========================= */
/* TRANSPARENCIA + GLOW UI */
/* ========================= */

html.theme-ready .topbar,
html.theme-ready .bottom-nav,
html.theme-ready .drawer,
html.theme-ready .modal-card,
html.theme-ready .drawer-section,
html.theme-ready .profile-fixed,
html.theme-ready .profile-content{
  backdrop-filter: blur(12px) saturate(108%);
  -webkit-backdrop-filter: blur(12px) saturate(108%);
}

/* Global glow halo */
.topbar::after,
.bottom-nav::after,

.drawer::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(420px 220px at 15% 0%, rgba(0,255,213,.22), transparent 65%),
    radial-gradient(420px 220px at 85% 100%, rgba(0,163,255,.18), transparent 70%);
  opacity:.65;
  filter:blur(14px);
}

.modal-card::after{
content:"";
position:absolute;
inset:-1px;
pointer-events:none;
border-radius:inherit;
background:
radial-gradient(420px 220px at 15% 0%, rgba(0,255,213,.22), transparent 65%),
radial-gradient(420px 220px at 85% 100%, rgba(0,163,255,.18), transparent 70%);
opacity:.65;
filter:blur(14px);
}

/* Topbar specific */
.topbar{
position:sticky;
top:0;
z-index:50;
}

/* Bottom navbar specific */
.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
z-index:60;
}

/* Drawer depth */
.drawer{
box-shadow:
0 18px 40px rgba(0,0,0,.45),
0 0 0 1px rgba(0,255,213,.12) inset;
}

/* Modal depth */
.modal-card{
box-shadow:
0 24px 60px rgba(0,0,0,.55),
0 0 0 1px rgba(0,255,213,.18) inset;
}

/* Sections inside modals */
.drawer-section,
.profile-fixed,
.profile-content{
box-shadow:
0 10px 24px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Buttons hover glow */
.icon-btn:hover,
.bottom-btn.active,
.tab-btn.active,
.drawer-link:hover{
box-shadow:
0 0 0 1px rgba(0,255,213,.35),
0 0 18px rgba(0,255,213,.35);
}

/* Mobile tuning */
@media (pointer:coarse){
.topbar,
.bottom-nav,
.drawer,
.modal-card{
backdrop-filter:blur(10px) saturate(125%);
}
}

/* ================================================= */
/* MENU ACORDEÓN (DID + CREDENCIALES) — INTEGRADO */
/* ================================================= */

.acc{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)}
.acc+.acc{margin-top:12px}
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;background:rgba(255,255,255,.04);border:0;color:inherit;font-weight:900;cursor:pointer}
.acc-h .chev{opacity:.75}
.acc-p{display:none;padding:12px}
.acc.open .acc-p{display:block}

.did-box{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:8px}
.did-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.did-row .k{opacity:.75;font-size:12px;font-weight:800}
.did-row .v{font-size:12px}
.did-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ================================ */
/* POAPS + CERTIFICACIONES UNIFICADO */
/* ================================ */

.poap-head,.cred-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0}

/* ---------- POAPS ---------- */

.poap-strip{display:block}
.poap-row{position:relative;overflow:hidden;padding:10px 2px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.poap-marquee{display:flex;gap:12px;align-items:center;width:max-content;will-change:transform;animation:poap-marquee var(--poap-duration,34s) linear infinite}
.poap-track{display:flex;gap:12px;align-items:center}
.poap-row:hover .poap-marquee{animation-play-state:paused}
.poap-row.is-paused .poap-marquee{animation-play-state:paused}

@keyframes poap-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.poap{position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#0a2a33,#071a20);border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.30);display:grid;place-items:center;animation:poap-float 8s ease-in-out infinite}
.poap:nth-child(3n){animation-delay:-1.1s}
.poap:nth-child(4n){animation-delay:-2s}
.poap:nth-child(5n){animation-delay:-2.8s}

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

.poap img{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block}
.poap-row:hover .poap{animation-play-state:paused}
.poap-row.is-paused .poap{animation-play-state:paused}
.poap:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(0,0,0,.42)}

.poap .label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:rgba(0,0,0,.62);color:#fff;padding:6px 8px;border-radius:8px;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.poap:hover .label{opacity:1}

/* ---------- CERTIFICACIONES (IGUAL QUE POAPS) ---------- */


/* ===== Certificaciones: selector visual refinado ===== */

.cert-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 10px;
}

/* Estado base (apagado) */
.cert-tab{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,163,255,.25);
  background:linear-gradient(180deg,rgba(0,163,255,.18),rgba(0,163,255,.08));
  color:#EFFFFB;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  opacity:.55;
  box-shadow:
    0 0 0 1px rgba(0,163,255,.15) inset;
  transition:
    opacity .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.cert-tab .n{
  opacity:.75;
  margin-left:6px;
}

/* Hover (aunque no esté activo) */
.cert-tab:hover{
  opacity:.8;
  filter:saturate(120%);
}

/* Activo */
.cert-tab.active{
  opacity:1;
  color:#EFFFFB;
  border-color:rgba(0,255,213,.65);
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:
    0 10px 22px rgba(0,255,213,.35),
    0 0 0 1px rgba(255,255,255,.35) inset;
  transform:translateY(-1px);
}


.cert-marquee{display:flex;gap:12px;align-items:center;width:max-content;will-change:transform;animation:cert-marquee var(--cert-duration,42s) linear infinite}
.cert-track{display:flex;gap:12px;align-items:center}
.cert-row:hover .cert-marquee{animation-play-state:paused}
.cert-row.is-paused .cert-marquee{animation-play-state:paused}

@keyframes cert-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.cert-badge{position:relative;flex:0 0 auto;width:78px;height:64px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px rgba(0,0,0,.30);display:grid;place-items:center;overflow:hidden;animation:cert-float 7s ease-in-out infinite;text-decoration:none}
.cert-badge:nth-child(3n){animation-delay:-1.1s}
.cert-badge:nth-child(4n){animation-delay:-2s}
.cert-badge:nth-child(5n){animation-delay:-2.8s}

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

.cert-badge img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.cert-row:hover .cert-badge{animation-play-state:paused}
.cert-row.is-paused .cert-badge{animation-play-state:paused}
.cert-badge:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.42)}

.cert-badge .label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:rgba(0,0,0,.62);color:#fff;padding:6px 8px;border-radius:8px;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.cert-badge:hover .label{opacity:1}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
.poap-marquee,.cert-marquee{animation:none}
.poap,.cert-badge{animation:none}
}


.cred-groups{display:flex;flex-direction:column;gap:10px}
.cred-group{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.03)}
.cred-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);border:0;color:inherit;font-weight:900;cursor:pointer}
.cred-h .count{opacity:.7;font-size:12px}
.cred-p{display:none;padding:10px 12px;gap:8px}
.cred-p.open{display:grid}
.cred-item{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);text-decoration:none}
.cred-item .t{font-weight:900}
.cred-item:hover{border-color:rgba(0,255,213,.35);box-shadow:0 0 0 1px rgba(0,255,213,.18) inset}

/* ===== Character equipment (NFT view) ===== */

.profile-slots{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.slot{
position:relative;
display:flex;
flex-direction:column;
gap:6px;
min-height:78px;
}

.slot .ico{
font-size:20px;
opacity:.9;
}

.slot .slot-k{
display:flex;
align-items:center;
gap:6px;
}

.slot .slot-v{
font-size:12px;
opacity:.85;
}

/* NFT / equipped look */
.slot.equipped{
border-color:rgba(0,255,213,.35);
box-shadow:
0 0 0 1px rgba(0,255,213,.25) inset,
0 10px 22px rgba(0,0,0,.35);
}

.slot.equipped::after{
content:"";
position:absolute;
inset:-1px;
border-radius:inherit;
pointer-events:none;
background:
radial-gradient(120px 80px at 50% 0%, rgba(0,255,213,.18), transparent 70%);
opacity:.6;
}

/* ===== Bottom nav safe space ===== */
.bottom-safe-space{
height:140px;
pointer-events:none;
}

*{
  transition:
    background-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Global typography tuning ===== */
body{
font-family: var(--font);
  font-weight: 450;
  letter-spacing: -0.005em;
  line-height: 1.55;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  font-variation-settings:
    "wght" 450,
    "opsz" 16;
}

/* ===== Font rasterization ===== */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

html:not(.light) body{
  font-weight:460;
}

html.light body{
  font-weight:440;
}

/* ===== Typography tuning: Profile ===== */
.profile-left,
.profile-right,
.profile-content,
.profile-fixed{
  font-family: var(--font);
  letter-spacing: -0.004em;
}

.profile-level .lvl{
  font-weight: 650;
  letter-spacing: -0.01em;
}

.profile-level .rank{
  font-weight: 600;
  letter-spacing: -0.006em;
}

.profile-addr,
.slot-k,
.slot-v{
  font-weight: 500;
  letter-spacing: -0.002em;
}

/* ===== Typography tuning: Menu / Drawer ===== */
.drawer,
.drawer-section,
.drawer-link,
.menu-summary,
.menu-content{
  font-family: var(--font);
  letter-spacing: -0.003em;
}

.drawer-link{
  font-weight: 600;
}

.menu-summary{
  font-weight: 650;
}

.menu-content p,
.menu-content .meta{
  font-weight: 450;
}

/* ===== Buttons typography alignment ===== */
.profile .btn-primary,
.profile .btn-ghost,
.drawer .btn-primary,
.drawer .btn-ghost{
  font-weight: 600;
  letter-spacing: -0.004em;
}

/* ===== Dark theme: passive buttons visibility ===== */
html:not(.light) .tab-btn,
html:not(.light) .drawer-link,
html:not(.light) .profile .btn-ghost,
html:not(.light) .profile .btn-secondary{
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 6px 14px rgba(0,0,0,.35);

  transition:
    color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

/* ===== Dark theme: action icons visibility ===== */
html:not(.light) .icon-btn,
html:not(.light) .menu-btn,
html:not(.light) .profile-btn{
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 12px rgba(0,255,213,.18);

  transition:
    color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

html:not(.light) .icon-btn:hover,
html:not(.light) .menu-btn:hover,
html:not(.light) .profile-btn:hover{
  background: rgba(0,255,213,.12);
  color: #EFFFFB;

  box-shadow:
    0 0 0 1px rgba(0,255,213,.35),
    0 0 18px rgba(0,255,213,.35);

  transform: translateY(-1px);
}

html:not(.light) .hamburger,
html:not(.light) .hamburger::before,
html:not(.light) .hamburger::after{
  background-color: rgba(255,255,255,.9);
  box-shadow: 0 0 8px rgba(0,255,213,.35);
}

html.light .icon-btn,
html.light .menu-btn,
html.light .profile-btn{
  color: #08101a;
}

/* ===== Bottom nav buttons – base ===== */
.bottom-btn{
  position:relative;
  transition:
    transform .18s ease,
    opacity .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

/* Hover feedback */
.bottom-btn:hover{
  opacity:.95;
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
  box-shadow:
    0 8px 18px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* Active nav button – alive */
.bottom-btn.active{
  transform:translateY(-3px);
  box-shadow:
    0 12px 26px rgba(0,255,213,.45),
    0 0 0 1px rgba(255,255,255,.25) inset;
}

/* Active indicator dot */
.bottom-btn::after{
  content:"";
  position:absolute;
  bottom:2px;
  left:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:transparent;
  transform:translateX(-50%);
  transition:background .18s ease, box-shadow .18s ease;
}

.bottom-btn.active::after{
  background:rgba(255,255,255,.9);
  box-shadow:0 0 10px rgba(0,255,213,.75);
}

html:not(.light) .bottom-btn{
  color:rgba(255,255,255,.75);
}

html:not(.light) .bottom-btn:hover{
  color:#EFFFFB;
}

.bottom-btn:active{
  transform:translateY(0);
}

/* ===== Keep active nav alive on hover ===== */
.bottom-btn.active:hover{
  opacity:1;
  transform:translateY(-3px);

  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#08101a;

  box-shadow:
    0 12px 26px rgba(0,255,213,.55),
    0 0 0 1px rgba(255,255,255,.35) inset;
}

.cert-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.cert-tab{padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06);font-size:12px;font-weight:700;cursor:pointer}
.cert-tab .n{opacity:.7;margin-left:6px}
.cert-tab.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#08101a;border-color:transparent}
.cert-strip{display:block}
.cert-row{display:none;position:relative;overflow:visible;padding:0}
.cert-row.active{display:block}
.cert-marquee{position:relative;overflow:hidden;padding:10px 2px 18px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;gap:12px;align-items:center;width:max-content;will-change:transform;animation:cert-marquee var(--cert-duration,42s) linear infinite}
.cert-track{display:flex;gap:12px;align-items:center}
.cert-row:hover .cert-marquee,.cert-row.is-paused .cert-marquee{animation-play-state:paused}
@keyframes cert-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cert-badge{position:relative;flex:0 0 auto;width:78px;height:64px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 18px rgba(0,0,0,.32);overflow:visible;animation:cert-float 7s ease-in-out infinite;text-decoration:none}
.cert-badge:nth-child(3n){animation-delay:-1.1s}
.cert-badge:nth-child(4n){animation-delay:-2s}
.cert-badge:nth-child(5n){animation-delay:-2.8s}
@keyframes cert-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cert-badge img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.cert-row:hover .cert-badge,.cert-row.is-paused .cert-badge{animation-play-state:paused}
.cert-badge:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.42)}
.cert-badge .label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:rgba(0,0,0,.62);color:#fff;padding:6px 8px;border-radius:8px;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.cert-badge:hover .label{opacity:1}
.cert-detail{margin-top:6px;padding:0;border:0;background:transparent;box-shadow:none}
.cert-detail .t{font-weight:700}
.cert-detail .m{opacity:.75}
.cert-detail .actions .drawer-link{padding:0;border:0;background:transparent;box-shadow:none;text-decoration:underline;font-weight:700} 

/* ===== HOTFIX: CERT BADGES SIN VENTANA (solo PNG flotando) ===== */
.cert-badge{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center !important;
}
.cert-badge:hover{
  box-shadow:none !important;
  transform:translateY(-4px) !important;
}
.cert-badge img{
  max-width:78px !important;
  max-height:64px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.cert-badge:hover img{
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.48));
}
/* evita que el contenedor "se coma" puntas verticales */
.cert-row{overflow:visible !important;}
.cert-marquee{overflow:hidden !important;}

.cert-cta{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:10px 14px;text-decoration:none;font-weight:950;cursor:pointer;border:1px solid rgba(255,255,255,.18);color:#08101a;background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 9px 18px rgba(0,0,0,.22)}
.cert-cta:hover{transform:translateY(-1px);filter:saturate(125%) brightness(1.06);box-shadow:0 14px 28px rgba(0,0,0,.30),0 0 0 1px rgba(0,255,213,.22) inset,0 0 18px rgba(0,255,213,.35)}
.cert-detail .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ===== FIX TIPOGRAFÍA GLOBAL EN BOTONES (MENU + PERFIL) ===== */

/* Fuerza la tipografía base en todos los botones interactivos */
button,
.icon-btn,
.drawer-link,
.tab-btn,
.bottom-btn,
.profile-btn,
.cert-cta{
  font-family: var(--font) !important;
  font-weight: 600;
  letter-spacing: -0.003em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ajustes finos por contexto */
.icon-btn{font-weight:600}
.drawer-link{font-weight:600}
.tab-btn{font-weight:650}
.bottom-btn{font-weight:650}
.cert-cta{font-weight:950} /* CTA azul como libro */



/* ===============================
   GLASS SYSTEM – ALL FLOATING UI
================================ */

/* ===== NIVEL 1: Drawer + Perfil ===== */
html:not(.light) .drawer,
html:not(.light) .modal-card,
html:not(.light) .profile-card{
  background: var(--glass-dark-1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

html.light .drawer,
html.light .modal-card,
html.light .profile-card{
  background: var(--glass-light-1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ===== NIVEL 2: Modales sobre drawer ===== */
html:not(.light) .modal.open .modal-card,
html:not(.light) .overlay-panel{
  background: var(--glass-dark-2);
}

html.light .modal.open .modal-card,
html.light .overlay-panel{
  background: var(--glass-light-2);
}

/* ===== NIVEL 3: Overlays críticos / gráficas ===== */
html:not(.light) .overlay,
html:not(.light) .dialog,
html:not(.light) .chart-modal{
  background: var(--glass-dark-3);
}

html.light .overlay,
html.light .dialog,
html.light .chart-modal{
  background: var(--glass-light-3);
}

/* Refuerzo de contraste interno */
html.light .drawer .acc,
html.light .modal-card .profile-left,
html.light .modal-card .profile-right,
html.light .overlay-panel > *{
  background: rgba(255,255,255,.55);
}

.modal.open .modal-card,
.overlay-panel{
  transition:
    background .25s ease,
    backdrop-filter .25s ease;
}


.token{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.token .ico{font-size:14px;line-height:1}
.token .lbl{opacity:.9}
.token .val{margin-left:auto;font-variant-numeric:tabular-nums}
.token-alem{color:#FFD84D;box-shadow:0 0 0 2px rgba(240, 189, 4, 0.903) inset}
.token-aura{color:#6EC8FF;box-shadow:0 0 0 2px rgba(24, 149, 171, 0.66) inset}
.token-vealem{color:#cf5e12;box-shadow:0 0 0 2px rgba(243, 136, 15, 0.911) inset}
.token-dharma{color:#16c92b;box-shadow:0 0 0 2px rgba(7, 186, 52, 0.597) inset}
.token-karma{color:#f04242;box-shadow:0 0 0 2px rgba(245, 10, 10, 0.944) inset;opacity:.75}
.token-karma.negative{color:#FF2D55;opacity:1;box-shadow:0 0 0 1px rgba(244, 13, 56, 0.35) inset}
.hint.vealem{margin-top:6px;color:#B084FF}

/* ===== LIGHT THEME: botones del menú ===== */
html.light .drawer-link,
html.light .icon-btn,
html.light .bottom-btn{
  background: rgba(0,0,0,.06);
  color: #08101a;
  border-color: rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.08) inset,
    0 6px 14px rgba(0,0,0,.08);
}

html.light .drawer-link:hover,
html.light .icon-btn:hover{
  background: rgba(0,163,255,.15);
  color: #08101a;
  box-shadow:
    0 0 0 1px rgba(0,163,255,.45),
    0 0 14px rgba(0,163,255,.35);
}

/* ===== LIGHT THEME: tabs de acreditaciones ===== */
html.light .cert-tab{
  background: rgba(0,0,0,.06);
  color: #08101a;
  border-color: rgba(0,0,0,.12);
  opacity: .65;
}

html.light .cert-tab:hover{
  opacity: .9;
  background: rgba(0,163,255,.18);
}

html.light .cert-tab.active{
  background: linear-gradient(135deg,#00cbb0,#00a3ff);
  color: #08101a;
  border-color: rgba(0,163,255,.55);
  opacity: 1;
  box-shadow:
    0 10px 22px rgba(0,163,255,.45),
    0 0 0 1px rgba(255,255,255,.65) inset;
}

/* ===============================
   Mobile density (70%)
   =============================== */
@media (max-width: 480px){
  html{
    font-size: 70%;
  }
}

/* =========================================
   Fix global: scroll lateral fantasma
   ========================================= */
html, body{
  overflow-x: hidden;
}

/* Evitar desbordes por glows y animaciones */
.hero,
.hero-inner,
.container,
.drawer,
.modal{
  max-width: 100%;
  overflow-x: hidden;
}

.poap-row,
.poap-marquee,
.poap-track,
.cert-row,
.cert-marquee,
.cert-track{
  overflow-x: hidden;
}

@media (min-width: 768px){
  .bottom-safe-space{
    display: none;
  }
}

/* Dark theme scrollbar */
html:not(.light){
  scrollbar-color: rgba(0,255,213,.55) rgba(255,255,255,.06);
}
html:not(.light)::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}
html:not(.light)::-webkit-scrollbar-thumb{
  border: 2px solid rgba(8,16,26,.55);
}

/* Light theme scrollbar */
html.light{
  scrollbar-color: rgba(0,163,255,.55) rgba(0,0,0,.06);
}
html.light::-webkit-scrollbar-track{
  background: rgba(0,0,0,.05);
  border-left: 1px solid rgba(0,0,0,.10);
}
html.light::-webkit-scrollbar-thumb{
  border: 2px solid rgba(255,255,255,.70);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10) inset,
    0 8px 18px rgba(0,0,0,.15),
    0 0 16px rgba(0,163,255,.18);
}

/* Dark theme scrollbar */
html:not(.light){
  scrollbar-color: rgba(0,255,213,.55) rgba(255,255,255,.06);
}
html:not(.light)::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}
html:not(.light)::-webkit-scrollbar-thumb{
  border: 2px solid rgba(8,16,26,.55);
}

/* Light theme scrollbar */
html.light{
  scrollbar-color: rgba(0,255,213,.55) rgba(0,0,0,.06);
}
html.light::-webkit-scrollbar-track{
  background: rgba(0,0,0,.05);
  border-left: 1px solid rgba(0,0,0,.10);
}
html.light::-webkit-scrollbar-thumb{
  border: 2px solid rgba(255,255,255,.70);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10) inset,
    0 8px 18px rgba(0,0,0,.15),
    0 0 16px rgba(0,163,255,.18);
}

/* Anti-overflow hardening */
body{
  max-width: 100%;
}

main, header, nav, section, footer{
  max-width: 100%;
}

/* Evita 100vw problemático */
.full, .hero, .bottom-nav, .topbar{
  width: 100%;
}

/* Muy útil si algún hijo está empujando */
*{
  box-sizing: border-box;
}

/* =========================================
   FIX: Active bottom nav in LIGHT theme
   ========================================= */
html.light .bottom-btn.active{
  opacity: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #08101a;
  border-color: transparent;
  box-shadow:
    0 12px 26px rgba(0,163,255,.35),
    0 0 0 1px rgba(255,255,255,.55) inset;
}
html.light .bottom-btn.active::after{
  background: rgba(0,0,0,.85);
  box-shadow: 0 0 10px rgba(0,163,255,.55);
}

/* =========================================
   GLASS BASE — reusable across apps
   ========================================= */

.glass{
  border-radius: 24px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 12%);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,255,213,.12) inset;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  position: relative;
  overflow: hidden;
}

.glass::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(320px 180px at 15% 0%, rgba(0,255,213,.18), transparent 65%),
    radial-gradient(320px 180px at 85% 100%, rgba(0,163,255,.14), transparent 70%);
  opacity:.6;
  filter: blur(14px);
}

/* =========================================
   FIX ENS BRAND: elimina caja del punto "."
   ========================================= */

/* El brand NO debe comportarse como flex */
.brand-link{
  display: inline;
}

/* El contenedor tipográfico es inline */
.brand{
  display: inline;
}

/* El punto NO debe ser ítem de layout */
.brand .dot{
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  border: 0;
}

/* Seguridad: sin pseudo-elementos */
.brand .dot::before,
.brand .dot::after{
  content: none;
}

/* =====================================================
   FIX POAPS / CERTS: evitar recorte al flotar
   ===================================================== */

/* El contenedor NO debe cortar en Y */
.poap-row{
  overflow-x: hidden;   /* mantiene el carrusel */
  overflow-y: visible;  /* deja respirar el hover */
  padding-top: 16px;    /* aire arriba para el salto */
  padding-bottom: 22px;/* aire abajo */
}

/* Igual para certificaciones */
.cert-row{
  overflow: visible;
}

/* El marquee solo corta en X */
.cert-marquee{
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: 10px;
  padding-bottom: 16px;
}




/* =====================================================
   POAPS / CERTS · FLOAT FIX LIMPIO Y PARAMETRIZADO
   ===================================================== */

:root{
  /* Espacio interno para permitir el salto */
  --poap-pad-y: 10px;
  --poap-pad-x: 8px;

  /* Movimiento en hover */
  --poap-lift: -4px;
  --poap-scale: 1.03;

  /* Sombra en hover */
  --poap-shadow: 0 14px 26px rgba(0,0,0,.45);
}

/* ---------- ROW: contenedor estable ---------- */
.poap-row,
.cert-row{
  position: relative;
  overflow: hidden;                 /* NO empuja layout */
  padding:
    var(--poap-pad-y)
    var(--poap-pad-x);
  border-radius: 14px;
}

/* ---------- MARQUEE: corta solo en X ---------- */
.poap-marquee,
.cert-marquee{
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ---------- TRACK: nunca recorta ---------- */
.poap-track,
.cert-track{
  overflow: visible;
}

/* ---------- ITEM: animación visual ---------- */
.poap,
.cert-badge{
  transform: translateY(0) scale(1);
  transition:
    transform .25s ease,
    filter .25s ease;
  will-change: transform;
}

/* Hover flotante (NO afecta layout) */
.poap:hover,
.cert-badge:hover{
  transform:
    translateY(var(--poap-lift))
    scale(var(--poap-scale));
  filter: drop-shadow(var(--poap-shadow));
}

/* =========================================
   FIX DEFINITIVO: scroll vertical del root
   ========================================= */

/* El root SI debe declarar overflow-y */
html{
  overflow-y: auto !important;
}

/* El body solo controla X */
body{
  overflow-x: hidden;
  overflow-y: visible;
  min-height: 100vh;
}

/* Evita que fixed + blur oculten el scrollbar */
.topbar,
.bottom-nav,
.drawer,
.modal{
  max-width: calc(100vw - 0px);
}