/* ═══════════════════════════════════════════════════════════════════
   PARTE A · SHELL + HERO — "AULLIDO VIOLETA"
   Estética inspirada en la "V" de neón de Vegetta777: negro puro,
   violeta neón dominante, glow refinado, cristal, micro-interacciones.
   Carga después de styles.css + theme.css → esta hoja manda.
   Reestila SOLO clases existentes. No toca otros archivos.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Emblema del lobo (reusado en topbar / hero / footer) ── */
.wolf-sm{
  width:34px;height:34px;display:block;
  filter:drop-shadow(0 0 7px var(--glow)) drop-shadow(0 0 2px var(--violet-br));
}

/* ── Logo real (imagen mitad lobo / mitad charizard) ── */
.brand-logo{
  width:44px;height:44px;object-fit:contain;display:block;border-radius:10px;
  filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 3px rgba(255,122,26,.35));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s;
}
.brand:hover .brand-logo{transform:scale(1.06) translateY(-1px);
  filter:drop-shadow(0 0 14px var(--glow-hot)) drop-shadow(0 0 6px rgba(255,122,26,.5))}

/* logo completo en el hero (con texto LOBOS × DIOSESMON) */
.hero-logo{
  display:block;width:min(440px,82vw);height:auto;margin:0 auto 6px;position:relative;z-index:1;
  filter:drop-shadow(0 10px 40px var(--glow)) drop-shadow(0 0 18px rgba(255,122,26,.22));
  animation:crestIn 1s cubic-bezier(.2,.8,.2,1) both;
}

/* ══════════════════════════ TOPBAR ══════════════════════════ */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:12px 26px;
  background:linear-gradient(180deg,rgba(7,4,14,.86),rgba(5,3,8,.66));
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-bottom:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(168,85,247,.16),
    0 14px 44px -22px rgba(0,0,0,.95),
    0 0 60px -30px var(--glow-hot);
}
/* filo de neón inferior sutil */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--violet) 30%,var(--neon) 50%,var(--violet) 70%,transparent);
  opacity:.5;
}

/* ── Marca / logo ── */
.brand{display:flex;align-items:center;gap:14px;position:relative}

.brand-mark{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%,rgba(176,38,255,.42),rgba(6,3,12,.94) 72%);
  position:relative;
  box-shadow:
    0 0 18px -2px var(--glow),
    inset 0 0 14px -4px rgba(176,38,255,.5);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
/* anillo de neón violeta (antes oro) */
.brand-mark::before{
  content:"";position:absolute;inset:0;border-radius:50%;padding:1.6px;
  background:conic-gradient(from 210deg,var(--violet-lo),var(--violet-br),var(--neon),var(--amethyst),var(--violet-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 6px var(--glow));
  animation:brandSpin 9s linear infinite;
}
/* halo palpitante exterior */
.brand-mark::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow-soft),transparent 70%);
  opacity:.7;animation:pulse 4.5s ease-in-out infinite;
}
.brand:hover .brand-mark{transform:translateY(-1px) scale(1.04);box-shadow:0 0 26px -2px var(--glow-hot),inset 0 0 16px -3px rgba(176,38,255,.6)}
@keyframes brandSpin{to{transform:rotate(360deg)}}

.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{
  font-family:var(--font-deco);font-size:19px;font-weight:800;letter-spacing:3.5px;
  background:linear-gradient(180deg,#fff 0%,var(--amethyst) 55%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px var(--glow-soft));
}
.brand-txt i{
  font-family:var(--font-num);font-size:10px;font-style:normal;font-weight:700;letter-spacing:3.5px;
  color:var(--violet-br);text-shadow:0 0 8px var(--glow-soft);
}

/* ── Nav ── */
.tabs{display:flex;gap:2px;margin-left:auto}
.tabs a{
  position:relative;padding:9px 16px;font-family:var(--font-display);font-size:13.5px;font-weight:600;
  letter-spacing:1.3px;color:var(--muted);transition:color .18s,text-shadow .18s;text-transform:uppercase;
}
.tabs a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--violet-lo),var(--violet-br),var(--neon));
  box-shadow:0 0 10px var(--glow),0 0 3px var(--violet-br);
  transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
.tabs a:hover{color:var(--white);text-shadow:0 0 10px var(--glow-soft)}
.tabs a:hover::after{transform:scaleX(1)}
.tabs a.active{color:var(--white);text-shadow:0 0 12px var(--glow)}
.tabs a.active::after{transform:scaleX(1)}

.menu-btn{
  display:none;margin-left:auto;background:var(--glass);border:1px solid var(--line2);
  color:var(--violet-br);font-size:20px;width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;
  box-shadow:inset 0 0 12px -6px var(--glow);transition:.16s;
}
.menu-btn:hover{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 0 16px -4px var(--glow),inset 0 0 12px -6px var(--glow)}

main{max-width:1260px;margin:0 auto;padding:30px 24px 70px;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══════════════════════════ LOADER ══════════════════════════ */
.loader{
  display:flex;align-items:center;justify-content:center;gap:14px;padding:100px;
  color:var(--amethyst);font-family:var(--font-display);font-size:18px;letter-spacing:1px;
  text-shadow:0 0 12px var(--glow-soft);
}
.spinner{
  width:24px;height:24px;border:3px solid rgba(124,58,237,.25);border-top-color:var(--violet-br);
  border-radius:50%;animation:spin .8s linear infinite;
  box-shadow:0 0 14px -2px var(--glow),inset 0 0 8px -4px var(--glow);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════ FOOTER ══════════════════════════ */
.foot{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:44px 20px;color:var(--dim);font-size:13px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(124,58,237,.07));position:relative;
}
.foot::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:min(420px,60vw);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--violet) 50%,transparent);
  box-shadow:0 0 12px var(--glow);opacity:.6;
}
.foot-crest{
  width:42px;height:42px;opacity:.9;
  filter:drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 3px var(--violet-br));
}
.foot b{color:var(--amethyst);text-shadow:0 0 8px var(--glow-soft)}
.foot small{color:var(--violet-br);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.85}

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hero{position:relative;text-align:center;padding:44px 20px 50px;margin-bottom:16px;overflow:hidden}
/* resplandor violeta de fondo tras el título */
.hero::before{
  content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:min(720px,92vw);height:360px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,var(--glow-soft),transparent 70%);
  opacity:.9;
}

/* emblema del lobo en anillo/halo de neón violeta palpitante */
.hero-crest{
  position:relative;width:158px;height:158px;margin:0 auto 22px;display:grid;place-items:center;z-index:1;
  animation:crestIn 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes crestIn{from{opacity:0;transform:scale(.72) rotate(-8deg)}to{opacity:1;transform:none}}

.hero-crest svg.wolf-lg{
  width:98px;height:98px;position:relative;z-index:3;
  filter:drop-shadow(0 4px 20px var(--glow)) drop-shadow(0 0 6px var(--violet-br));
}
/* halo palpitante */
.hero-crest .halo{
  position:absolute;inset:-22px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--glow),transparent 66%);
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* anillo de neón conic girando */
.hero-crest .ring{
  position:absolute;inset:0;border-radius:50%;padding:2.4px;z-index:1;
  background:conic-gradient(from 0deg,var(--violet-lo),var(--violet-br),var(--neon),var(--amethyst),var(--violet-br),var(--violet-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 10px var(--glow));
  animation:ringSpin 12s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
/* anillo interior fino */
.hero-crest .ring2{
  position:absolute;inset:13px;border-radius:50%;z-index:2;
  border:1px solid rgba(199,125,255,.4);
  box-shadow:inset 0 0 18px -6px var(--glow),0 0 10px -4px var(--glow-soft);
}
/* "luna" convertida en punto de neón */
.hero-crest .moon{
  position:absolute;top:-2px;right:16px;width:20px;height:20px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 40% 35%,#fff,var(--violet-br) 55%,var(--violet-lo));
  box-shadow:0 0 14px var(--glow-hot),0 0 4px var(--violet-br);opacity:.95;
}

/* título estilo "V" de Vegetta: Orbitron + glow neón multicapa */
.hero h1{
  position:relative;z-index:1;
  font-family:var(--font-deco);font-weight:900;font-size:clamp(36px,6.4vw,72px);line-height:1;letter-spacing:2.5px;
  color:var(--white);
  background:linear-gradient(180deg,#fff 0%,var(--amethyst) 46%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:
    0 0 8px var(--glow-soft),
    0 0 22px var(--glow),
    0 0 46px var(--glow-hot),
    0 0 80px rgba(176,38,255,.35);
  animation:rise .7s .1s ease both;
}
/* la "×" como acento neón encendido */
.hero h1 .x{
  -webkit-text-fill-color:var(--violet-br);color:var(--violet-br);
  background:none;font-family:var(--font-deco);
  text-shadow:0 0 10px var(--violet-br),0 0 26px var(--glow-hot),0 0 50px var(--neon);
  padding:0 .12em;
}

.hero .tagline{
  position:relative;z-index:1;
  margin:16px auto 0;max-width:580px;color:var(--muted);font-family:var(--font-body);
  font-size:15px;letter-spacing:.3px;animation:rise .7s .2s ease both;
}

/* ornamento: líneas de neón + rombo palpitante */
.hero .ornament{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:16px;margin:22px auto 0;
  animation:rise .7s .3s ease both;
}
.hero .ornament .ln{
  height:1px;width:min(130px,22vw);
  background:linear-gradient(90deg,transparent,var(--violet-br));
  box-shadow:0 0 8px var(--glow-soft);
}
.hero .ornament .ln.r{background:linear-gradient(270deg,transparent,var(--violet-br))}
.hero .ornament .dot{
  width:7px;height:7px;transform:rotate(45deg);
  background:var(--violet-br);
  box-shadow:0 0 12px var(--violet-br),0 0 24px var(--glow-hot);
  animation:pulse 3s ease-in-out infinite;
}

/* stats del hero */
.hero-stats{
  position:relative;z-index:1;
  display:flex;justify-content:center;gap:38px;margin-top:30px;flex-wrap:wrap;
  animation:rise .7s .4s ease both;
}
.hero-stats div{text-align:center}
.hero-stats .n{
  font-family:var(--font-num);font-size:32px;font-weight:700;color:var(--white);line-height:1;
  text-shadow:0 0 14px var(--glow),0 0 3px var(--violet-br);font-variant-numeric:tabular-nums;
}
.hero-stats .l{
  font-family:var(--font-display);font-size:10px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--violet-br);margin-top:5px;opacity:.9;
}

/* ══════════════════════ CABECERA DE PÁGINA ══════════════════════ */
.page-head{margin-bottom:24px}
.page-head h1{
  font-family:var(--font-display);font-size:clamp(26px,4vw,38px);letter-spacing:1.5px;
  display:flex;align-items:center;gap:13px;text-transform:uppercase;color:var(--white);
  text-shadow:0 0 16px var(--glow-soft);
}
.page-head h1::before{
  content:"";width:5px;height:1em;border-radius:2px;
  background:linear-gradient(180deg,var(--amethyst),var(--violet),var(--violet-lo));
  box-shadow:0 0 14px var(--glow),0 0 4px var(--violet-br);
}
.page-head p{color:var(--muted);margin-top:6px;font-size:14px;padding-left:18px}

.accent{
  background:linear-gradient(120deg,#fff,var(--amethyst));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px var(--glow-soft));
}
/* .gold ahora es lavanda neón (oro casi eliminado) */
.gold{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px var(--glow-soft));
}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media(max-width:860px){
  .topbar{gap:14px;padding:11px 18px}
  .tabs{
    display:none;position:absolute;top:100%;right:0;left:0;flex-direction:column;
    background:linear-gradient(180deg,rgba(10,7,20,.98),rgba(5,3,8,.98));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line2);padding:8px;
    box-shadow:0 20px 50px -20px rgba(0,0,0,.9),0 0 40px -20px var(--glow-hot);
  }
  .tabs.open{display:flex;animation:rise .25s ease both}
  .tabs a{padding:13px 16px;letter-spacing:1.6px}
  .tabs a::after{
    left:16px;right:auto;width:0;bottom:9px;transition:width .22s;
  }
  .tabs a.active::after,.tabs a:hover::after{transform:none;width:22px}
  .menu-btn{display:block}
  .hero-crest{width:138px;height:138px}
  .hero-crest svg.wolf-lg{width:84px;height:84px}
  .hero-stats{gap:24px}
}

/* ══════════════════════ REDUCED MOTION ══════════════════════ */
@media(prefers-reduced-motion:reduce){
  .brand-mark::before,.brand-mark::after,.hero-crest .ring,.hero-crest .halo,
  .hero-crest .dot,.hero .ornament .dot,.spinner{animation:none!important}
  *{transition:none!important}
}