/* ============================================================
   STARSEED · APP / DASHBOARD STYLES (v5)
   Cristal líquido · vidrio · geometría sagrada · respiración digital
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:radial-gradient(1200px 800px at 15% -10%,var(--bg-1),var(--bg-0) 60%);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---------------- Fondo viviente: blobs + grano + geometría sagrada ---------------- */
.bg{position:fixed;inset:0;z-index:-3;overflow:hidden;filter:saturate(1.05)}
.blob{position:absolute;width:46vw;height:46vw;border-radius:var(--r-organic-1);filter:blur(60px);opacity:.55;mix-blend-mode:screen;animation:drift var(--breath-slow) var(--ease-organic) infinite alternate}
.b1{background:var(--blob-1);left:-8vw;top:-6vw}
.b2{background:var(--blob-2);right:-10vw;top:8vw;animation-delay:-2s}
.b3{background:var(--blob-3);left:14vw;bottom:-14vw;animation-delay:-4s}
.b4{background:var(--blob-4);right:6vw;bottom:-6vw;animation-delay:-6s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1) rotate(0deg)}to{transform:translate3d(2vw,-3vw,0) scale(1.12) rotate(8deg)}}

.sacred{position:fixed;inset:0;z-index:-2;opacity:var(--sacred-opacity);pointer-events:none}
.sacred svg{width:min(120vmin,1400px);height:min(120vmin,1400px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:spin var(--spin-vslow) linear infinite}
.sacred circle,.sacred path,.sacred line,.sacred polygon{fill:none;stroke:var(--sg-stroke);stroke-width:var(--sg-line)}
.sacred .alt{stroke:var(--sg-stroke-2)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>")}

/* ---------------- Layout app shell ---------------- */
.shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
@media (max-width:880px){.shell{grid-template-columns:1fr}}

/* sidebar */
.side{
  position:sticky;top:0;height:100vh;padding:22px 16px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-right:1px solid var(--stroke);
}
@media (max-width:880px){.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--stroke)}}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px}
.brand img{width:52px;height:52px;object-fit:contain;border-radius:0;filter:drop-shadow(0 0 12px rgba(255,194,71,.45));animation:breathe var(--breath) var(--ease-soft) infinite}
@keyframes breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.04);filter:brightness(1.08)}}
.brand .bt{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.05}
.brand .bs{font-size:11px;color:var(--ink-mute);letter-spacing:.14em;text-transform:uppercase}

.nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
@media (max-width:880px){.nav{flex-direction:row;flex-wrap:wrap}}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:14px;color:var(--ink-soft);font-weight:500;font-size:14px;transition:.18s var(--ease-soft);border:1px solid transparent}
.nav a .ic{width:20px;height:20px;display:grid;place-items:center;opacity:.85}
.nav a:hover{background:var(--glass);color:var(--ink);transform:translateX(2px)}
.nav a.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink);border-color:var(--stroke);box-shadow:inset 0 0 0 1px var(--glass-hi)}
.nav a.active .ic{color:var(--accent);opacity:1}
.side .spacer{flex:1}
.side .foot{font-size:11px;color:var(--ink-mute);padding:8px;line-height:1.6}
.side .foot a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

/* main */
.main{padding:clamp(18px,3vw,40px);max-width:1280px;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.topbar h1{font-family:var(--serif);font-size:var(--fs-h1);font-weight:600;letter-spacing:-.02em}
.topbar h1 .accentword{background:var(--grad-arcoiris);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .sub{color:var(--ink-soft);font-size:var(--fs-lead);margin-top:4px;max-width:62ch}
.tools{display:flex;gap:10px;align-items:center}

.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(10px)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--neon-lime);box-shadow:0 0 10px var(--neon-lime)}
.chip.warn .dot{background:var(--neon-amber);box-shadow:0 0 10px var(--neon-amber)}
.chip.off .dot{background:var(--ink-mute);box-shadow:none}

.iconbtn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--stroke);transition:.18s var(--ease-soft)}
.iconbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}

/* sections */
.section{display:none;animation:rise .5s var(--ease-glide) both}
.section.show{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:600;margin:8px 0 4px;letter-spacing:-.01em}
.muted{color:var(--ink-soft);max-width:70ch}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;font-family:var(--mono)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--stroke),transparent);margin:28px 0}

/* glass card */
.card{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--stroke);border-radius:var(--r-card);padding:20px;
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--glass-hi);
  position:relative;overflow:hidden;transition:.25s var(--ease-organic);
}
.card::before{content:"";position:absolute;inset:0;background:var(--film);opacity:.0;transition:opacity .4s;pointer-events:none;mix-blend-mode:screen}
.card:hover::before{opacity:.5}

.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---------------- HERO / Inicio ---------------- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;margin-bottom:8px}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero .medallion{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:420px;margin:0 auto;width:100%}
.hero .medallion .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--stroke);animation:spin var(--spin-slow) linear infinite}
.hero .medallion .ring.r2{inset:8%;border-style:solid;border-color:color-mix(in srgb,var(--accent-2) 40%,transparent);animation-direction:reverse;animation-duration:var(--spin-vslow)}
.hero .medallion img{width:62%;position:relative;z-index:2;object-fit:contain;filter:drop-shadow(0 0 28px rgba(255,194,71,.5)) drop-shadow(0 24px 60px rgba(0,0,0,.55));animation:breathe var(--breath-slow) var(--ease-soft) infinite}
.hero .medallion canvas{position:absolute;inset:-12%;width:124%;height:124%;z-index:1;pointer-events:none}
.hero .medallion .ring.r3{inset:16%;border-style:dotted;border-color:color-mix(in srgb,var(--neon-cyan) 45%,transparent);animation-duration:64s}
.hero h2{font-family:var(--serif);font-size:clamp(30px,5vw,56px);line-height:1.02;font-weight:600;letter-spacing:-.025em;margin-bottom:10px}
.hero h2 em{font-style:italic;background:var(--grad-arcoiris);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--ink-soft);font-size:var(--fs-lead);max-width:52ch;margin-bottom:22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--r-pill);font-weight:700;font-size:15px;
  background:var(--grad-solar);color:#fff;box-shadow:var(--halo-amber);transition:.2s var(--ease-elastic);border:1px solid rgba(255,255,255,.16)}
.btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.06)}
.btn.ghost{background:var(--glass);color:var(--ink);box-shadow:none;border:1px solid var(--stroke);backdrop-filter:blur(10px)}
.btn.ghost:hover{box-shadow:var(--shadow-card)}
.btn.lime{background:var(--grad-musgo)}
.btn.small{padding:8px 14px;font-size:13px}

/* stats */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .n{font-family:var(--serif);font-size:30px;font-weight:600;background:var(--grad-arcoiris);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em}

/* ---------------- ÁREAS ---------------- */
.area{display:flex;flex-direction:column;gap:12px;min-height:230px;cursor:default}
.area .head{display:flex;align-items:center;gap:13px}
.area .glyph{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex:none;
  background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 0 18px color-mix(in srgb,var(--areac) 35%,transparent);color:var(--areac)}
.area h3{font-family:var(--serif);font-size:21px;font-weight:600}
.area .tag{font-size:11px;color:var(--ink-mute);font-family:var(--mono);letter-spacing:.06em}
.area p{color:var(--ink-soft);font-size:13.5px;flex:1}
.area .foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.badge{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--stroke)}
.badge.live{color:var(--neon-lime);background:color-mix(in srgb,var(--neon-lime) 14%,transparent)}
.badge.soon{color:var(--neon-amber);background:color-mix(in srgb,var(--neon-amber) 12%,transparent)}
.badge.ext{color:var(--neon-cyan);background:color-mix(in srgb,var(--neon-cyan) 12%,transparent)}
.area .bar{height:6px;border-radius:var(--r-pill);background:var(--stroke-soft);overflow:hidden}
.area .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad-arcoiris)}

/* ---------------- SISTEMA DE DISEÑO ---------------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.sw{border-radius:14px;overflow:hidden;border:1px solid var(--stroke);background:var(--glass)}
.sw .chipc{height:64px}
.sw .meta{padding:8px 10px;font-size:11px}
.sw .meta b{display:block;font-size:12px}
.sw .meta code{font-family:var(--mono);color:var(--ink-mute);font-size:10.5px}

.typespec{display:flex;flex-direction:column;gap:10px}
.typespec .row{display:flex;align-items:baseline;gap:14px;border-bottom:1px dashed var(--stroke);padding-bottom:10px;flex-wrap:wrap}
.typespec .lab{font-family:var(--mono);font-size:11px;color:var(--ink-mute);width:130px;flex:none}

.grad-strip{height:70px;border-radius:14px;border:1px solid var(--stroke)}
/* Logotipos: SIEMPRE completos, sin recortes ni deformación */
.logo-cell{display:flex;flex-direction:column;gap:10px;text-align:center;margin:0;border-radius:18px;border:1px solid var(--stroke);overflow:hidden;background:var(--glass);transition:.25s var(--ease-organic)}
.logo-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.logo-cell .logo-frame{display:grid;place-items:center;aspect-ratio:4/3;padding:18px}
.logo-cell .logo-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:0;filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.logo-cell.dark .logo-frame{background:#0d130e}
.logo-cell.lite .logo-frame{background:#f5f3e8}
.logo-cell figcaption{padding:0 14px 14px}
.logo-cell figcaption b{font-size:13px;display:block}
.logo-cell figcaption p{font-size:11.5px;color:var(--ink-mute);margin-top:3px;line-height:1.45}

/* ---------------- CONSTITUCIÓN / TRIADA ---------------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.triad{grid-template-columns:1fr}}
.pillar{border-top:3px solid var(--pc);position:relative}
.pillar .sym{font-size:30px;margin-bottom:8px}
.pillar h3{font-family:var(--serif);font-size:20px;margin-bottom:6px}
.pillar ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pillar li{font-size:13px;color:var(--ink-soft);padding-left:18px;position:relative}
.pillar li::before{content:"◆";position:absolute;left:0;color:var(--pc);font-size:9px;top:4px}

.doclist{display:flex;flex-direction:column;gap:8px}
.doclink{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke);transition:.18s var(--ease-soft)}
.doclink:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.doclink .di{font-size:18px}
.doclink .dn{font-weight:600;font-size:14px}
.doclink .dd{font-size:12px;color:var(--ink-mute)}

/* ---------------- PANEL DE CONTROL (CMS) ---------------- */
.panelbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;background:var(--glass);border:1px solid var(--stroke);color:var(--ink-soft)}
.tab.active{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--ink);border-color:var(--stroke)}

.kv{display:grid;grid-template-columns:1fr;gap:12px}
.entry{display:grid;grid-template-columns:200px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:16px;background:var(--glass);border:1px solid var(--stroke)}
@media (max-width:760px){.entry{grid-template-columns:1fr}}
.entry .label{display:flex;flex-direction:column;gap:3px}
.entry .label b{font-size:14px}
.entry .label small{font-size:11px;color:var(--ink-mute);font-family:var(--mono)}
.entry .val{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field{flex:1;min-width:160px;padding:10px 12px;border-radius:12px;background:var(--bg-0);border:1px solid var(--stroke);color:var(--ink);font-family:var(--mono);font-size:13px}
.field:focus{border-color:var(--accent);box-shadow:var(--halo-lime)}
.entry .actions{display:flex;gap:6px}
.mini{padding:8px 11px;border-radius:10px;background:var(--glass);border:1px solid var(--stroke);font-size:12px;font-weight:600;transition:.15s}
.mini:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.mini.danger:hover{background:color-mix(in srgb,var(--rojo) 30%,transparent);color:#fff}
.statuspill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--stroke)}
.statuspill.ok{color:var(--neon-lime)}
.statuspill.empty{color:var(--ink-mute)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(40px);opacity:0;
  background:var(--cacao);color:#fff;padding:13px 22px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-card);z-index:99;transition:.35s var(--ease-elastic);border:1px solid var(--stroke)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.note{font-size:12.5px;color:var(--ink-soft);background:color-mix(in srgb,var(--neon-amber) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--neon-amber) 30%,transparent);border-radius:14px;padding:12px 14px;display:flex;gap:10px}
.note .ni{font-size:16px}

/* tiny scrollbars */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------------- GALERÍA DE IMÁGENES ---------------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.figc{background:var(--glass);border:1px solid var(--stroke);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.25s var(--ease-organic)}
.figc:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.figc{margin:0}
.figc .imgwrap{display:block;aspect-ratio:16/10;background:radial-gradient(120% 120% at 50% 0%,rgba(159,232,112,.06),rgba(13,19,14,.92));overflow:hidden;position:relative}
.figc img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;transition:.45s var(--ease-organic)}
.figc:hover img{transform:scale(1.06)}
.figc .cap{padding:12px 14px}
.figc .cap b{font-family:var(--serif);font-size:15px;display:block;margin-bottom:3px}
.figc .cap p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.figc .expand{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;background:rgba(13,19,14,.72);display:grid;place-items:center;opacity:0;transition:.2s;border:1px solid var(--stroke)}
.figc .expand svg{width:15px;height:15px}
.figc:hover .expand{opacity:1}

/* área con imagen hero + glifo de imagen */
.area .hero-img{margin:-20px -20px 4px;height:148px;overflow:hidden;position:relative;border-bottom:1px solid var(--stroke)}
.area .hero-img img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease-organic)}
.area:hover .hero-img img{transform:scale(1.05)}
.area .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--glass-strong))}
.glyph-img{width:56px;height:56px;border-radius:17px;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 0 18px color-mix(in srgb,var(--areac,#9FE870) 30%,transparent),0 0 18px color-mix(in srgb,var(--areac,#9FE870) 30%,transparent)}
.glyph-img img{width:84%;height:84%;object-fit:contain}
.area .hero-img.contain img{object-fit:contain;padding:10px}
.drivelink{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--accent-2);font-family:var(--mono)}
.drivelink svg{width:14px;height:14px}
.drivelink:hover{text-decoration:underline}

/* ============================================================
   v6 · PORTAL STARSEED OS — componentes nuevos
   (cuenta, cartera, gráficas, estudio, audiomorphic, micelio,
    tilt 3D orgánico, reveal en scroll, convocatoria, paquetes)
   ============================================================ */

/* ---- reveal en scroll ---- */
.rv{opacity:0;transform:translateY(16px) scale(.985)}
.rv.in{opacity:1;transform:none;transition:.7s var(--ease-glide)}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none}}

/* ---- tilt 3D ---- */
.tilt{transition:transform .35s var(--ease-organic), box-shadow .3s; will-change:transform; transform-style:preserve-3d}

/* ---- hero v6 ---- */
.hero-tx{position:relative;z-index:2}

/* ---- convocatoria ---- */
.convgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.convgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.convgrid{grid-template-columns:repeat(2,1fr)}}

/* ---- tarjetas herramienta (Estudio) ---- */
.toolc{display:flex;flex-direction:column;gap:8px;min-height:170px;text-align:left}
.toolc .glyph{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 0 16px color-mix(in srgb,var(--areac,#C9A8FF) 30%,transparent)}
.toolc b{font-family:var(--serif);font-size:16px}
.toolc:hover{border-color:color-mix(in srgb,var(--areac,#C9A8FF) 55%,transparent)}
.studio-preview{margin-top:14px}
.studio-preview img{max-width:100%;max-height:260px;object-fit:contain;border-radius:14px;border:1px solid var(--stroke);background:#0d130e;padding:8px}

/* ---- paquetes de infraestructura ---- */
.pack{display:flex;flex-direction:column;border-top:3px solid var(--areac)}
.pack .price{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--areac);margin-top:10px}

/* ---- cartera (Fundación) ---- */
.wallet{--areac:#FF8A5C}
.w-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.w-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media (max-width:860px){.w-stats{grid-template-columns:repeat(2,1fr)}}
.wstat{padding:14px;border-radius:16px;background:var(--glass);border:1px solid var(--stroke)}
.wstat .n{font-family:var(--serif);font-size:24px;font-weight:600}
.wstat.seed .n{color:var(--semilla);text-shadow:0 0 18px color-mix(in srgb,var(--semilla) 50%,transparent)}
.wstat .l{font-size:10.5px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;font-family:var(--mono)}
.w-grains{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.grainpill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--gc,#C9A24B) 12%,transparent);border:1px solid color-mix(in srgb,var(--gc,#C9A24B) 40%,transparent);font-size:12.5px}
.grainpill .ge{font-size:15px}
.grainpill b{font-family:var(--mono)}
.grainpill .gl{color:var(--ink-mute);font-size:11px}

/* ---- gráficas ---- */
.chartc canvas{width:100%;height:220px;display:block}

/* ---- historial (ledger) ---- */
.ledger{display:flex;flex-direction:column;gap:7px}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--glass);border:1px solid var(--stroke-soft);font-size:12.5px}
.lrow .lk{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;color:var(--kc);background:color-mix(in srgb,var(--kc) 14%,transparent);border:1px solid color-mix(in srgb,var(--kc) 35%,transparent)}
.lrow .ln{flex:1;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lv{font-family:var(--mono);font-size:11.5px}
.lrow .lt{color:var(--ink-mute);font-size:10.5px;font-family:var(--mono)}

/* ---- flujo de abundancia ---- */
.flow{display:flex;flex-direction:column;gap:8px}
.fstep{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--stroke-soft);font-size:13px;color:var(--ink-soft)}
.fstep .fn{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--grad-musgo);color:#fff}

/* ---- Audiomorphic ---- */
.am-hero{text-align:center;align-items:center;display:flex;flex-direction:column}
.am-icon{width:128px;height:128px;object-fit:contain;border-radius:28px;box-shadow:0 0 38px rgba(111,230,214,.45),0 18px 50px rgba(0,0,0,.5);animation:breathe var(--breath-slow) var(--ease-soft) infinite}
.genesis{display:flex;flex-wrap:wrap;gap:7px}
.gstage{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:var(--glass);color:var(--ink-soft);animation:gstage 4.4s var(--ease-soft) infinite;animation-delay:calc(var(--i)*.35s)}
@keyframes gstage{0%,100%{box-shadow:none;color:var(--ink-soft)}50%{box-shadow:0 0 14px rgba(111,230,214,.5);color:var(--neon-cyan);border-color:var(--neon-cyan)}}

/* ---- cuenta / perfiles ---- */
.login-row{display:flex;gap:8px;flex-wrap:wrap}
.login-row .field{flex:1;min-width:170px}
.profrow{display:flex;gap:8px;flex-wrap:wrap}
.profchip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--stroke);font-size:13px;font-weight:600;color:var(--ink-soft);transition:.2s var(--ease-soft)}
.profchip small{font-size:10px;color:var(--ink-mute);font-family:var(--mono);text-transform:uppercase}
.profchip .pdot{width:9px;height:9px;border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc)}
.profchip:hover{transform:translateY(-1px)}
.profchip.on{color:var(--ink);border-color:color-mix(in srgb,var(--pc) 60%,transparent);background:color-mix(in srgb,var(--pc) 12%,transparent)}

/* ---- enlaces dentro de captions ---- */
.figc .cap .drivelink{margin-top:7px;display:inline-flex}

/* ---- accesibilidad: foco visible en chips/cards enlazadas ---- */
a.card:focus-visible,.profchip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- topbar chip cuenta ---- */
#accountChip{cursor:pointer}

/* ============================================================
   v6.1 · STARSEED NEXUS — cristal líquido 3D · art déco/nouveau
   Transiciones fluidas, ornamentos dorados, vidrio profundo,
   título iridiscente vivo, nav líquida, botones con destello.
   ============================================================ */

/* ---- entrada de sección: 3D profunda con desenfoque ---- */
@keyframes riseDeep{
  from{opacity:0; transform:perspective(1100px) translateY(28px) rotateX(4.5deg) scale(.985); filter:blur(7px) saturate(.9)}
  60%{filter:blur(0) saturate(1)}
  to{opacity:1; transform:none; filter:none}
}
.section.show{animation:riseDeep .65s var(--ease-glide) both}

/* ---- ornamento déco en títulos de sección ---- */
.h2{position:relative;padding-bottom:10px}
.h2::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:120px;
  background:linear-gradient(90deg,var(--oro),var(--ambar) 45%,transparent);
  -webkit-mask:linear-gradient(90deg,#000 0 38px,transparent 38px 46px,#000 46px 54px,transparent 54px 58px,#000 58px);
          mask:linear-gradient(90deg,#000 0 38px,transparent 38px 46px,#000 46px 54px,transparent 54px 58px,#000 58px);
}
.eyebrow{display:inline-flex;align-items:center;gap:7px}
.eyebrow::before{content:"✦";font-size:9px;color:var(--oro);text-shadow:0 0 8px var(--oro)}

/* ---- divisor con diamante déco ---- */
.divider{position:relative;overflow:visible}
.divider::after{content:"◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);font-size:8px;color:var(--oro);background:var(--bg-0);padding:0 10px;text-shadow:0 0 10px color-mix(in srgb,var(--oro) 70%,transparent);animation:diamondSpin 14s linear infinite}
@keyframes diamondSpin{50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.25)}}

/* ---- nav líquida: indicador con gradiente vivo ---- */
.nav a{position:relative;overflow:hidden}
.nav a::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:99px;background:var(--grad-arcoiris);background-size:100% 300%;opacity:0;transform:scaleY(.3);transition:.35s var(--ease-elastic)}
.nav a.active::before{opacity:1;transform:none;animation:navFlow 5s linear infinite}
@keyframes navFlow{to{background-position:0 300%}}
.nav a.active{padding-left:17px}

/* ---- título héroe iridiscente animado ---- */
.hero h2 em{background-size:240% 240%;animation:iridFlow 9s var(--ease-soft) infinite}
.topbar h1 .accentword{background-size:240% 240%;animation:iridFlow 11s var(--ease-soft) infinite}
@keyframes iridFlow{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}

/* ---- medallón: anillo déco doble + aurora ---- */
.hero .medallion::after{
  content:""; position:absolute; inset:4%; border-radius:50%;
  border:1px double color-mix(in srgb,var(--oro) 55%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--oro) 25%,transparent), inset 0 0 24px color-mix(in srgb,var(--oro) 14%,transparent);
  animation:spin 90s linear infinite reverse; pointer-events:none;
  -webkit-mask:conic-gradient(#000 0 12%,transparent 12% 13%,#000 13% 37%,transparent 37% 38%,#000 38% 62%,transparent 62% 63%,#000 63% 87%,transparent 87% 88%,#000 88%);
          mask:conic-gradient(#000 0 12%,transparent 12% 13%,#000 13% 37%,transparent 37% 38%,#000 38% 62%,transparent 62% 63%,#000 63% 87%,transparent 87% 88%,#000 88%);
}

/* ---- aurora de fondo (capa líquida superior) ---- */
.bg::after{
  content:""; position:absolute; inset:-20% -10%;
  background:
    radial-gradient(38% 26% at 22% 18%, color-mix(in srgb,var(--neon-cyan) 9%,transparent), transparent 70%),
    radial-gradient(42% 30% at 78% 12%, color-mix(in srgb,var(--neon-lav) 9%,transparent), transparent 70%),
    radial-gradient(50% 34% at 50% 86%, color-mix(in srgb,var(--neon-lime) 7%,transparent), transparent 72%);
  mix-blend-mode:screen; animation:auroraDrift 26s var(--ease-soft) infinite alternate;
}
@keyframes auroraDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-3%,0) scale(1.06)}}

/* ---- vidrio profundo: borde iridiscente al hover ---- */
.card{will-change:transform}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 36%,var(--stroke))}
.card:hover{box-shadow:var(--shadow-card),0 0 0 1px color-mix(in srgb,var(--accent-2) 22%,transparent),inset 0 1px 0 var(--glass-hi)}
.area:hover .glyph-img{box-shadow:inset 0 0 22px color-mix(in srgb,var(--areac,#9FE870) 45%,transparent),0 0 26px color-mix(in srgb,var(--areac,#9FE870) 45%,transparent)}

/* ---- botones: destello líquido ---- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:36%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .7s var(--ease-glide);pointer-events:none}
.btn:hover::after{left:135%}
.btn:active{transform:translateY(-1px) scale(.985)}
.iconbtn:hover{transform:translateY(-2px) rotate(8deg)}

/* ---- galería: marco nouveau al hover + caption fluida ---- */
.figc{position:relative}
.figc::after{content:"";position:absolute;inset:7px;border-radius:13px;border:1px solid color-mix(in srgb,var(--oro) 0%,transparent);pointer-events:none;transition:.4s var(--ease-organic)}
.figc:hover::after{border-color:color-mix(in srgb,var(--oro) 45%,transparent);inset:5px}
.figc .cap{transition:.3s var(--ease-soft)}
.figc:hover .cap b{color:var(--accent)}

/* ---- doclinks: hilo dorado ---- */
.doclink{position:relative;overflow:hidden}
.doclink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:linear-gradient(90deg,var(--oro),transparent 60%);transform:scaleX(0);transform-origin:left;transition:.45s var(--ease-glide)}
.doclink:hover::after{transform:none}

/* ---- mapa de enlaces ---- */
.linkc .glyph{color:var(--neon-cyan)}
.linkc:hover{border-color:color-mix(in srgb,var(--neon-cyan) 50%,transparent)}

/* ---- stats: pulso vivo ---- */
.stat .n{animation:statGlow 6s var(--ease-soft) infinite}
@keyframes statGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--neon-lime) 40%,transparent))}}

/* ---- chips de perfil y grain pills: respiración ---- */
.grainpill:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* ---- tema claro: ajustar diamantes ---- */
[data-theme="light"] .divider::after{background:var(--bg-1)}

@media (prefers-reduced-motion: reduce){
  .section.show{animation:none}
  .bg::after,.hero h2 em,.topbar h1 .accentword,.divider::after,.stat .n,.nav a.active::before{animation:none}
}

/* ============================================================
   v6.2 · CENTRO DE MANDO + VISOR + ÍCONOS 3D + EQUILIBRIO
   ============================================================ */

/* texto balanceado y centrado tipográfico */
.h2,.hero h2,.topbar h1{text-wrap:balance}
.muted,.hero p,.topbar .sub{text-wrap:pretty}

/* título de área con ícono 3D */
.h2-icon{display:inline-flex;align-items:center;gap:14px}
.glyph-img.lg{width:64px;height:64px;border-radius:19px}
.glyph-img.xl{width:120px;height:120px;border-radius:26px}
.glyph-img{position:relative}
.glyph-img .i3d-canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.glyph .i3d-canvas{width:100% !important;height:100% !important;display:block}
.toolc .glyph{position:relative;overflow:hidden}

/* pestañas del Centro de Mando */
.centro-tabs .tab{font-size:14px;padding:10px 18px}
.centro-tabs .tab.active{box-shadow:0 0 0 1px color-mix(in srgb,var(--oro) 30%,transparent), inset 0 0 18px color-mix(in srgb,var(--accent) 10%,transparent)}

/* chips de seguridad (próximos métodos de acceso) */
.secchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.secchip{font-size:11px;font-family:var(--mono);padding:6px 11px;border-radius:999px;border:1px dashed var(--stroke);color:var(--ink-mute);display:inline-flex;gap:6px;align-items:center}
.secchip i{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--neon-amber)}
.secchip.soon{opacity:.85}

/* insignia de tipo en la galería (vídeo/PDF/doc) */
.kindbadge{position:absolute;left:8px;top:8px;font-size:10px;font-weight:700;font-family:var(--mono);letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(13,19,14,.78);border:1px solid var(--stroke);color:var(--neon-cyan);backdrop-filter:blur(6px)}

/* ajustes del exocórtex dentro del Centro (reutiliza .ssx-set) */
#centroHost .ssx-set{margin-bottom:14px}
#centroHost .ssx-set label{font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:6px}
#centroHost select.field,#centroHost textarea.field{width:100%}

/* la marca del sidebar también respira en 3D si hay slot */
@media (max-width:880px){ .h2-icon{gap:10px} .glyph-img.lg{width:48px;height:48px} }

/* ============================================================
   v7 · NEXUS MATERIA VIVA — héroes de área con escenarios
   generados, oro 3D extruido, entorno cósmico, conexiones.
   ============================================================ */

/* ---- entorno cósmico: un solo fondo ---- */
#entorno-nexus{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease-soft)}
body.envx-on #entorno-nexus{opacity:1}
body.envx-on .bg, body.envx-on .sacred{display:none}

/* ---- héroe de área ---- */
.area-hero{
  position:relative;height:clamp(230px,30vh,320px);border-radius:24px;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--oro) 30%,var(--stroke));
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.1);
  margin-bottom:16px;
}
.area-hero .hero-ken{
  position:absolute;inset:-6%;z-index:0;background-size:cover;background-position:center 42%;
  opacity:0;transition:opacity 1.8s var(--ease-soft);
  animation:nxKen 19s var(--ease-soft) infinite alternate;
  filter:saturate(1.1) contrast(1.04);
}
.area-hero .hero-ken.on{opacity:1}
@keyframes nxKen{from{transform:scale(1.04)}to{transform:scale(1.12) translateX(-1.4%)}}
.area-hero .ah-tint{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 135% at 50% 52%, rgba(13,19,14,.16) 28%, rgba(13,19,14,.78)), linear-gradient(0deg, rgba(13,19,14,.5), transparent 46%)}
.area-hero .ah-tx{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px clamp(16px,5%,46px);gap:8px}
.area-hero .eyebrow{background:rgba(10,14,9,.55);border:1px solid var(--stroke);backdrop-filter:blur(8px);padding:6px 13px;border-radius:999px;font-size:11px}
.ah-title{
  font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;margin:0;
  background:linear-gradient(92deg,#fff,#ffe9b8 45%,#cfe9b6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(122,84,24,.95)) drop-shadow(0 2px 0 rgba(82,54,14,.85)) drop-shadow(0 3px 1px rgba(40,26,6,.7)) drop-shadow(0 8px 16px rgba(0,0,0,.55));
}
.ah-desc{max-width:68ch;color:#e9efdd;font-size:clamp(13px,1.25vw,15.5px);text-shadow:0 1px 6px rgba(0,0,0,.7);text-wrap:pretty;margin:0}
.ah-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ah-glyph{width:54px;height:54px}
.area-hero .orn{position:absolute;width:64px;height:64px;pointer-events:none;z-index:4;opacity:.9;filter:drop-shadow(0 0 6px rgba(233,196,106,.35))}
.area-hero .orn svg{width:100%;height:100%;display:block}
.orn-c0{left:-2px;top:-2px}.orn-c1{right:-2px;top:-2px;transform:scaleX(-1)}
.orn-c2{right:-2px;bottom:-2px;transform:scale(-1)}.orn-c3{left:-2px;bottom:-2px;transform:scaleY(-1)}
.orn .orn-vine{stroke-dasharray:420;stroke-dashoffset:420}
.orn .orn-leaf{opacity:0;transform-origin:30% 20%;transform:scale(.6)}
.orn-grow .orn .orn-vine{animation:nxOrn 1.7s var(--ease-glide) forwards}
.orn-grow .orn .orn-leaf{animation:nxLeaf .8s var(--ease-elastic) 1.1s forwards}
.orn-grow .orn-c1 .orn-vine{animation-delay:.15s}.orn-grow .orn-c2 .orn-vine{animation-delay:.3s}.orn-grow .orn-c3 .orn-vine{animation-delay:.45s}
@keyframes nxOrn{to{stroke-dashoffset:0}}
@keyframes nxLeaf{to{opacity:.85;transform:scale(1)}}

/* ---- conexiones del ecosistema ---- */
.conex{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 22px;justify-content:center}
.cx-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.cx-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:12.5px;color:var(--ink-soft);
  background:linear-gradient(168deg,rgba(255,255,255,.09),rgba(0,0,0,.14));border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:.22s var(--ease-soft)}
.cx-chip .ic{width:15px;height:15px;display:inline-grid;place-items:center;color:var(--neon-cyan)}
.cx-chip:hover{transform:translateY(-2px);color:var(--ink);border-color:color-mix(in srgb,var(--oro) 45%,transparent);box-shadow:0 6px 16px rgba(0,0,0,.3)}

/* ---- vida idle + latido (port) ---- */
.mat-alive{animation:nxFloat 7.5s var(--ease-soft) infinite;animation-delay:calc(var(--fi,0) * -.9s)}
@keyframes nxFloat{0%,100%{translate:0 0}50%{translate:0 -2.5px}}
.mat-pulse{animation:nxPulse .55s var(--ease-elastic) !important}
@keyframes nxPulse{0%{transform:scale(1)}35%{transform:scale(.94)}70%{transform:scale(1.035)}100%{transform:scale(1)}}

/* ---- transición líquida de sección ---- */
@keyframes nxSwap{from{opacity:0;transform:perspective(1100px) translateY(20px) rotateX(2.5deg) scale(.99);filter:blur(7px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
.section.swap-in{animation:nxSwap .6s var(--ease-glide) both}

/* ---- vidrio: especular del puntero en tarjetas ---- */
.card::after, .figc::after, .area-hero::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:radial-gradient(320px 240px at var(--lx,50%) var(--ly,-30%), rgba(255,248,225,.12), rgba(255,255,255,.035) 40%, transparent 64%);
  opacity:0;transition:opacity .5s var(--ease-soft);
}
.mat-lit::after{opacity:1}
.figc::after{z-index:2}

/* ---- escala y oro en titulares del portal ---- */
.h2{font-size:clamp(25px,3.2vw,38px)}
.topbar h1{filter:drop-shadow(0 2px 0 rgba(60,40,10,.5)) drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.nav a{font-size:14.5px}
.btn:not(.ghost){
  box-shadow:var(--halo-amber), inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(90,40,10,.5);
  text-shadow:0 1px 2px rgba(90,40,10,.4);
}
@media (max-width:760px){ .area-hero{height:230px} .ah-title{font-size:27px} .conex{gap:7px} .cx-chip{font-size:11.5px;padding:7px 11px} }

/* ============================================================
   v7.1 · TOUR AMABLE EN MÓVIL + TEXTURAS DE ELEMENTOS XL
   ============================================================ */

/* ---- tour: hoja inferior en pantallas chicas, siempre alcanzable ---- */
@media (max-width:640px){
  .tg-card{position:fixed !important;left:12px !important;right:12px !important;bottom:12px !important;top:auto !important;transform:none !important;max-width:none !important;width:auto !important}
}

/* ---- objetivos de toque ≥44px y filas de botones llenas en móvil ---- */
@media (max-width:880px){
  .nav a{padding:12px 15px;font-size:14.5px}
  .nav{gap:7px}
}
@media (max-width:520px){
  .cta-row{width:100%}
  .cta-row .btn{flex:1 1 auto;justify-content:center;min-height:46px}
  .ah-actions .btn{min-height:44px}
  .login-row .btn,.login-row .field{min-height:46px}
  .w-grains .grainpill{flex:1 1 calc(50% - 9px);justify-content:center}
  .conex{row-gap:8px}
  .cx-chip{flex:1 1 calc(50% - 9px);justify-content:center}
  .centro-tabs .tab{flex:1 1 auto;text-align:center}
  .tabs{width:100%}
}

/* ---- NAV: gemas biseladas con riel de oro activo ---- */
.nav a{
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(0,0,0,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.25);
  border:1px solid transparent;
}
.nav a:hover{border-color:color-mix(in srgb,var(--oro) 28%,var(--stroke))}
.nav a.active{
  background:linear-gradient(168deg, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent) 8%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25), inset 3px 0 0 var(--oro);
}

/* ---- BOTONES: oro fundido FLUYENDO (4D) ---- */
.btn:not(.ghost){
  background:linear-gradient(110deg,#ffd98a,#F6A21E 30%,#C05C3B 60%,#F6A21E 85%,#ffd98a);
  background-size:240% 100%;
  animation:moltenFlow 7s var(--ease-soft) infinite;
  border:1px solid rgba(255,255,255,.28);
}
@keyframes moltenFlow{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---- TARJETAS: costura de oro cónica al despertar ---- */
.card{--seam:0}
.card:hover{--seam:1}
.card::before{
  background:var(--film), conic-gradient(from var(--seamdeg,200deg) at 50% 50%, transparent 70%, color-mix(in srgb,var(--oro) 55%,transparent) 76%, transparent 82%);
  background-blend-mode:screen;
}

/* ---- estadísticas: números GRABADOS en metal ---- */
.stat .n,.wstat .n{
  text-shadow:0 1px 0 rgba(255,250,230,.18), 0 -1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}

/* ---- glifos y herramientas: cristal interior ---- */
.glyph,.glyph-img{
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.13), rgba(255,255,255,.02) 42%, rgba(0,0,0,.2)), var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 6px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
}
.toolc:hover .glyph{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 6px rgba(0,0,0,.3), 0 0 18px color-mix(in srgb,var(--areac,#C9A8FF) 40%,transparent)}

/* ---- doclinks: pergamino con filo ---- */
.doclink{
  background:linear-gradient(180deg, rgba(255,250,235,.045), rgba(0,0,0,.12)), var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}

/* ---- centro/login tabs: tubo de neón ---- */
.tabs .tab.active{
  color:#ffe9b8;
  text-shadow:0 0 8px color-mix(in srgb,var(--neon-amber) 70%,transparent);
  box-shadow:inset 0 -2px 0 var(--neon-amber), inset 0 1px 0 rgba(255,255,255,.1), 0 0 14px color-mix(in srgb,var(--neon-amber) 28%,transparent);
}

/* ============================================================
   v7.2-NEXUS · CLICS EXACTOS EN TODO TAMAÑO + MENÚ FLOTANTE +
   GEOMETRÍA SAGRADA INTERACTIVA + MODO CLARO DIGNO
   ============================================================ */

/* ---- FIX raíz: iconos SVG SIEMPRE contenidos (botones nunca rotos) ---- */
.btn svg,.ah-actions svg,.cx-chip svg,.drivelink svg,.doclink .ic svg,.nav a .ic svg{width:18px;height:18px;flex:none}
.btn{white-space:nowrap}
.ah-actions .btn{min-height:44px;align-items:center}

/* ---- héroes: altura ADAPTABLE (el contenido jamás desborda) ---- */
.area-hero{height:auto;min-height:clamp(220px,28vh,310px);display:flex}
.area-hero .ah-tx{position:relative;inset:auto;flex:1;padding:30px clamp(16px,5%,46px)}

/* ---- táctil: cero animaciones de transform en el flujo de toque ---- */
@media (hover:none){
  .section.show{animation:none}
  .section.swap-in{animation:none}
  .mat-alive{animation:none}
  .card:hover{transform:none}
}

/* ---- nav móvil/tablet: rejilla EXACTA que llena el panel ---- */
@media (max-width:880px){
  .side{display:block;padding:14px 14px 10px}
  .brand{justify-content:center;margin-bottom:10px}
  .nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:0}
  .nav a{justify-content:center;text-align:center;padding:12px 8px;font-size:13.5px;min-height:46px}
  .nav a:hover{transform:none}
  .side .spacer{display:none}
  .side .foot{text-align:center;padding:10px 4px 2px}
}
@media (max-width:560px){
  .nav{grid-template-columns:repeat(2,1fr)}
  .nav a{font-size:14px}
}

/* ---- MENÚ FLOTANTE al hacer scroll (móvil/tablet) ---- */
#navFab{
  position:fixed;left:18px;bottom:18px;z-index:1190;width:56px;height:56px;border-radius:50%;
  display:none;place-items:center;font-size:22px;color:#ffe9b8;
  background:linear-gradient(165deg,#3a4a30,#1c2418);
  border:1px solid color-mix(in srgb,var(--oro) 45%,transparent);
  box-shadow:0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14), 0 0 18px color-mix(in srgb,var(--oro) 25%,transparent);
  opacity:0;transform:translateY(16px);transition:.35s var(--ease-elastic);
}
@media (max-width:880px){ #navFab{display:grid} }
body.scrolled #navFab{opacity:1;transform:none}
#navSheet{
  position:fixed;inset:0;z-index:1195;display:grid;align-items:end;
  background:rgba(8,12,8,.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:.3s;
}
body.ns-open #navSheet{opacity:1;pointer-events:auto}
#navSheet .ns-grip{position:absolute;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:99px;background:var(--stroke);margin-top:0;top:auto}
#navSheet .ns-grid{
  background:linear-gradient(180deg,var(--glass-strong),var(--bg-0));
  border-top:1px solid color-mix(in srgb,var(--oro) 35%,transparent);
  border-radius:26px 26px 0 0;padding:22px 16px max(18px, env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;
  transform:translateY(24px);transition:.35s var(--ease-glide);
  box-shadow:0 -20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  max-height:74vh;overflow:auto;
}
body.ns-open #navSheet .ns-grid{transform:none}
#navSheet .ns-grid a{display:flex;align-items:center;gap:10px;justify-content:center;padding:13px 10px;border-radius:14px;font-size:14px;color:var(--ink-soft);background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(0,0,0,.14));border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#navSheet .ns-grid a.active{color:#ffe9b8;border-color:color-mix(in srgb,var(--oro) 50%,transparent);box-shadow:inset 3px 0 0 var(--oro), inset 0 1px 0 rgba(255,255,255,.12)}
#navSheet .ns-grid a .ic svg{width:17px;height:17px}

/* ---- geometría sagrada VIVA sobre el entorno (interactiva) ---- */
body.envx-on .sacred{display:block;opacity:.075;z-index:-2;transform:translate(var(--sx,0),var(--syy,0));transition:transform .6s var(--ease-soft)}
html[data-theme="dark"] body.envx-on .bg{display:none}

/* ---- MODO CLARO digno (Nexus) ---- */
html[data-theme="light"] body.envx-on #entorno-nexus{display:none}
html[data-theme="light"] body.envx-on .bg{display:block}
html[data-theme="light"] .area-hero .ah-tint{background:radial-gradient(120% 135% at 50% 52%, rgba(245,243,232,.06) 30%, rgba(44,33,19,.55)), linear-gradient(0deg, rgba(44,33,19,.42), transparent 46%)}
html[data-theme="light"] .ah-desc{color:#f7f3e6}
html[data-theme="light"] .area-hero .eyebrow{background:rgba(245,243,232,.7);color:#3f3217;border-color:rgba(59,40,24,.25)}
html[data-theme="light"] .cx-chip{background:linear-gradient(168deg,rgba(255,255,255,.75),rgba(59,40,24,.05));color:#4a3a20}
html[data-theme="light"] .cx-chip .ic{color:#1f7a6b}
html[data-theme="light"] .nav a{background:linear-gradient(168deg,rgba(255,255,255,.6),rgba(59,40,24,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(59,40,24,.12)}
html[data-theme="light"] .nav a.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 3px 0 0 #a9842f, 0 4px 14px rgba(59,40,24,.12)}
html[data-theme="light"] #navFab{background:linear-gradient(165deg,#f3eed9,#ddd2ad);color:#6e4a2c}
html[data-theme="light"] #navSheet .ns-grid{background:linear-gradient(180deg,rgba(250,247,238,.97),#efebdb)}
html[data-theme="light"] #navSheet .ns-grid a{color:#4a3a20;background:linear-gradient(168deg,rgba(255,255,255,.8),rgba(59,40,24,.05))}
html[data-theme="light"] .ah-title{filter:drop-shadow(0 1px 0 rgba(122,84,24,.55)) drop-shadow(0 2px 0 rgba(82,54,14,.4)) drop-shadow(0 6px 12px rgba(59,40,24,.35))}
html[data-theme="light"] .stat .n,.wstat .n{text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(59,40,24,.3)}
html[data-theme="light"] .doclink{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(59,40,24,.04))}
/* el FAB no captura taps mientras está oculto */
#navFab{pointer-events:none}
body.scrolled #navFab{pointer-events:auto}

/* ---- MATERIA 3D: botones de oro WebGL real ---- */
.btn{isolation:isolate}
.btn .m3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;border-radius:inherit;object-fit:fill;pointer-events:none}
.btn.m3d-on:not(.ghost){animation:none;background:linear-gradient(170deg,#caa45f,#8a5a26)} /* base de respaldo bajo el canvas */
.btn.m3d-on:not(.ghost)::after{z-index:1}
.btn .m3d-lbl{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:inherit} /* texto e iconos SIEMPRE sobre el oro vivo */
.btn.m3d-on:not(.ghost){text-shadow:0 1px 2px rgba(40,24,4,.45)}


/* ============ v7.3 · MÓVIL SÓLIDO + LUZ ============ */
/* — fin del ensanche horizontal: el viewport jamás crece — */
html,body{overflow-x:clip}
.shell,.main{min-width:0;max-width:100%}
.main img,.main video,.main iframe{max-width:100%}
.lmap-wrap,.tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#s-inicio table,#s-cuenta table,.section table{max-width:100%}
.section td,.section th{word-break:break-word;overflow-wrap:anywhere}
/* — menú inferior: táctil de verdad — */
#navFab{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#navSheet .ns-grid{overscroll-behavior:contain}
#navSheet .ns-grid a{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:46px}
/* — constantes del sistema (mini, en Diseño) — */
.stats-mini{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px}
.smini{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);padding:7px 12px;border-radius:999px;border:1px solid var(--stroke);background:var(--glass)}
.smini b{color:#ffd98c;font-weight:700;margin-right:4px}
/* — MODO CLARO: pergamino vivo con la MISMA alma (geometría+blobs+grano) — */
html[data-theme="light"] body{background:radial-gradient(130% 95% at 50% -5%, #fdfaf0 0%, #f4ecd8 48%, #e9dec4 100%) fixed}
html[data-theme="light"] .bg .blob{opacity:.5;filter:blur(72px) saturate(.95)}
html[data-theme="light"] .blob.b1{background:#ffd9a0}
html[data-theme="light"] .blob.b2{background:#cde8b5}
html[data-theme="light"] .blob.b3{background:#bcdfe8}
html[data-theme="light"] .blob.b4{background:#ecc9d6}
html[data-theme="light"] .sacred{display:block !important;opacity:.16;filter:sepia(.7) saturate(1.5) brightness(.8)}
html[data-theme="light"] .grain{opacity:.28;mix-blend-mode:multiply}
html[data-theme="light"] .smini b{color:#8a5a16}

.drivelink{overflow-wrap:anywhere;word-break:break-all}
.toolc b,.toolc p{overflow-wrap:anywhere}

/* ---- Sub-navegación de área (5 áreas → secciones internas) ---- */
.area-tabs{margin:2px 0 20px;gap:8px}
.area-tabs .tab{text-decoration:none;display:inline-flex;align-items:center;line-height:1}
.area-tabs .tab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--oro) 28%,var(--stroke))}
@media (max-width:640px){
  .area-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;
    mask:linear-gradient(90deg,#0000 0,#000 14px,#000 calc(100% - 14px),#0000 100%);
    -webkit-mask:linear-gradient(90deg,#0000 0,#000 14px,#000 calc(100% - 14px),#0000 100%)}
  .area-tabs::-webkit-scrollbar{display:none}
  .area-tabs .tab{flex:0 0 auto;scroll-snap-align:start}
}
.omni-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--lavanda,#C9A8FF) 10%,transparent),transparent)}

/* ====== Balance, centrado y aprovechamiento del espacio (v73) ====== */
/* Centrar la columna de contenido en pantallas anchas (mejor equilibrio) */
.main{margin-inline:auto}
/* Sub-navegación de área centrada */
.area-tabs{justify-content:center}
/* Tétrada: cuatro pilares que se acomodan y envuelven con gracia */
.triad{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
/* Los cuatro fundamentos en Inicio: bloque centrado y simétrico */
.pillars-grid{max-width:940px;margin-inline:auto}
.pillars-grid .pillar{text-align:center}
.pillars-grid .pillar .sym{margin-inline:auto;width:fit-content}
.pillars-grid .pillar li::before{display:none}
.pillars-grid .pillar li{padding-left:0}
/* Galerías y rejillas: centradas cuando hay pocas piezas, sin estirar de más */
.gallery{justify-content:center}
.convgrid{justify-content:center}
/* Notas y CTAs centradas dentro de su ancho cómodo de lectura */
.note{max-width:96ch}
/* Tarjetas de área: cabecera alineada y respiración uniforme */
.card.area .head{align-items:center}
/* Omni: panel con acento sutil y acciones que respiran */
.omni-panel .cta-row{gap:10px}

/* ---- THE TETRAD: HOLOGRAPHIC & ORGANIC UI ---- */
@keyframes organic-breathe {
  0%, 100% { transform: scale(1) translateY(0); filter: brightness(1) drop-shadow(0 0 10px rgba(255,255,255,0.05)); }
  50% { transform: scale(1.02) translateY(-4px); filter: brightness(1.1) drop-shadow(0 8px 20px rgba(255,255,255,0.2)); }
}

.organic-breathe {
  animation: organic-breathe 6s ease-in-out infinite !important;
}

.glassmorphism {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

@keyframes liquid-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes holographic-glare {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.tetrad-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 30px 0;
  perspective: 1000px;
}

.tetrad-card {
  position: relative;
  border-radius: 16px;
  padding: 24px;
  background: rgba(15, 15, 20, 0.4);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  will-change: transform, box-shadow;
}

.tetrad-card::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.03) 55%, transparent 80%);
  background-size: 200% 200%;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 2;
}

.tetrad-card:hover::before {
  opacity: 1;
  animation: holographic-glare 3s linear infinite;
}

.tetrad-card:hover {
  transform: translateY(-8px) rotateX(4deg) rotateY(-4deg);
  animation: organic-breathe 4s ease-in-out infinite;
  z-index: 10;
}

.tetrad-title {
  font-family: var(--serif);
  font-size: 20px;
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tetrad-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* 1. Ontocracia (Red/Gold, Structural) */
.tetrad-ontocracia {
  box-shadow: 0 4px 20px rgba(220, 50, 50, 0.1), inset 0 1px 0 rgba(255, 200, 100, 0.2);
  border-bottom: 3px solid rgba(220, 50, 50, 0.4);
}
.tetrad-ontocracia:hover {
  box-shadow: 0 15px 40px rgba(220, 50, 50, 0.25), 0 0 15px rgba(255, 200, 100, 0.3), inset 0 1px 0 rgba(255, 200, 100, 0.5);
  border-color: rgba(220, 50, 50, 0.8);
}
.tetrad-ontocracia .t-icon { color: #ff5c5c; text-shadow: 0 0 10px rgba(255, 200, 100, 0.4); }

/* 2. Ciberdelia (Indigo/Violet, Deep Glassmorphism) */
.tetrad-ciberdelia {
  background: linear-gradient(135deg, rgba(60, 20, 120, 0.1), rgba(20, 10, 60, 0.4));
  box-shadow: 0 4px 30px rgba(100, 50, 255, 0.1), inset 0 0 20px rgba(150, 80, 255, 0.05);
  backdrop-filter: blur(30px) saturate(200%);
}
.tetrad-ciberdelia:hover {
  background-size: 200% 200%;
  animation: liquid-flow 4s ease infinite;
  box-shadow: 0 15px 45px rgba(100, 50, 255, 0.3), 0 0 25px rgba(180, 100, 255, 0.4), inset 0 0 30px rgba(150, 80, 255, 0.2);
}
.tetrad-ciberdelia .t-icon { color: #b464ff; filter: drop-shadow(0 0 8px #b464ff); }

/* 3. Transhumanismo (Green/Cyan, Bio-tech) */
.tetrad-transhumanismo {
  border-radius: 8px 32px 8px 32px;
  background: radial-gradient(circle at 100% 0%, rgba(0, 255, 180, 0.05), transparent 60%), rgba(10, 25, 20, 0.5);
  box-shadow: 0 4px 20px rgba(0, 200, 150, 0.1);
}
.tetrad-transhumanismo:hover {
  border-radius: 16px 40px 16px 40px;
  box-shadow: 0 15px 35px rgba(0, 255, 180, 0.2), 0 0 20px rgba(0, 200, 255, 0.2);
  border-color: rgba(0, 255, 180, 0.3);
}
.tetrad-transhumanismo .t-icon { color: #00ffb4; text-shadow: 0 0 12px rgba(0, 200, 255, 0.5); }

/* 4. Comunismo (Warm/Earth, Modular) */
.tetrad-comunismo {
  background: repeating-linear-gradient(45deg, rgba(200, 120, 50, 0.02) 0px, rgba(200, 120, 50, 0.02) 10px, transparent 10px, transparent 20px), rgba(30, 20, 15, 0.4);
  box-shadow: 0 4px 15px rgba(200, 120, 50, 0.1);
  border-left: 3px solid rgba(200, 120, 50, 0.4);
}
.tetrad-comunismo:hover {
  box-shadow: 0 10px 30px rgba(220, 140, 60, 0.2), inset 0 0 15px rgba(250, 180, 100, 0.1);
  border-left: 3px solid rgba(220, 140, 60, 0.8);
}
.tetrad-comunismo .t-icon { color: #e68a3c; }