/* ============================================================
   SKIN — ELGRANDATERO ✅ (SOLO TEMA)
   - Variables, colores, glass, botones, aspecto.
   - NO estructura (layout_publico.css manda en estructura)
============================================================ */

:root{
  /* Colores base */
  --eg-bg: #f6fbff;
  --eg-surface: rgba(255,255,255,.88);
  --eg-border: rgba(2,6,23,.10);
  --eg-text: rgba(2,6,23,.92);
  --eg-muted: rgba(2,6,23,.62);

  /* Acentos */
  --eg-blue: #0b5cff;
  --eg-cyan: #00eaff;
  --eg-yellow: #ffb703;
  --eg-pink: #ff4bd8;

  /* Estética */
  --eg-radius: 16px;
  --eg-shadow: 0 18px 45px rgba(2,6,23,.12);
  --eg-glow: 0 0 0 1px rgba(0,234,255,.22), 0 14px 34px rgba(0,234,255,.12);
  --eg-fast: .14s;
}

/* Fondo y texto general (tema) */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(0,234,255,.18), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(255,183,3,.22), transparent 44%),
    radial-gradient(circle at 72% 86%, rgba(255,75,216,.14), transparent 44%),
    linear-gradient(180deg, #ffffff, var(--eg-bg));
  color: var(--eg-text);
}

/* Header (tema) */
.main-header{
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(240,250,255,.92));
  border-bottom: 1px solid var(--eg-border);
  box-shadow: var(--eg-shadow);
}

.menu-toggle{
  border:1px solid rgba(11,92,255,.20);
  background: linear-gradient(180deg, rgba(11,92,255,.12), rgba(255,255,255,.92));
  border-radius: 14px;
  font-weight: 900;
}

/* Links del header nav */
#main-nav a{
  font-weight: 800;
  color: rgba(2,6,23,.86);
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.70);
}
#main-nav a:hover{
  border-color: rgba(0,234,255,.35);
  box-shadow: var(--eg-glow);
}

/* Sponsor top (tema) */
.sponsor-top-link{
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--eg-shadow);
}
.sponsor-top-cta{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: var(--eg-glow);
  backdrop-filter: blur(8px);
  position: static !important; /* evita restos viejos */
}

/* Menú PRO (tema, no estructura) */
.eg-dynmenu{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* El contenedor hace de “card”, el UL no */
.eg-menu.eg-root{
  background: transparent;
  border: none;
  box-shadow: none;
}

.eg-link{
  font-weight: 800;
  color: rgba(2,6,23,.88);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform var(--eg-fast), box-shadow var(--eg-fast);
}
.eg-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.eg-subtoggle{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: rgba(2,6,23,.88);
}

.eg-submenu{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  border-radius: 14px;
}