/* ============================================================================
   EMPRESARIOSMEX · CAPA VISUAL WEBGL (landing pública)
   Solo aplica con body.em-webgl. No altera el panel interno.
   ========================================================================== */
body.em-webgl{
  --bg-page:#050b16;
  --bg-page-2:#071426;
  --color-primary:#49d9ff;
  --color-primary-dark:#04121d;
  --color-secondary:#5ee6a8;
  --color-secondary-texto:#04121d;
  --color-success:#5ee6a8;
  --color-boton-fondo:#5ee6a8;
  --color-boton-texto:#04121d;
  --color-titulo:#f4f8ff;
  --color-descripcion:#a9bfd2;
  --color-menu:#eaf6ff;
  --color-subcategoria:#cfe6f7;
  --color-enlace:#8fefff;
  --color-card-fondo:#0b2033;
  --color-card-borde:#1b4a66;
  --color-header-fondo:#071426;
  --color-footer-fondo:#030a12;
  --color-footer-texto:#8fa9bd;
  --shadow-intensidad:0 18px 50px rgba(0,0,0,.35);
  --color-badge-sitio-web:#8fb7ff;
  --color-badge-emprendedor:#5ee6a8;
  --color-badge-basico:#49d9ff;
  --color-badge-inactivo:#ff9d9d;
  --color-badge-activo:#5ee6a8;
  --em-header-bg:#071426;
  background:#050b16 !important;
  color:#f4f8ff;
}
body.em-webgl::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 640px at 76% 30%,rgba(32,130,255,.16),transparent 62%),
    radial-gradient(700px 560px at 88% 78%,rgba(42,230,170,.08),transparent 64%),
    radial-gradient(600px 500px at 10% 10%,rgba(73,217,255,.07),transparent 70%),
    linear-gradient(180deg,#050b16 0%,#06101e 55%,#040913 100%);
}
body.em-webgl::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.20;
  background-image:linear-gradient(rgba(100,180,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(100,180,255,.07) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at 65% 35%,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at 65% 35%,#000 0%,transparent 72%);
}
body.em-webgl > *{position:relative;z-index:1}
body.em-webgl header{
  background:var(--em-header-bg) !important;
  border-bottom:1px solid rgba(73,217,255,.25) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}
body.em-webgl header a,body.em-webgl header span,body.em-webgl header p{color:#eaf6ff}
body.em-webgl header img{filter:drop-shadow(0 0 12px rgba(73,217,255,.25))}
body.em-webgl #inicio{
  background:
    radial-gradient(760px 500px at 82% 40%,rgba(32,130,255,.18),transparent 65%),
    radial-gradient(600px 420px at 12% 85%,rgba(94,230,168,.08),transparent 65%),
    linear-gradient(145deg,#061321 0%,#07182a 50%,#040b16 100%) !important;
  border-bottom:1px solid rgba(120,190,255,.14);
}
body.em-webgl #inicio h1{color:#f4f8ff !important;text-shadow:0 0 45px rgba(73,217,255,.12)}
body.em-webgl #inicio h1 span{color:#9fb2c8 !important}
body.em-webgl #inicio h1 span[style*="color"]{color:#cfe6f7 !important}
body.em-webgl #inicio p{color:#a9bfd2 !important}
body.em-webgl #inicio p strong{color:#8fefff !important}
body.em-webgl #inicio img{
  border:1px solid rgba(73,217,255,.25);
  box-shadow:0 28px 80px rgba(0,0,0,.45),0 0 60px rgba(73,217,255,.10) !important;
}
body.em-webgl #inicio .rounded-full{
  background:rgba(73,217,255,.08) !important;
  border:1px solid rgba(73,217,255,.25) !important;
  color:#8fefff !important;
}
body.em-webgl a[href="#registro"].rounded-full{
  background:linear-gradient(135deg,#5ee6a8,#49d9ff) !important;
  color:#04121d !important;
  box-shadow:0 10px 30px rgba(94,230,168,.22);
}
body.em-webgl .search-bar{
  background:rgba(7,25,44,.88) !important;
  border:1px solid rgba(73,217,255,.25) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.35) !important;
  border-radius:18px !important;
  backdrop-filter:blur(14px);
}
body.em-webgl .search-bar input,
body.em-webgl .search-bar select{
  background:rgba(3,12,22,.72) !important;
  color:#eaf6ff !important;
  border:1px solid rgba(120,190,255,.20) !important;
  border-radius:10px !important;
}
body.em-webgl .search-bar input::placeholder{color:#71889c !important}
body.em-webgl .search-bar .green-btn,
body.em-webgl .search-bar .blue-btn{
  background:linear-gradient(135deg,#5ee6a8,#49d9ff) !important;
  color:#04121d !important;
  border:0 !important;
  border-radius:10px !important;
  font-weight:800 !important;
}
body.em-webgl #map{border:1px solid rgba(73,217,255,.18);border-radius:20px;overflow:hidden;filter:saturate(.8) contrast(1.05)}
body.em-webgl .rounded-2xl,
body.em-webgl .rounded-3xl{
  border-color:rgba(120,190,255,.16) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.18) !important;
}
body.em-webgl .rounded-2xl:hover,
body.em-webgl .rounded-3xl:hover{
  border-color:rgba(94,230,168,.35) !important;
}
body.em-webgl .promo-card{
  border:1px solid rgba(73,217,255,.21) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.32) !important;
  border-radius:18px !important;
  overflow:hidden;
}
body.em-webgl .promo-card:hover{box-shadow:0 24px 65px rgba(73,217,255,.12) !important}
body.em-webgl footer{
  background:#030a12 !important;
  color:#8fa9bd !important;
  border-top:1px solid rgba(120,190,255,.12);
}
body.em-webgl footer a{color:#8fefff !important}
body.em-webgl ::selection{background:rgba(94,230,168,.28);color:#fff}
body.em-webgl .faq-item{border-color:rgba(120,190,255,.18) !important}
body.em-webgl .faq-question{color:#eaf6ff !important}
body.em-webgl .faq-answer{color:#a9bfd2 !important}
@media(max-width:768px){
  body.em-webgl #inicio{padding-top:2.4rem;padding-bottom:2.4rem}
  body.em-webgl .search-bar{border-radius:16px !important}
}
/* Partículas del hero */
body.em-webgl #inicio{position:relative;isolation:isolate}
body.em-webgl #inicio > .max-w-7xl{position:relative;z-index:2}
body.em-webgl .em-webgl-particulas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.8}
body.em-webgl .em-webgl-particulas + .max-w-7xl{position:relative;z-index:2}
/* Escena 3D del hero */
.em-hero-col{min-width:0;flex:1.18 1 0%!important}
.em-hero-escena{position:relative;width:100%;height:clamp(580px,44vw,720px);min-height:580px;overflow:hidden;border:0;border-radius:0;background:transparent;isolation:isolate}
body.em-webgl #inicio .max-w-7xl{max-width:1540px}
#emHeroLienzo{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;cursor:grab;touch-action:none;filter:contrast(1.08) saturate(1.05)}
.em-hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:0!important;box-shadow:none!important;display:block}
.em-hero-sin-imagen{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#8fa9bd;background:rgba(8,28,48,.7)}
.em-hero-sin-imagen i{font-size:38px;color:#49d9ff}
.em-hero-sin-imagen p{margin:0;font-size:12px}
.em-hero-3d .em-hero-fallback{display:none}
.em-hero-pista{position:static;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;padding:7px 11px;border-radius:999px;border:1px solid rgba(120,190,255,.18);background:rgba(3,12,22,.42);color:#a9c0d2;font-size:10px;white-space:nowrap;pointer-events:none}
.em-hero-pista i{color:#49d9ff}
@media(max-width:640px){.em-hero-escena{height:420px;min-height:420px;border-radius:0}.em-hero-pista{font-size:9px;white-space:normal;text-align:center}}
/* Simulaciones del demo dentro de la landing */
#emSimOverlay[hidden]{display:none!important}
#emSimOverlay{position:fixed;inset:0;z-index:300;background:rgba(2,8,16,.94);backdrop-filter:blur(12px);opacity:0;transition:opacity .45s ease;display:flex;align-items:stretch;justify-content:center}
#emSimOverlay.activo{opacity:1}
.em-sim-panel{position:relative;width:100%;height:100%;background:#050b16;overflow:hidden;transform:scale(.985);transform-origin:center;clip-path:inset(var(--sim-top,30vh) var(--sim-right,30vw) var(--sim-bottom,30vh) var(--sim-left,30vw) round 18px);transition:clip-path .82s cubic-bezier(.16,.84,.24,1),transform .7s cubic-bezier(.16,.84,.24,1)}
#emSimOverlay.activo .em-sim-panel{transform:scale(1);clip-path:inset(0 0 0 0 round 0)}
.em-sim-panel iframe{opacity:0;transition:opacity .35s ease .18s}
#emSimOverlay.activo .em-sim-panel iframe{opacity:1}
.em-sim-panel iframe{width:100%;height:100%;border:0;display:block;background:#050b16}
.em-sim-cerrar{position:fixed;right:22px;top:18px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(120,190,255,.3);background:rgba(4,16,28,.82);color:#eaf6ff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px)}
.em-sim-cerrar:hover{border-color:rgba(94,230,168,.65);color:#fff}
.em-sim-cargando{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:#050b16;color:#8fa9bd;font-size:12px;gap:9px;transition:opacity .25s;pointer-events:none}
.em-sim-cargando.oculto{opacity:0}
.em-sim-cargando i{color:#49d9ff;font-size:20px;animation:emSpin 1s linear infinite}
@keyframes emSpin{to{transform:rotate(360deg)}}
body.em-sim-abierta{overflow:hidden!important}
@media(max-width:1360px){
  body.em-webgl .em-hero-col{flex:1 1 100%!important;width:100%!important;margin-top:24px}
  body.em-webgl .em-hero-escena{height:560px;min-height:560px}
}
/* GPU status */
.em-gpu-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(120,200,255,.28);background:rgba(73,217,255,.07);color:#dff4ff;border-radius:999px;padding:8px 11px;font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.em-gpu-btn:hover{border-color:rgba(94,230,168,.55);background:rgba(94,230,168,.1)}
.em-gpu-btn i{color:#49d9ff}
.em-gpu-hud{position:fixed;left:18px;bottom:18px;z-index:120;min-width:225px;border:1px solid rgba(94,230,168,.28);border-radius:14px;background:rgba(3,14,25,.92);backdrop-filter:blur(14px);padding:11px 13px;color:#dff4ff;font:11px/1.4 Inter,system-ui,sans-serif;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.em-gpu-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#bffde1}
.em-gpu-head strong{font-weight:800}.em-gpu-head #emGpuWebgl{margin-left:auto;color:#7f9bb1;font-size:9px}
.em-gpu-dot{width:6px;height:6px;border-radius:50%;background:#5ee6a8;box-shadow:0 0 0 4px rgba(94,230,168,.12)}
.em-gpu-grid{display:grid;grid-template-columns:70px minmax(0,1fr);gap:3px 8px;font-size:10px;color:#8fa9bd}
.em-gpu-grid b{color:#eaf6ff;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-gpu-hud small{display:block;margin-top:8px;color:#6f8aa2;font-size:9px}
@media(max-width:640px){.em-gpu-hud{left:10px;bottom:10px;min-width:190px;padding:9px 10px}.em-gpu-btn{padding:8px}.em-gpu-btn span{display:none!important}}
/* Árbol de categorías WebGPU */
.arbol-webgpu{position:relative;margin-top:8px}
.arbol-raiz{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:11px;width:max-content;max-width:100%;margin:0 auto 30px;padding:12px 18px;border:1px solid rgba(73,217,255,.3);border-radius:16px;background:rgba(6,24,40,.92);box-shadow:0 0 40px rgba(73,217,255,.1)}
.arbol-raiz:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:30px;background:linear-gradient(rgba(73,217,255,.55),transparent)}
.arbol-raiz-icono{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(73,217,255,.12);color:#49d9ff}
.arbol-raiz strong{display:block;color:#f4f8ff;font-size:13px}.arbol-raiz small{display:block;color:#7f9bb1;font-size:10px;margin-top:2px}
.arbol-ramas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rama{position:relative;border:1px solid rgba(120,190,255,.15);border-radius:15px;background:linear-gradient(160deg,rgba(8,28,48,.72),rgba(5,16,30,.76));overflow:hidden}
.rama:before{content:"";position:absolute;left:22px;top:0;width:1px;height:14px;background:linear-gradient(transparent,rgba(73,217,255,.5))}
.rama-cabeza{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer;color:#eaf6ff;font:inherit;text-align:left}
.rama-cabeza:hover{background:rgba(73,217,255,.05)}
.rama-icono{width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--rc,#49d9ff) 14%,transparent);color:var(--rc,#49d9ff);font-size:12px}
.rama-titulo{display:flex;flex-direction:column;min-width:0;flex:1}.rama-titulo strong{font-size:12px;line-height:1.25;color:#f4f8ff}.rama-titulo small{font-size:9px;color:#7f9bb1;margin-top:2px}
.rama-flecha{color:#6f8aa2;font-size:10px;transition:transform .2s}
.rama.abierta .rama-flecha{transform:rotate(180deg)}
.rama-hojas{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 12px}
.rama-hoja{all:unset;display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;border:1px solid rgba(120,190,255,.12);background:rgba(3,14,26,.55);color:#cfe6f7;font:inherit;font-size:10px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s}
.rama-hoja:hover{border-color:rgba(94,230,168,.45);background:rgba(15,55,70,.7);color:#fff}
.rama-hoja .punto{width:5px;height:5px;border-radius:50%;background:var(--cc,#49d9ff);flex:0 0 5px}
.arbol-total{display:block;text-align:center;margin-top:14px;font-size:10px;color:#6f8aa2}
@media(max-width:1000px){.arbol-ramas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .arbol-ramas{grid-template-columns:1fr;gap:8px}
  .arbol-raiz{margin-bottom:22px}.arbol-raiz:after{height:22px}
  .rama-hojas{display:none;padding-bottom:0}
  .rama.abierta .rama-hojas{display:flex;padding-bottom:12px}
  .arbol-ramas:before{content:"";position:absolute;left:22px;top:-22px;bottom:0;width:1px;background:linear-gradient(rgba(73,217,255,.3),transparent 85%)}
}.rama-hoja .hoja-icono{width:15px;height:15px;object-fit:contain;display:block;flex:0 0 15px}

/* Árbol 3D de categorías */
.arbol-3d{position:relative;width:100%;height:clamp(520px,55vw,700px);min-height:520px;margin:0 auto 20px;isolation:isolate}
#emTreeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.arbol-3d-hint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:2;padding:7px 11px;border-radius:999px;border:1px solid rgba(120,190,255,.18);background:rgba(3,12,22,.72);backdrop-filter:blur(10px);color:#a9c0d2;font-size:10px;white-space:nowrap;pointer-events:none}
.arbol-3d-hint i{color:#49d9ff}
.arbol-tooltip{position:absolute;z-index:4;pointer-events:none;padding:7px 10px;border:1px solid rgba(94,230,168,.4);border-radius:9px;background:rgba(3,16,28,.95);color:#eaf6ff;font-size:11px;line-height:1.35;box-shadow:0 10px 28px rgba(0,0,0,.3);max-width:220px}
.arbol-tooltip small{display:block;color:#7f9bb1;font-size:9px;margin-top:2px}
.arbol-lista{margin-top:18px;border-top:1px solid rgba(120,190,255,.12);padding-top:14px}
.arbol-lista summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;color:#8fa9bd;font-size:11px;font-weight:650}
.arbol-lista summary::-webkit-details-marker{display:none}
.arbol-lista summary i{color:#49d9ff}
.arbol-lista[open] summary{color:#eaf6ff;margin-bottom:16px}
@media(max-width:700px){.arbol-3d{display:none}}