/* ============================================================
   Alien Prediction — estilos compartidos del sitio
   Paleta y tipografías según el Manual de Marca v1.0.
   (tema, navegación y footer usados por todas las páginas públicas)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  /* Paleta de Aliens Levels: verde alien del logo sobre negro-verdoso. Los colores salen de
     brand.js (fuente única de marca) con respaldo aquí por si el cargador aún no corrió. */
  --bg: var(--brand-bg, #0A0E0A);          /* negro verdoso — fondo primario (fondo del logo) */
  --bg2:#0F1A0F;                            /* verde muy oscuro — secciones alternas */
  --card: var(--brand-card, #111a12);      /* card */
  --line:#22371f;                          /* borde verdoso sutil sobre fondo oscuro */
  --fg: var(--brand-fg, #e8f5e6);          /* texto principal (blanco con tinte verde) */
  --muted:#8FA98A;                         /* texto secundario — verde grisáceo */
  --accent: var(--brand, #4CE01C);         /* verde alien — CTAs, títulos, acentos */
  --accent2: var(--brand-accent, #86F55A); /* verde claro — highlights puntuales */
  --radius:14px; --max:1080px;
  /* Uso funcional (solo paneles internos de operación: admin/dashboard/panel) */
  --ok:#22c55e; --danger:#ef4444;
  --font-head:'Barlow Condensed', sans-serif;
  --font-body:'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:'Roboto Mono', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

h1,h2,h3,.brand,.section-title,.hero h1{font-family:var(--font-head);font-weight:800;letter-spacing:.2px}
.mono,.price .amount,.stat .n{font-family:var(--font-mono)}

/* Botones — un solo tono (azul eléctrico); el cian queda para acentos puntuales, no para CTAs */
.btn{display:inline-block;padding:13px 24px;border-radius:10px;background:var(--accent);color:#08140b;font-weight:700;border:0;cursor:pointer;font-size:15px;transition:transform .12s ease,opacity .12s ease;text-align:center;font-family:var(--font-body)}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.sm{padding:10px 18px;font-size:14px}
.btn.block{display:block;width:100%}

/* Navegación */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav .inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.site-nav .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
/* El logo es un banner ancho con fondo de espacio casi negro. funde ese
   fondo con la barra oscura (el negro se vuelve transparente) y deja solo el emblema verde. Se
   preserva la proporción (width:auto) y se quita la caja/box. */
.site-nav .brand img{height:44px;width:auto;border-radius:0;background:transparent;filter:drop-shadow(0 0 6px rgba(76,224,28,.45))}
/* El logo ya incluye el nombre "ALIENS LEVELS", así que el texto de al lado sobra en la barra. */
.site-nav .brand span[data-brand]{display:none}
.site-nav .links{display:flex;align-items:center;gap:26px}
.site-nav .links a{color:var(--muted);font-size:15px;transition:color .12s;font-family:var(--font-body)}
.site-nav .links a:hover{color:var(--fg)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);text-align:center;margin-top:40px}
.site-footer .brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;margin-bottom:8px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.4px}
.site-footer .brand img{height:38px;width:auto;border-radius:0;filter:drop-shadow(0 0 5px rgba(76,224,28,.4))}
.site-footer .small{font-size:13px;opacity:.85;font-family:var(--font-body)}
.site-footer .disclaimer{font-style:italic;font-size:11px;opacity:.6;max-width:640px;margin:14px auto 0;line-height:1.5;font-family:var(--font-body)}

@media (max-width:760px){
  .site-nav .links{display:none}
}

/* ── Mapa mental de la red de afiliados ──────────────────────────────────────
   Árbol de arriba hacia abajo con hermanos en horizontal. Los niveles pueden
   ser MUY anchos (muchas personas en el mismo nivel): por eso el contenedor
   hace scroll horizontal en vez de comprimir o romper el layout. */
.mm-scroll { overflow-x: auto; padding: 10px 0 18px; }
.mm { display: inline-block; min-width: 100%; }
.mm ul { display: flex; justify-content: center; position: relative; padding: 26px 0 0; margin: 0; list-style: none; }
.mm li { position: relative; padding: 26px 12px 0; text-align: center; }

/* Conectores: mitad izquierda y derecha del "puente" horizontal sobre cada hijo */
.mm li::before, .mm li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  width: 50%; height: 26px; border-top: 2px solid var(--line);
}
.mm li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.mm li:only-child::before, .mm li:only-child::after { display: none; }
.mm li:only-child { padding-top: 26px; }
.mm li:first-child::before, .mm li:last-child::after { border: 0 none; }
.mm li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.mm li:first-child::after { border-radius: 6px 0 0 0; }
/* Bajada vertical desde el padre hacia su fila de hijos */
.mm ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 0; height: 26px; border-left: 2px solid var(--line);
}

/* Nodos */
.mm-node {
  display: inline-block; padding: 9px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; white-space: nowrap; text-align: left;
}
.mm-node .who { font-weight: 600; }
.mm-node .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mm-node.me { border-color: var(--accent); box-shadow: 0 0 22px rgba(76,224,28,.28); background: rgba(76,224,28,.12); }
.mm-node.root { border-color: var(--accent2); background: rgba(134,245,90,.12); font-weight: 700; }
.mm-node.up { border-style: dashed; opacity: .85; }
.mm-node.n1 { border-left: 3px solid var(--accent); }
.mm-node.n2 { border-left: 3px solid var(--accent2); }
.mm-node.n3 { border-left: 3px solid var(--muted); }
.mm-node.inactive { opacity: .55; }

/* Leyenda de niveles */
.mm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.mm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mm-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }