@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap);
html, body, #root {
  background: #080808;
  min-height: 100vh;
}


.update-banner {
  position: fixed;
  bottom: 24px; 
  right: 24px;
  width: 420px;
  max-width: calc(100vw - 48px);
  
  
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.98), rgba(5, 5, 5, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  
  padding: 20px 24px;
  
  -webkit-backdrop-filter: blur(12px);
  
          backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(212, 175, 55, 0.1) inset;
  
  display: flex;
  align-items: center;
  gap: 16px;
  
  z-index: 99999;
  
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.update-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.update-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: #d4af37;
  
  animation: rotate 2.5s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.update-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.update-text strong {
  font-size: 15px;
  font-weight: 700;
  

  background: linear-gradient(135deg, #d4af37, #f4e5b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  margin: 0;
  line-height: 1.3;
}

.update-text small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.update-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.update-btn-primary {
  padding: 10px 20px;
  
  background: linear-gradient(135deg, #d4af37, #f4e5b8);
  border: none;
  border-radius: 10px;
  
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 700;
  
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  
  white-space: nowrap;
}

.update-btn-primary:hover {
  background: linear-gradient(135deg, #f4e5b8, #d4af37);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
}

.update-btn-primary:active {
  transform: translateY(0);
}

.update-btn-dismiss {
  width: 36px;
  height: 36px;
  
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
  color: rgba(255, 255, 255, 0.6);
  
  cursor: pointer;
  transition: all 0.3s ease;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-btn-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  color: #f8f9fa;
  transform: rotate(90deg);
}

.update-banner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), transparent, rgba(212, 175, 55, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.5; }
}



@media (max-width: 768px) {
  .update-banner {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    padding: 16px 20px;
  }

  .update-content {
    gap: 12px;
  }

  .update-icon {
    width: 40px;
    height: 40px;
  }

  .update-text strong {
    font-size: 14px;
  }

  .update-text small {
    font-size: 11px;
  }

  .update-btn-primary {
    padding: 8px 16px;
    font-size: 12px;
  }

  .update-btn-dismiss {
    width: 32px;
    height: 32px;
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
  .update-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .update-actions {
    width: 100%;
    justify-content: space-between;
  }

  .update-btn-primary {
    flex: 1 1;
  }
}

.sp-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #080808;           
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;


  --op: 0;
  --ty: 20px;
  opacity: var(--op);
  transition: opacity .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}


.sp-init  { --op: 0; }
.sp-enter { --op: 0; }   
.sp-hold  { --op: 1; pointer-events: auto; }
.sp-exit  { --op: 0; pointer-events: none; }

/* ─── Fondo grilla ─── */
.sp-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(217,28,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,28,42,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

/* Glow central */
.sp-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 48%,
    rgba(217,28,42,.18) 0%, transparent 62%);
  animation: glowBreath 2.8s ease-in-out infinite;
}
@keyframes glowBreath { 0%,100%{opacity:.7} 50%{opacity:1} }

/* Viñeta */
.sp-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 40%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}

/* ─── Bandera peruana — franjas laterales ─── */
.sp-flag-l,
.sp-flag-r {
  position: absolute; top: 0; bottom: 0;
  width: clamp(36px, 5vw, 60px);
}
.sp-flag-l {
  left: 0;
  background: linear-gradient(to right, #D91C2A 0%, rgba(217,28,42,.4) 60%, transparent 100%);
  opacity: .35;
}
.sp-flag-r {
  right: 0;
  background: linear-gradient(to left, #D91C2A 0%, rgba(217,28,42,.4) 60%, transparent 100%);
  opacity: .35;
}

/* ─── Partículas flotantes ─── */
.sp-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #D91C2A;
  opacity: 0;
  animation: particleFloat
    calc(4s + var(--pi) * .4s)
    calc(var(--pi) * .25s)
    ease-in-out infinite;
  left:  calc(8% + var(--pi) * 7.5%);
  bottom: 0;
}
@keyframes particleFloat {
  0%   { opacity: 0;   transform: translateY(0)    scale(1);   }
  15%  { opacity: .6; }
  80%  { opacity: .2;  transform: translateY(-70vh) scale(.4); }
  100% { opacity: 0;   transform: translateY(-75vh) scale(0);  }
}

/* ─── Cuerpo central ─── */
.sp-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  text-align: center; padding: 0 24px;
}

/* ─── Logo ─── */
.sp-logo-outer {
  position: relative;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.sp-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(217,28,42,.3);
  animation: ringPulse 2.8s ease-in-out infinite;
}
.sp-r1 { width: 140px; height: 140px; animation-delay: 0s;    }
.sp-r2 { width: 108px; height: 108px; animation-delay: .35s;  }
.sp-r3 { width:  76px; height:  76px; animation-delay: .7s;   }
@keyframes ringPulse {
  0%,100% { transform: scale(1);    opacity: .3; }
  50%      { transform: scale(1.08); opacity: .7; }
}
.sp-logo-box {
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(217,28,42,.1);
  border: 1px solid rgba(217,28,42,.35);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; overflow: hidden;
}
.sp-logo-shine {
  position: absolute; top: -50%; left: -50%;
  width: 40px; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(25deg);
  animation: shine 3s 1.2s ease-in-out infinite;
}
@keyframes shine { 0%,100%{left:-80px} 50%{left:110px} }
.sp-logo-box img { width: 42px; height: 42px; object-fit: contain; }

/* ─── Título ─── */
.sp-title-block { margin-bottom: 32px; }
.sp-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,112,128,.8);
  background: rgba(217,28,42,.1);
  border: 1px solid rgba(217,28,42,.2);
  display: inline-block; padding: 5px 14px; border-radius: 100px;
  margin-bottom: 16px;
  animation: fadeUp .5s .1s ease both;
}
.sp-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(62px, 13vw, 128px);
  line-height: .86; letter-spacing: .03em;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  margin-bottom: 14px;
}
.sp-word {
  display: flex; gap: 2px;
}
.sp-word.white .sp-letter { color: #fff; }
.sp-word.red   .sp-letter { color: #D91C2A; }

.sp-letter {
  display: inline-block;
  animation: letterDrop .55s calc(var(--i) * .07s) cubic-bezier(.2,.8,.3,1.3) both;
}
@keyframes letterDrop {
  from { opacity: 0; transform: translateY(-22px) scaleY(.5); }
  to   { opacity: 1; transform: translateY(0)      scaleY(1); }
}

.sp-tagline {
  font-size: 13px; font-weight: 500;
  color: #3a3a3a; letter-spacing: .06em;
  animation: fadeUp .5s 1s ease both;
}

/* ─── Loader ─── */
.sp-loader { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.sp-loader-track {
  position: relative;
  width: clamp(180px, 32vw, 300px);
  height: 2px;
  background: rgba(255,255,255,.07);
  border-radius: 2px; overflow: visible;
}
.sp-loader-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #D91C2A, #ff5060, #D91C2A);
  background-size: 200%;
  border-radius: 2px;
  width: 0;
  animation:
    fillBar  2.6s .4s cubic-bezier(.4,0,.2,1) forwards,
    shimFill 1.2s .4s linear infinite;
}
@keyframes fillBar  { to { width: 100%; } }
@keyframes shimFill { 0%{background-position:0%} 100%{background-position:200%} }

.sp-loader-glow {
  position: absolute; top: -3px; right: 0;
  width: 20px; height: 8px; border-radius: 50%;
  background: #ff5060;
  box-shadow: 0 0 12px 4px rgba(255,80,96,.6);
  animation: glowDot 2.6s .4s cubic-bezier(.4,0,.2,1) forwards;
  opacity: 0;
}
@keyframes glowDot {
  0%   { left: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.sp-loader-dots { display: flex; gap: 7px; }
.sp-loader-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(217,28,42,.5);
  animation: dotPop .8s ease-in-out infinite;
}
.sp-loader-dots span:nth-child(1) { animation-delay: 0s;   }
.sp-loader-dots span:nth-child(2) { animation-delay: .18s; }
.sp-loader-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes dotPop {
  0%,100% { transform: scale(.7); opacity: .3; }
  50%      { transform: scale(1.3); opacity: 1; }
}


.sp-hud {
  position: absolute;
  width: 22px; height: 22px;
  border-color: rgba(217,28,42,.5);
  border-style: solid;
}
.sp-hud.tl { top: 18px;    left: 18px;   border-width: 2px 0 0 2px; }
.sp-hud.tr { top: 18px;    right: 18px;  border-width: 2px 2px 0 0; }
.sp-hud.bl { bottom: 18px; left: 18px;   border-width: 0 0 2px 2px; }
.sp-hud.br { bottom: 18px; right: 18px;  border-width: 0 2px 2px 0; }


.sp-hline {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(217,28,42,.2) 20%, rgba(217,28,42,.2) 80%, transparent);
}
.sp-hline.top { top: 64px;    }
.sp-hline.bot { bottom: 64px; }


@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

.lp{
  --red:#D91C2A;--gold:#E8A020;--grn:#1A7A3C;
  --bg:#080808;--s1:#0e0e0e;--s2:#151515;--s3:#1d1d1d;--s4:#272727;--s5:#333;
  --t1:#f0f0f0;--t2:#666;--t3:#333;
  background:var(--bg);color:var(--t1);
  font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;
}

/* ══════════════════════════════
   NAVBAR
══════════════════════════════ */
.lp-nav{
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:62px;display:flex;align-items:center;justify-content:space-between;
  padding:0 36px;
  background:rgba(8,8,8,.96);
  -webkit-backdrop-filter:blur(20px);
          backdrop-filter:blur(20px);
  border-bottom:1px solid #161616;
}

/* Brand */
.lp-nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.lp-nav-logo-img{width:32px;height:32px;object-fit:contain;border-radius:8px;background:var(--s3);}
.lp-nav-brand-name{
  font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.07em;color:var(--t1);
}
.lp-brand-letter{color:var(--red);}

/* Center */
.lp-nav-center{display:flex;align-items:center;gap:4px;flex:1 1;justify-content:center;}
.lp-nav-link{
  color:var(--t2);text-decoration:none;font-size:13px;font-weight:500;
  padding:6px 13px;border-radius:8px;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:color .15s,background .15s;
  font-family:'DM Sans',sans-serif;
}
.lp-nav-link:hover,.lp-nav-link.active{color:var(--t1);background:var(--s3);}
.lp-chevron{transition:transform .2s;}
.lp-drop-btn.active .lp-chevron{transform:rotate(180deg);}

/* Dropdown */
.lp-drop-wrap{position:relative;}
.lp-dropdown{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--s2);border:1px solid var(--s3);border-radius:12px;
  padding:6px;min-width:170px;z-index:500;
  animation:dropIn .18s ease both;
}
@keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.lp-dropdown a{
  display:block;color:var(--t2);text-decoration:none;
  font-size:13px;font-weight:500;padding:9px 14px;border-radius:8px;
  transition:background .12s,color .12s;
}
.lp-dropdown a:hover{background:var(--s3);color:var(--t1);}

/* Right */
.lp-nav-end{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.lp-btn-ghost-sm{
  color:var(--t2);text-decoration:none;font-size:13px;font-weight:500;
  padding:7px 16px;border-radius:8px;border:1px solid var(--s4);
  transition:color .15s,border-color .15s;
}
.lp-btn-ghost-sm:hover{color:var(--t1);border-color:var(--s5);}
.lp-btn-red-sm{
  background:var(--red);color:#fff;text-decoration:none;
  font-size:13px;font-weight:600;padding:7px 16px;border-radius:8px;
  transition:opacity .15s;
}
.lp-btn-red-sm:hover{opacity:.85;}

/* Hamburger */
.lp-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px;}
.lp-burger span{display:block;width:22px;height:2px;background:var(--t2);border-radius:2px;transition:transform .2s,opacity .2s;}
.lp-burger span.x:nth-child(1){transform:translateY(7px) rotate(45deg);}
.lp-burger span.x:nth-child(2){opacity:0;}
.lp-burger span.x:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Drawer mobile */
.lp-drawer{
  position:fixed;top:62px;left:0;right:0;z-index:399;
  background:rgba(8,8,8,.99);border-bottom:1px solid #161616;
  display:flex;flex-direction:column;padding:8px 20px 20px;gap:2px;
  max-height:calc(100vh - 62px);overflow-y:auto;
}
.lp-drawer a{color:var(--t2);text-decoration:none;font-size:15px;font-weight:500;padding:11px 14px;border-radius:9px;transition:background .12s,color .12s;}
.lp-drawer a:hover{background:var(--s2);color:var(--t1);}
.lp-drawer-section{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding:14px 14px 4px;margin-top:4px;}
.lp-drawer-btns{display:flex;gap:10px;padding:10px 14px 4px;}
.lp-drawer-btns .w-full{flex:1 1;text-align:center;}
.lp-drawer-discord{
  display:flex!important;align-items:center!important;gap:8px!important;
  color:#7289da!important;background:rgba(114,137,218,.1);border-radius:10px;
  margin:8px 14px 0;padding:11px 14px!important;
  border:1px solid rgba(114,137,218,.2);font-weight:600!important;
}
.lp-drawer-discord img{width:20px;height:20px;object-fit:contain;filter:none;}
.lp-drawer-discord:hover{background:rgba(114,137,218,.18)!important;}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.lp-hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding-top:62px;
}

/* Foto de fondo */
.lp-hero-photo{
  position:absolute;inset:-15%;z-index:0;
  will-change:transform;
}
.lp-hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
}

/* Overlay oscuro sobre la foto */
.lp-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.55) 0%, rgba(8,8,8,.3) 40%, var(--bg) 100%),
    rgba(8,8,8,.35);
}

.lp-stripe{position:absolute;top:0;bottom:0;width:2px;background:var(--red);opacity:.25;z-index:2;}
.lp-stripe.l{left:0;}.lp-stripe.r{right:0;}

.lp-hero-body{
  position:relative;z-index:3;text-align:center;
  padding:0 24px;display:flex;flex-direction:column;align-items:center;
}

/* Logo box */
.lp-hero-logo-box{
  width:110px;height:110px;border-radius:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  animation:fup .7s ease both;
}
.lp-hero-logo-box img{width:74px;height:74px;object-fit:contain;}

@keyframes fup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.lp-pill{
  display:inline-block;
  background:rgba(217,28,42,.12);border:1px solid rgba(217,28,42,.25);
  color:#f07080;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:100px;margin-bottom:22px;
  animation:fup .7s .08s ease both;
}

/* Título con letras animadas */
.lp-hero-h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(68px,13vw,148px);
  line-height:.86;letter-spacing:.03em;
  margin-bottom:22px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.lp-h1-zona,.lp-h1-peruana{display:flex;gap:2px;}

.lp-letter{
  display:inline-block;color:#fff;
  animation:letterIn .6s calc(var(--i) * 0.07s) ease both;
}
.lp-letter-red{color:var(--red);}
@keyframes letterIn{
  from{opacity:0;transform:translateY(30px) scaleY(.7);}
  to{opacity:1;transform:translateY(0) scaleY(1);}
}

/* Glow alrededor del nombre — anillo animado */
.lp-hero-h1::after{
  content:'';
  position:absolute;
  width:clamp(400px,70vw,900px);
  height:clamp(120px,20vw,260px);
  border-radius:50%;
  border:1px solid rgba(217,28,42,.18);
  animation:ringPulse 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:.18;}
  50%{transform:scale(1.04);opacity:.35;}
}

.lp-hero-lead{
  font-size:clamp(14px,1.8vw,17px);
  color:rgba(240,240,240,.72);
  max-width:460px;line-height:1.75;margin-bottom:34px;
  animation:fup .7s .5s ease both;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.lp-hero-btns{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  animation:fup .7s .58s ease both;
}
.lp-btn-red{
  background:var(--red);color:#fff;text-decoration:none;
  padding:14px 30px;border-radius:10px;font-weight:700;font-size:14px;
  transition:opacity .15s,transform .15s;
}
.lp-btn-red:hover{opacity:.87;transform:translateY(-2px);}
.lp-btn-outline{
  background:rgba(255,255,255,.06);color:#ddd;text-decoration:none;
  padding:14px 28px;border-radius:10px;font-weight:600;font-size:14px;
  border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:border-color .15s,color .15s,background .15s;
}
.lp-btn-outline:hover{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.1);}

/* Scrollline */
.lp-scrollline{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;}
.lp-scrollline span{display:block;width:2px;height:38px;background:linear-gradient(to bottom,transparent,var(--red));margin:0 auto;animation:sl 1.7s ease-in-out infinite;}
@keyframes sl{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ══════════════════════════════
   SECCIONES
══════════════════════════════ */
.lp-section{padding:88px 40px;max-width:1160px;margin:0 auto;}
.lp-dark{max-width:100%;background:var(--s1);padding:88px 40px;}
.lp-dark>*{max-width:1160px;margin-left:auto;margin-right:auto;}
.lp-sec-hd{text-align:center;margin-bottom:52px;}
.lp-label{display:inline-block;background:rgba(217,28,42,.1);border:1px solid rgba(217,28,42,.2);color:#f07080;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:12px;}
.lp-sec-hd h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,4.5vw,54px);letter-spacing:.04em;color:#fff;margin-bottom:8px;}
.lp-sec-hd p{font-size:14px;color:var(--t2);line-height:1.6;}

/* TIENDA */
.lp-tienda-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:22px;gap:22px;max-width:780px;margin:0 auto;}
.lp-tienda-card{position:relative;background:var(--s2);border:1px solid var(--s3);border-radius:20px;padding:34px 30px;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,border-color .22s;}
.lp-tienda-card:hover{transform:translateY(-6px);border-color:var(--tc);}
.lp-tc-topbar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--tc);}
.lp-tc-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;}
.lp-tc-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tc) 13%,transparent);border:1px solid color-mix(in srgb,var(--tc) 28%,transparent);}
.lp-tc-icon img{width:28px;height:28px;object-fit:contain;filter:invert(1);opacity:.9;}
.lp-tc-badge{background:color-mix(in srgb,var(--tc) 13%,transparent);color:var(--tc);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid color-mix(in srgb,var(--tc) 28%,transparent);}
.lp-tc-title{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:.04em;color:#fff;line-height:1;margin-bottom:2px;}
.lp-tc-sub{font-size:11px;font-weight:700;color:var(--tc);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;}
.lp-tc-desc{font-size:14px;color:var(--t2);line-height:1.68;margin-bottom:22px;flex:1 1;}
.lp-tc-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:26px;}
.lp-tc-list li{font-size:13px;color:#aaa;display:flex;align-items:center;gap:9px;}
.lp-check{color:var(--tc);font-weight:700;font-size:13px;flex-shrink:0;}
.lp-tc-cta{display:block;text-align:center;text-decoration:none;background:var(--tc);color:#fff;font-size:14px;font-weight:700;padding:13px;border-radius:11px;transition:opacity .15s,transform .15s;}
.lp-tc-cta:hover{opacity:.88;transform:translateY(-1px);}

/* EVENTOS */
.lp-ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));grid-gap:16px;gap:16px;}
.lp-ev-card{text-decoration:none;display:block;position:relative;background:var(--s2);border:1px solid var(--s3);border-radius:16px;padding:26px 22px;overflow:hidden;transition:transform .2s,border-color .2s;}
.lp-ev-card:hover{transform:translateY(-4px);border-color:var(--ec);}
.lp-ev-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ec);}
.lp-ev-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ec);background:color-mix(in srgb,var(--ec) 12%,transparent);padding:3px 9px;border-radius:5px;margin-bottom:13px;}
.lp-ev-title{font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.04em;color:#fff;margin-bottom:5px;}
.lp-ev-date{font-size:11px;font-weight:700;color:var(--ec);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.lp-ev-desc{font-size:13px;color:var(--t2);line-height:1.62;margin-bottom:14px;}
.lp-ev-more{font-size:12px;font-weight:600;color:var(--ec);}

/* COMUNIDAD */
.lp-com-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:14px;gap:14px;}
.lp-com-card{display:block;text-decoration:none;background:var(--s2);border:1px solid var(--s3);border-radius:16px;padding:26px 22px;transition:transform .2s,border-color .2s;position:relative;overflow:hidden;}
.lp-com-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cc);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.lp-com-card:hover{transform:translateY(-4px);border-color:var(--cc);}
.lp-com-card:hover::after{transform:scaleX(1);}
.lp-com-icon{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.lp-com-icon img{width:24px;height:24px;object-fit:contain;filter:invert(1);opacity:.9;}
.lp-com-card h3{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.04em;color:#fff;margin-bottom:8px;}
.lp-com-card p{font-size:13px;color:var(--t2);line-height:1.62;margin-bottom:16px;}
.lp-com-arrow{font-size:16px;font-weight:700;}

/* CTA */
.lp-cta{padding:110px 40px;text-align:center;background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(217,28,42,.08) 0%,transparent 70%);border-top:1px solid var(--s2);border-bottom:1px solid var(--s2);}
.lp-cta-logo{width:76px;height:76px;object-fit:contain;border-radius:18px;margin-bottom:28px;opacity:.9;background:var(--s3);}
.lp-cta h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,5vw,68px);letter-spacing:.04em;color:#fff;margin-bottom:12px;}
.lp-cta p{font-size:15px;color:var(--t2);margin-bottom:34px;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.65;}

/* FOOTER */
.lp-footer{background:var(--bg);border-top:1px solid #111;padding:60px 40px 36px;}
.lp-footer-top{display:flex;gap:64px;margin-bottom:44px;flex-wrap:wrap;}
.lp-footer-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.lp-footer-brand img{width:40px;height:40px;object-fit:contain;border-radius:10px;background:var(--s3);}
.lp-footer-brand span{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.07em;color:var(--red);}
.lp-footer-nav{display:flex;gap:52px;flex:1 1;flex-wrap:wrap;}
.lp-footer-nav>div{display:flex;flex-direction:column;gap:10px;min-width:110px;}
.lp-footer-nav strong{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:2px;}
.lp-footer-nav a{color:#2e2e2e;text-decoration:none;font-size:13px;transition:color .15s;}
.lp-footer-nav a:hover{color:#aaa;}
.lp-footer-discord{
  display:flex!important;align-items:center;gap:7px;
  color:#7289da!important;
}
.lp-footer-discord img{width:16px;height:16px;object-fit:contain;}
.lp-footer-bottom{border-top:1px solid #111;padding-top:24px;text-align:center;}
.lp-footer-bottom p{font-size:11px;color:#1e1e1e;}

/* ══════════════════════════════
   DISCORD FAB
══════════════════════════════ */
.lp-discord-fab{
  position:fixed;bottom:28px;right:28px;z-index:500;
  display:flex;align-items:center;gap:10px;
  background:#5865F2;color:#fff;text-decoration:none;
  padding:12px 18px 12px 14px;border-radius:100px;
  font-size:14px;font-weight:600;
  box-shadow:0 4px 24px rgba(88,101,242,.4);
  transition:transform .2s,opacity .15s;
  animation:fabIn .6s 1s ease both;
}
@keyframes fabIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.lp-discord-fab:hover{transform:translateY(-3px);opacity:.92;}
.lp-discord-fab img{width:22px;height:22px;object-fit:contain;}
.lp-discord-fab-label{white-space:nowrap;}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:860px){
  .lp-nav-center,.lp-btn-ghost-sm,.lp-btn-red-sm{display:none;}
  .lp-burger{display:flex;}
}
@media(max-width:600px){
  .lp-section,.lp-dark{padding:64px 20px;}
  .lp-cta{padding:80px 20px;}
  .lp-footer{padding:52px 20px 32px;}
  .lp-nav{padding:0 20px;}
  .lp-footer-top{flex-direction:column;gap:32px;}
  .lp-discord-fab-label{display:none;}
  .lp-discord-fab{padding:13px;border-radius:50%;}
}

/* ════════════════════════════════════════
   CARRUSEL DE EVENTOS — añadir a Landing.css
════════════════════════════════════════ */

.lp-ev-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.lp-ev-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}

.lp-ev-slide {
  position: relative;
  min-width: 100%;
  height: 380px;
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  background: #111;
}

@media(max-width:600px) {
  .lp-ev-slide { height: 280px; }
}

.lp-ev-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-ev-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.4)  55%,
    rgba(0,0,0,.15) 100%
  );
}

/* Línea de color arriba */
.lp-ev-slide-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #D91C2A;
  background: var(--ec, #D91C2A);
  box-shadow: 0 0 16px #D91C2A;
  box-shadow: 0 0 16px var(--ec, #D91C2A);
}

.lp-ev-slide-body {
  position: relative;
  z-index: 2;
  padding: 28px 36px;
  width: 100%;
}

@media(max-width:600px) {
  .lp-ev-slide-body { padding: 20px 20px; }
}

.lp-ev-slide-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  letter-spacing: .04em;
  color: #fff;
  margin: 10px 0 6px;
  line-height: .95;
}

.lp-ev-slide-fecha {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin: 0 0 16px;
  font-weight: 500;
}

.lp-ev-slide-btns {
  display: flex;
  gap: 10px;
}

.lp-ev-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.lp-ev-slide-cta:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* Dots */
.lp-ev-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.lp-ev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}
.lp-ev-dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* Flechas */
.lp-ev-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.lp-ev-arrow:hover { background: rgba(0,0,0,.75); }
.lp-ev-arrow-l { left: 12px; }
.lp-ev-arrow-r { right: 12px; }

@media(max-width:480px) {
  .lp-ev-arrow { display: none; }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Rajdhani', sans-serif;
  position: relative;
}

/* BOTÓN VOLVER */
.login-back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.login-back-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366, #20ba5c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6);
}

.whatsapp-icon {
  color: #fff;
  width: 32px;
  height: 32px;
}

.whatsapp-tooltip {
  position: absolute;
  bottom: -45px;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
}

/* TARJETA LOGIN */
.login-card {
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid rgba(155, 89, 182, 0.3);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.5s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HEADER */
.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.login-logo-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.login-logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  display: block;
}

.login-title {
  font-size: 28px;
  font-weight: bold;
  color: #e9ecef;
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 14px;
  color: #b7bcc4;
}

/* FORMULARIO */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ERROR BOX */
.login-error-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.5);
  border-radius: 8px;
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.login-error-icon {
  font-size: 18px;
}

.login-error-text {
  color: #e74c3c;
  font-size: 13px;
  font-weight: 500;
}

/* INPUT GROUP */
.login-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-label {
  font-size: 13px;
  font-weight: 600;
  color: #b7bcc4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: #e9ecef;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.login-input:focus {
  outline: none;
  border-color: rgba(155, 89, 182, 0.8);
  background: rgba(155, 89, 182, 0.1);
  box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.2);
}

.login-input::placeholder {
  color: #6b7280;
}

.login-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* PASSWORD WRAPPER */
.login-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-password-wrapper .login-input {
  padding-right: 44px;
}

.login-password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #b7bcc4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.login-password-toggle:hover {
  color: #9b59b6;
}

/* FORGOT PASSWORD */
.login-forgot-password {
  text-align: right;
}

.login-forgot-link {
  background: none;
  border: none;
  color: #9b59b6;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.login-forgot-link:hover {
  color: #e74c3c;
}

/* BOTÓN LOGIN */
.login-button {
  background: linear-gradient(135deg, #9b59b6, #667eea);
  color: #fff;
  border: none;
  padding: 13px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-button:hover:not(.login-button-disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(155, 89, 182, 0.4);
}

.login-button:active:not(.login-button-disabled) {
  transform: translateY(0);
}

.login-button-disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* FOOTER */
.login-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-footer-text {
  font-size: 13px;
  color: #b7bcc4;
  margin-bottom: 8px;
}

.login-link {
  color: #9b59b6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login-link:hover {
  color: #e74c3c;
}

/* MODAL */
.login-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.login-modal {
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid rgba(155, 89, 182, 0.3);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: slideUp 0.3s ease;
}

.login-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.login-modal-title {
  font-size: 22px;
  font-weight: bold;
  color: #e9ecef;
}

.login-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.login-modal-close:hover {
  color: #e74c3c;
}

.login-modal-description {
  font-size: 13px;
  color: #b7bcc4;
  margin-bottom: 20px;
  line-height: 1.5;
}

.login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-modal-actions {
  display: flex;
  gap: 12px;
}

.login-modal-cancel {
  flex: 1 1;
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.login-modal-cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.login-modal-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* SUCCESS */
.login-modal-success {
  text-align: center;
  padding: 32px 0;
}

.login-success-icon {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.login-success-text {
  font-size: 14px;
  color: #27ae60;
  font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .login-container {
    padding: 16px;
  }

  .login-back-button {
    top: 16px;
    left: 16px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .login-card {
    padding: 32px 24px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-logo-image {
    width: 40px;
    height: 40px;
  }

  .login-logo-text {
    font-size: 20px;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-icon {
    width: 28px;
    height: 28px;
  }

  .login-modal {
    padding: 24px;
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 24px;
    border-radius: 16px;
  }

  .login-button {
    padding: 12px 20px;
    font-size: 14px;
  }

  .login-back-button {
    padding: 8px 12px;
    font-size: 11px;
  }

  .login-logo {
    gap: 8px;
  }

  .login-logo-image {
    width: 36px;
    height: 36px;
  }

  .login-logo-text {
    font-size: 18px;
  }

  .login-title {
    font-size: 22px;
  }
}

.login-link-button {
  background: none;
  border: none;
  padding: 0;
  color: #4f46e5;
  cursor: pointer;
  font: inherit;
}

.login-link-button:hover {
  text-decoration: underline;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

.rg-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  font-family: 'DM Sans', sans-serif;
  background-image: url(/static/media/fondo.1d61dd9324b6c1a03603.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}
.rg-container::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,8,8,.9) 0%, rgba(14,4,4,.93) 100%);
  z-index: 0;
}
.rg-container > * { position: relative; z-index: 1; }

/* CARD */
.rg-card {
  background: rgba(10,8,8,.97);
  border: 1px solid rgba(217,28,42,.18);
  border-radius: 20px;
  padding: 44px 40px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 0 0 1px rgba(217,28,42,.05), 0 28px 72px rgba(0,0,0,.75);
  animation: slideUp .45s ease both;
  position: relative;
  overflow: hidden;
}
@keyframes slideUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

/* Barra top animada */
.rg-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D91C2A, #ff4d5e, #D91C2A);
  background-size: 200%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* HEADER */
.rg-header { text-align: center; margin-bottom: 32px; }
.rg-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 18px;
}
.rg-logo img {
  width: 50px; height: 50px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(217,28,42,.1);
  border: 1px solid rgba(217,28,42,.22);
}
.rg-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .07em;
  color: #f0f0f0;
}
.rg-red { color: #D91C2A; }
.rg-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: .04em;
  color: #f0f0f0;
  margin-bottom: 5px;
}
.rg-subtitle { font-size: 14px; color: #555; }

/* FORM */
.rg-form { display: flex; flex-direction: column; gap: 18px; }

/* ALERTS */
.rg-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 500;
}
.rg-alert-error {
  background: rgba(217,28,42,.1);
  border: 1px solid rgba(217,28,42,.35);
  color: #f87171;
  animation: shake .4s ease;
}
.rg-alert-success {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
  color: #4ade80;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* FIELD */
.rg-field { display: flex; flex-direction: column; gap: 7px; }
.rg-label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.rg-input-wrap { position: relative; display: flex; align-items: center; }
.rg-input {
  background: rgba(255,255,255,.04);
  border: 1px solid #1e1e1e;
  border-radius: 9px;
  padding: 13px 16px;
  color: #f0f0f0;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
  width: 100%;
}
.rg-input:focus {
  outline: none;
  border-color: rgba(217,28,42,.5);
  background: rgba(217,28,42,.04);
  box-shadow: 0 0 0 3px rgba(217,28,42,.1);
}
.rg-input::placeholder { color: #2e2e2e; }
.rg-input:disabled { opacity: .45; cursor: not-allowed; }
.rg-input-wrap .rg-input { padding-right: 42px; }
.rg-eye {
  position: absolute; right: 12px;
  background: none; border: none;
  color: #444; cursor: pointer;
  display: flex; align-items: center;
  transition: color .15s;
}
.rg-eye:hover { color: #D91C2A; }
.rg-hint { font-size: 11px; color: #3a3a3a; }

/* TERMS */
.rg-terms { font-size: 12px; color: #333; text-align: center; line-height: 1.5; }

/* BUTTON */
.rg-btn {
  background: #D91C2A;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .04em;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 20px rgba(217,28,42,.3);
  margin-top: 4px;
}
.rg-btn:hover:not(.rg-btn-disabled) { opacity: .88; transform: translateY(-2px); }
.rg-btn-disabled { opacity: .55; cursor: not-allowed; }

.rg-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* FOOTER */
.rg-footer {
  margin-top: 24px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #141414;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rg-footer p { font-size: 13px; color: #444; }
.rg-link { color: #D91C2A; text-decoration: none; font-weight: 600; transition: opacity .15s; }
.rg-link:hover { opacity: .8; }

/* INFO BOX */
.rg-info-box {
  margin-top: 18px;
  background: rgba(217,28,42,.05);
  border-left: 3px solid rgba(217,28,42,.4);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}
.rg-info-box p { font-size: 13px; color: #444; line-height: 1.6; }
.rg-info-box strong { color: #888; }

/* RESPONSIVE */
@media(max-width:560px){
  .rg-card { padding: 32px 22px; }
  .rg-title { font-size: 26px; }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --gold:      #E8A020;
  --gold-dim:  rgba(232,160,32,.14);
  --gold-glow: rgba(232,160,32,.28);
  --gold-bdr:  rgba(232,160,32,.22);

  --sb:        #0f0c1a;
  --sb2:       #0c0915;
  --sb-bdr:    rgba(255,255,255,.055);
  --sb-hov:    rgba(255,255,255,.046);
  --sb-act:    rgba(232,160,32,.12);
  --sb-w:      210px;
  --sb-c:      54px;

  --bg:        #090909;
  --s1:        #0e0e0e;
  --s2:        #131313;
  --s3:        #1a1a1a;
  --s4:        #222;

  --t1:        #f0f0f0;
  --t2:        #888;
  --t3:        #333;
  --st1:       rgba(255,255,255,.72);
  --st2:       rgba(255,255,255,.36);
  --st3:       rgba(255,255,255,.13);

  --top-h:     48px;
}

/* ─── WRAP ─── */
.dj-wrap{
  display:flex; min-height:100vh;
  background:#090909;
  background:var(--bg);
  font-family:'DM Sans',sans-serif;
  color:#f0f0f0;
  color:var(--t1);
}
.dj-overlay{
  position:fixed; inset:0; z-index:199;
  background:rgba(0,0,0,.58);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}

/* ─── SIDEBAR ─── */
.dj-sidebar{
  width:210px;
  width:var(--sb-w); min-height:100vh;
  background:#0f0c1a;
  background:var(--sb);
  border-right:.5px solid rgba(255,255,255,.055);
  border-right:.5px solid var(--sb-bdr);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  transition:width .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  box-shadow:1px 0 28px rgba(0,0,0,.55);
}
.dj-collapsed{ width:54px !important; width:var(--sb-c) !important; }

@media(max-width:767px){
  .dj-sidebar{
    transform:translateX(-110%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    width:210px !important;
    width:var(--sb-w) !important;
    box-shadow:4px 0 40px rgba(0,0,0,.75);
  }
  .dj-mob-open{ transform:translateX(0); }
}

/* Brand */
.dj-brand{
  display:flex; align-items:center; gap:10px;
  padding:13px 12px;
  border-bottom:.5px solid rgba(255,255,255,.055);
  border-bottom:.5px solid var(--sb-bdr);
  flex-shrink:0; min-height:56px;
  background:#0c0915;
  background:var(--sb2);
}
.dj-brand-icon{
  width:28px; height:28px; flex-shrink:0;
  border-radius:7px; overflow:hidden;
  background:#E8A020;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(232,160,32,.28);
  box-shadow:0 2px 10px var(--gold-glow);
}
.dj-brand-icon img{ width:20px; height:20px; object-fit:contain; }
.dj-brand-text{ overflow:hidden; white-space:nowrap; }
.dj-brand-name{
  display:block; font-size:12px; font-weight:700;
  color:rgba(255,255,255,.72);
  color:var(--st1); letter-spacing:.01em; line-height:1.2;
}
.dj-brand-sub{
  display:block; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#E8A020;
  color:var(--gold); margin-top:2px; opacity:.85;
}

/* Nav */
.dj-nav{
  flex:1 1; overflow-y:auto; overflow-x:hidden;
  padding:8px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.05) transparent;
}
.dj-nav::-webkit-scrollbar{ width:3px; }
.dj-nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.05); border-radius:3px;
}

.dj-item{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:9px 13px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.36);
  color:var(--st2); font-size:12px; font-weight:500;
  font-family:'DM Sans',sans-serif;
  white-space:nowrap; text-align:left;
  position:relative;
  transition:background .12s, color .12s;
}
.dj-item svg{ flex-shrink:0; opacity:.6; transition:opacity .12s; }
.dj-item span{ flex:1 1; }
.dj-item:hover{ background:rgba(255,255,255,.046); background:var(--sb-hov); color:rgba(255,255,255,.72); color:var(--st1); }
.dj-item:hover svg{ opacity:1; }

.dj-item.dj-active{
  background:rgba(232,160,32,.12);
  background:var(--sb-act);
  color:#ffc94d;
}
.dj-item.dj-active svg{ opacity:1; color:#E8A020; color:var(--gold); }
.dj-item.dj-active::before{
  content:'';
  position:absolute; left:0; top:18%; bottom:18%;
  width:2px; border-radius:0 2px 2px 0;
  background:#E8A020;
  background:var(--gold);
  box-shadow:0 0 8px rgba(232,160,32,.28);
  box-shadow:0 0 8px var(--gold-glow);
}

/* Footer */
.dj-foot{
  padding:10px 10px 12px;
  border-top:.5px solid rgba(255,255,255,.055);
  border-top:.5px solid var(--sb-bdr);
  flex-shrink:0;
  background:#0c0915;
  background:var(--sb2);
}
.dj-foot-user{
  display:flex; align-items:center; gap:9px;
  padding:3px 2px 10px;
}
.dj-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#E8A020,#ffb700);
  background:linear-gradient(135deg,var(--gold),#ffb700);
  color:#000; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(232,160,32,.28);
  box-shadow:0 2px 8px var(--gold-glow);
}
.dj-avatar.sm{ width:24px; height:24px; font-size:10px; }
.dj-foot-info{ overflow:hidden; }
.dj-foot-name{
  display:block; font-size:11px; font-weight:600;
  color:rgba(255,255,255,.72);
  color:var(--st1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
}
.dj-foot-role{
  display:block; font-size:10px;
  color:#E8A020;
  color:var(--gold); font-weight:600; line-height:1.3;
}

.dj-logout{
  width:100%; display:flex; align-items:center; gap:7px;
  padding:7px 10px; border-radius:7px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.22);
  font-size:11px; font-weight:500;
  font-family:'DM Sans',sans-serif;
  transition:background .12s, color .12s;
}
.dj-logout:hover{
  background:rgba(232,160,32,.1);
  color:#ffc94d;
}

/* ─── MAIN ─── */
.dj-main{
  margin-left:210px;
  margin-left:var(--sb-w);
  min-height:100vh;
  display:flex; flex-direction:column;
  transition:margin-left .22s cubic-bezier(.4,0,.2,1);
  flex:1 1; min-width:0;
}
.dj-main-wide{ margin-left:54px; margin-left:var(--sb-c); }
@media(max-width:767px){ .dj-main{ margin-left:0 !important; } }

/* ─── TOPBAR ─── */
.dj-topbar{
  height:48px;
  height:var(--top-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  background:#0e0e0e;
  background:var(--s1);
  border-bottom:.5px solid #1a1a1a;
  border-bottom:.5px solid var(--s3);
  position:-webkit-sticky;
  position:sticky; top:0; z-index:100;
  flex-shrink:0;
}
.dj-topbar-l{ display:flex; align-items:center; gap:10px; }
.dj-topbar-r{ display:flex; align-items:center; gap:10px; }

.dj-toggle{
  width:28px; height:28px; border-radius:6px;
  background:#131313;
  background:var(--s2); border:.5px solid #222; border:.5px solid var(--s4);
  color:#888;
  color:var(--t2); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
}
.dj-toggle:hover{ background:#222; background:var(--s4); color:#f0f0f0; color:var(--t1); }

.dj-bread{
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:#888; color:var(--t2);
}
.dj-bread svg{ flex-shrink:0; opacity:.45; }
.dj-bread-cur{ color:#f0f0f0; color:var(--t1); font-weight:600; }

.dj-rango-chip{
  background:rgba(232,160,32,.14);
  background:var(--gold-dim);
  border:1px solid rgba(232,160,32,.22);
  border:1px solid var(--gold-bdr);
  color:#E8A020;
  color:var(--gold);
  font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:100px;
  letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}

/* ─── CONTENT ─── */
.dj-content{
  flex:1 1; padding:22px 22px;
  background:#090909;
  background:var(--bg);
  overflow-y:auto; min-width:0;
}
@media(max-width:640px){
  .dj-content{ padding:14px 12px; }
  .dj-topbar{ padding:0 12px; }
  .dj-rango-chip{ display:none; }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --red:      #D91C2A;
  --red-dim:  rgba(217,28,42,.15);
  --red-glow: rgba(217,28,42,.3);

  /* Sidebar */
  --sb:       #0f0d18;
  --sb2:      #0c0b14;
  --sb-bdr:   rgba(255,255,255,.055);
  --sb-hov:   rgba(255,255,255,.048);
  --sb-act:   rgba(217,28,42,.13);
  --sb-w:     214px;
  --sb-c:     54px;

  /* Main */
  --bg:       #090909;
  --bg2:      #101010;
  --bg3:      #141414;
  --bdr:      #1a1a1a;
  --bdr2:     #202020;

  /* Texto */
  --t1:       #f0f0f0;
  --t2:       #888;
  --t3:       #333;
  --st1:      rgba(255,255,255,.72);
  --st2:      rgba(255,255,255,.36);
  --st3:      rgba(255,255,255,.14);

  --top-h:    48px;
}

/* ════════ WRAP ════════ */
.al-wrap{
  display:flex;
  min-height:100vh;
  background:#090909;
  background:var(--bg);
  font-family:'DM Sans',sans-serif;
  color:#f0f0f0;
  color:var(--t1);
}
.al-overlay{
  position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,.58);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}

/* ════════ SIDEBAR ════════ */
.al-sidebar{
  width:214px;
  width:var(--sb-w);
  min-height:100vh;
  background:#0f0d18;
  background:var(--sb);
  border-right:.5px solid rgba(255,255,255,.055);
  border-right:.5px solid var(--sb-bdr);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  z-index:200;
  transition:width .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  box-shadow:1px 0 28px rgba(0,0,0,.5);
}
.al-collapsed{width:54px!important;width:var(--sb-c)!important;}

@media(max-width:767px){
  .al-sidebar{
    transform:translateX(-110%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    width:214px!important;
    width:var(--sb-w)!important;
    box-shadow:4px 0 40px rgba(0,0,0,.75);
  }
  .al-mob-open{transform:translateX(0);}
}

/* ── Brand ── */
.al-brand{
  display:flex;align-items:center;gap:10px;
  padding:13px 12px;
  border-bottom:.5px solid rgba(255,255,255,.055);
  border-bottom:.5px solid var(--sb-bdr);
  flex-shrink:0;min-height:56px;
  background:#0c0b14;
  background:var(--sb2);
}
.al-brand-icon{
  width:28px;height:28px;flex-shrink:0;
  border-radius:7px;overflow:hidden;
  background:#D91C2A;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(217,28,42,.3);
  box-shadow:0 2px 10px var(--red-glow);
}
.al-brand-icon img{width:20px;height:20px;object-fit:contain;}
.al-brand-text{overflow:hidden;white-space:nowrap;}
.al-brand-name{
  display:block;font-size:12px;font-weight:700;
  color:rgba(255,255,255,.72);
  color:var(--st1);letter-spacing:.01em;line-height:1.2;
}
.al-brand-sub{
  display:block;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#D91C2A;
  color:var(--red);margin-top:2px;opacity:.85;
}

/* ── Nav scroll ── */
.al-nav{
  flex:1 1;overflow-y:auto;overflow-x:hidden;
  padding:6px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.05) transparent;
}
.al-nav::-webkit-scrollbar{width:3px;}
.al-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.05);border-radius:3px;}

/* Divisor */
.al-divider{
  height:.5px;
  background:rgba(255,255,255,.055);
  background:var(--sb-bdr);
  margin:3px 10px;
}

/* ── Item base ── */
.al-item{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:7px 13px;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.36);
  color:var(--st2);
  font-size:12px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  white-space:nowrap;text-align:left;
  position:relative;
  transition:background .12s,color .12s;
}
.al-item svg{flex-shrink:0;opacity:.65;transition:opacity .12s;}
.al-item:hover{background:rgba(255,255,255,.048);background:var(--sb-hov);color:rgba(255,255,255,.72);color:var(--st1);}
.al-item:hover svg{opacity:1;}

/* Activo */
.al-item.al-active{
  background:rgba(217,28,42,.13);
  background:var(--sb-act);
  color:#ff8090;
}
.al-item.al-active svg{opacity:1;color:#D91C2A;color:var(--red);}
.al-item.al-active::before{
  content:'';
  position:absolute;left:0;top:18%;bottom:18%;
  width:2px;border-radius:0 2px 2px 0;
  background:#D91C2A;
  background:var(--red);
  box-shadow:0 0 8px rgba(217,28,42,.3);
  box-shadow:0 0 8px var(--red-glow);
}
.al-item.al-grp-active{color:rgba(255,255,255,.72);color:var(--st1);}
.al-item.al-grp-active svg{opacity:1;}
.al-item.al-open{color:rgba(255,255,255,.72);color:var(--st1);}
.al-item.al-open svg{opacity:1;}
.al-item-label{flex:1 1;}

/* Chevron */
.al-chevron{
  margin-left:auto;flex-shrink:0;
  color:rgba(255,255,255,.14);
  color:var(--st3);
  transition:transform .18s;
}
.al-chevron.up{transform:rotate(180deg);}

/* Dot badge colapsado */
.al-dot{
  position:absolute;top:7px;right:8px;
  width:5px;height:5px;border-radius:50%;
  background:#D91C2A;
  background:var(--red);
  box-shadow:0 0 5px rgba(217,28,42,.3);
  box-shadow:0 0 5px var(--red-glow);
}

/* ── Children ── */
.al-children{
  background:rgba(0,0,0,.22);
  border-bottom:.5px solid rgba(255,255,255,.055);
  border-bottom:.5px solid var(--sb-bdr);
  padding:2px 0 3px;
}
.al-child{
  width:100%;display:flex;align-items:center;gap:7px;
  padding:6px 13px 6px 26px;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.3);
  font-size:11px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  white-space:nowrap;text-align:left;
  transition:background .1s,color .1s;
}
.al-child svg{flex-shrink:0;opacity:.55;}
.al-child span{flex:1 1;}
.al-child:hover{background:rgba(255,255,255,.038);color:rgba(255,255,255,.7);}
.al-child:hover svg{opacity:.85;}
.al-child.al-active{color:#ff8090;background:rgba(217,28,42,.08);}
.al-child.al-active svg{opacity:1;color:#D91C2A;color:var(--red);}

/* ── Badge ── */
.al-badge{
  margin-left:auto;flex-shrink:0;
  background:#D91C2A;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px;
  min-width:18px;text-align:center;
  box-shadow:0 1px 5px rgba(217,28,42,.3);
  box-shadow:0 1px 5px var(--red-glow);
}

/* ── Footer ── */
.al-foot{
  padding:10px 10px 12px;
  border-top:.5px solid rgba(255,255,255,.055);
  border-top:.5px solid var(--sb-bdr);
  flex-shrink:0;
  background:#0c0b14;
  background:var(--sb2);
}
.al-foot-user{
  display:flex;align-items:center;gap:8px;
  padding:3px 2px 10px;
}
.al-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#D91C2A,#ff5060);
  background:linear-gradient(135deg,var(--red),#ff5060);
  color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(217,28,42,.3);
  box-shadow:0 2px 8px var(--red-glow);
}
.al-avatar.sm{width:24px;height:24px;font-size:10px;}
.al-foot-info{overflow:hidden;}
.al-foot-name{
  display:block;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.72);
  color:var(--st1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.al-foot-role{display:block;font-size:10px;color:rgba(255,255,255,.14);color:var(--st3);line-height:1.3;}
.al-logout{
  width:100%;display:flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:7px;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.22);
  font-size:11px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  transition:background .12s,color .12s;
}
.al-logout:hover{background:rgba(217,28,42,.1);color:#f87171;}

/* ════════ MAIN ════════ */
.al-main{
  margin-left:214px;
  margin-left:var(--sb-w);
  min-height:100vh;
  display:flex;flex-direction:column;
  transition:margin-left .22s cubic-bezier(.4,0,.2,1);
  flex:1 1;min-width:0;
}
.al-main-wide{margin-left:54px;margin-left:var(--sb-c);}
@media(max-width:767px){.al-main{margin-left:0!important;}}

/* ════════ TOPBAR ════════ */
.al-topbar{
  height:48px;
  height:var(--top-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  background:#101010;
  background:var(--bg2);
  border-bottom:.5px solid #1a1a1a;
  border-bottom:.5px solid var(--bdr);
  position:-webkit-sticky;
  position:sticky;top:0;z-index:100;
  flex-shrink:0;
}
.al-topbar-l{display:flex;align-items:center;gap:10px;}
.al-topbar-r{display:flex;align-items:center;gap:8px;}

.al-toggle{
  width:28px;height:28px;border-radius:6px;
  background:#141414;
  background:var(--bg3);border:.5px solid #202020;border:.5px solid var(--bdr2);
  color:#888;
  color:var(--t2);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s,border-color .12s;
}
.al-toggle:hover{background:#202020;background:var(--bdr2);border-color:#2a2a2a;color:#f0f0f0;color:var(--t1);}

.al-bread{
  display:flex;align-items:center;gap:5px;
  font-size:12px;color:#888;color:var(--t2);
}
.al-bread svg{flex-shrink:0;opacity:.45;}
.al-bread-cur{color:#f0f0f0;color:var(--t1);font-weight:600;}

/* Chips notificación */
.al-top-chip{
  display:flex;align-items:center;gap:5px;
  background:#141414;
  background:var(--bg3);border:.5px solid #202020;border:.5px solid var(--bdr2);
  border-radius:6px;padding:4px 9px;
  font-size:11px;font-weight:500;color:#888;color:var(--t2);
  cursor:pointer;font-family:'DM Sans',sans-serif;
  white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.al-top-chip svg{flex-shrink:0;}
.al-top-chip:hover{
  background:rgba(217,28,42,.08);
  border-color:rgba(217,28,42,.22);
  color:#f87171;
}

/* Usuario topbar */
.al-top-user{display:flex;align-items:center;gap:8px;}
.al-top-info{display:flex;flex-direction:column;line-height:1.25;}
.al-top-info span:first-child{font-size:12px;font-weight:600;color:#f0f0f0;color:var(--t1);}
.al-top-role{font-size:10px;color:#333;color:var(--t3);}

/* Ocultar en mobile muy pequeño */
@media(max-width:460px){
  .al-top-chip{display:none;}
  .al-top-info{display:none;}
  .al-bread>span:first-of-type{display:none;}
}

/* ════════ CONTENT ════════ */
.al-content{
  flex:1 1;
  padding:22px 22px;
  background:#090909;
  background:var(--bg);
  overflow-y:auto;
  min-width:0;
}
@media(max-width:640px){
  .al-content{padding:14px 12px;}
  .al-topbar{padding:0 12px;}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

.ap-root{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:#080808;
  font-family:'DM Sans',sans-serif;
  overflow:hidden;position:relative;
  opacity:0;
  transition:opacity .6s ease;
}
.ap-root.ready{ opacity:1; }

/* Fondo */
.ap-bg{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    135deg,transparent,transparent 50px,
    rgba(217,28,42,.025) 50px,rgba(217,28,42,.025) 51px
  );
}
.ap-radial{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 65% at 50% 45%, rgba(217,28,42,.13) 0%, transparent 65%);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}

/* Franjas */
.ap-stripe{position:absolute;top:0;bottom:0;width:2px;background:#D91C2A;background:var(--r,#D91C2A);opacity:.15;}
.ap-stripe.l{left:0;} .ap-stripe.r{right:0;}
.ap-stripe-h{position:absolute;left:0;right:0;height:1px;background:#D91C2A;opacity:.1;}
.ap-stripe-h.t{top:62px;} .ap-stripe-h.b{bottom:0;}

/* Centro */
.ap-center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:40px 24px;
  gap:0;
}

/* Logo */
.ap-logo-wrap{
  position:relative;
  width:140px;height:140px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:32px;
}
.ap-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(217,28,42,.25);
}
.ap-ring-1{width:140px;height:140px;animation:ringPulse 2.5s ease-in-out infinite;}
.ap-ring-2{width:110px;height:110px;animation:ringPulse 2.5s .4s ease-in-out infinite;}
.ap-ring-3{width:80px;height:80px;animation:ringPulse 2.5s .8s ease-in-out infinite;}
@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:.25;}
  50%{transform:scale(1.06);opacity:.55;}
}
.ap-logo-box{
  width:68px;height:68px;border-radius:18px;
  background:rgba(217,28,42,.1);
  border:1px solid rgba(217,28,42,.3);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.ap-logo-box img{width:46px;height:46px;object-fit:contain;}

/* Título */
.ap-title-wrap{margin-bottom:24px;}
.ap-sup{
  display:inline-block;
  background:rgba(217,28,42,.1);border:1px solid rgba(217,28,42,.22);
  color:#f07080;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:100px;margin-bottom:14px;
}
.ap-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(56px,10vw,110px);
  line-height:.88;letter-spacing:.03em;
  color:#fff;
}
.ap-title-red{color:#D91C2A;}

/* Letras animadas */
.ap-letter{
  display:inline-block;
  animation:letterIn .5s calc(var(--i)*.08s) ease both;
}
@keyframes letterIn{
  from{opacity:0;transform:translateY(20px) scaleY(.6);}
  to{opacity:1;transform:translateY(0) scaleY(1);}
}

/* Status */
.ap-status-card{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border:1px solid #222;
  border-radius:10px;padding:10px 20px;margin-bottom:20px;
}
.ap-status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#E8A020;
  box-shadow:0 0 8px rgba(232,160,32,.6);
  animation:dotBlink 1.5s ease-in-out infinite;
}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
.ap-status-text{font-size:13px;color:#888;font-weight:500;}

/* Desc */
.ap-desc{
  font-size:13px;color:#444;line-height:1.7;max-width:380px;margin-bottom:28px;
}
.ap-desc code{
  background:rgba(217,28,42,.1);color:#f07080;
  padding:2px 7px;border-radius:5px;font-size:12px;
}

/* Logout */
.ap-logout{
  background:rgba(217,28,42,.08);
  border:1px solid rgba(217,28,42,.2);
  color:#f87171;padding:10px 24px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:background .15s,border-color .15s;
}
.ap-logout:hover{background:rgba(217,28,42,.16);border-color:rgba(217,28,42,.4);}

/* Esquinas */
.ap-corner{
  position:absolute;width:20px;height:20px;
  border-color:#D91C2A;border-style:solid;opacity:.3;
}
.ap-corner.tl{top:16px;left:16px;border-width:2px 0 0 2px;}
.ap-corner.tr{top:16px;right:16px;border-width:2px 2px 0 0;}
.ap-corner.bl{bottom:16px;left:16px;border-width:0 0 2px 2px;}
.ap-corner.br{bottom:16px;right:16px;border-width:0 2px 2px 0;}
.robux-page{
  padding:1.5rem;
  background:var(--bg);
  min-height:100%;
  color:var(--t1);
  font-family:'DM Sans',sans-serif;
}

.robux-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:1.5rem;
}

.robux-top h1{
  font-size:20px;
  font-weight:600;
  color:var(--t1);
}

.tc-bar{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg2);
  border:1px solid var(--bdr2);
  border-radius:10px;
  padding:8px 14px;
  font-size:13px;
}

.tc-bar span{
  color:var(--t2);
}

.tc-bar input{
  width:78px;
  background:var(--bg3);
  border:1px solid var(--bdr2);
  border-radius:6px;
  padding:4px 8px;
  color:var(--t1);
  font-size:13px;
  text-align:right;
  outline:none;
}

.tc-bar input:focus{
  border-color:var(--red);
}

.tc-badge{
  background:rgba(34,197,94,.12);
  color:#4ade80;
  font-size:11px;
  padding:2px 8px;
  border-radius:6px;
}

.robux-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:1.25rem;
}

.btn-new{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}

.btn-new:hover{
  opacity:.85;
}

.robux-count{
  font-size:12px;
  color:var(--t2);
}

.robux-empty{
  text-align:center;
  color:var(--t2);
  font-size:14px;
  margin-top:3rem;
}

.robux-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  grid-gap:14px;
  gap:14px;
}

.pkg-card{
  background:var(--bg2);
  border:1px solid var(--bdr);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .15s;
}

.pkg-card:hover{
  border-color:var(--bdr2);
}

.pkg-card img{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
}

.pkg-img-ph{
  width:100%;
  height:110px;
  background:var(--bg3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--t3);
  font-size:12px;
}

.pkg-body{
  padding:10px 12px;
}

.pkg-name{
  font-size:14px;
  font-weight:600;
  color:var(--t1);
  margin-bottom:2px;
}

.pkg-desc{
  font-size:12px;
  color:var(--t2);
  margin-bottom:8px;
  min-height:16px;
}

.pkg-prices{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}

.pkg-soles{
  font-size:15px;
  font-weight:600;
  color:var(--red);
}

.pkg-usd{
  font-size:11px;
  color:var(--t2);
}

.pkg-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}

.badge-on{
  background:rgba(34,197,94,.12);
  color:#4ade80;
  font-size:11px;
  padding:2px 8px;
  border-radius:6px;
  border:none;
  cursor:pointer;
}

.badge-off{
  background:var(--bg3);
  color:var(--t2);
  font-size:11px;
  padding:2px 8px;
  border-radius:6px;
  border:1px solid var(--bdr2);
  cursor:pointer;
}

.pkg-stock{
  font-size:11px;
  color:var(--t2);
}

.pkg-robux{
  font-size:11px;
  color:var(--t2);
  margin-bottom:10px;
}

.pkg-footer{
  display:flex;
  gap:6px;
}

.btn-edit{
  flex:1 1;
  font-size:12px;
  background:var(--bg3);
  border:1px solid var(--bdr2);
  border-radius:6px;
  color:var(--t1);
  padding:5px 0;
  cursor:pointer;
  transition:border-color .15s;
}

.btn-edit:hover{
  border-color:var(--t2);
}

.btn-del{
  font-size:12px;
  background:var(--red-dim);
  border:1px solid rgba(217,28,42,.25);
  border-radius:6px;
  color:var(--red);
  padding:5px 10px;
  cursor:pointer;
  transition:background .15s;
}

.btn-del:hover{
  background:var(--red-glow);
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:1rem;
}

.modal-box{
  background:var(--bg2);
  border:1px solid var(--bdr2);
  border-radius:14px;
  width:100%;
  max-width:360px;
  padding:1.5rem;
  overflow-y:auto;
  max-height:90vh;
}

.modal-box h2{
  font-size:16px;
  font-weight:600;
  color:var(--t1);
  margin-bottom:1.1rem;
}

.field{
  margin-bottom:12px;
}

.field label{
  display:block;
  font-size:11px;
  color:var(--t2);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.field input,
.field textarea,
.field select{
  width:100%;
  background:var(--bg3);
  border:1px solid var(--bdr2);
  border-radius:8px;
  padding:8px 10px;
  color:var(--t1);
  font-size:13px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color .15s;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:var(--red);
}

.field textarea{
  resize:vertical;
  min-height:56px;
}

.field select option{
  background:var(--bg3);
}

.usd-preview{
  font-size:11px;
  color:var(--t2);
  margin-top:3px;
}

.img-preview{
  margin-top:6px;
  width:100%;
  height:80px;
  object-fit:cover;
  border-radius:6px;
}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
  gap:10px;
}

.modal-footer{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:1.2rem;
}

.btn-cancel{
  font-size:13px;
  padding:8px 16px;
  background:transparent;
  border:1px solid var(--bdr2);
  border-radius:8px;
  color:var(--t2);
  cursor:pointer;
  transition:border-color .15s;
}

.btn-cancel:hover{
  border-color:var(--t1);
  color:var(--t1);
}

.btn-save{
  font-size:13px;
  padding:8px 16px;
  background:var(--red);
  border:none;
  border-radius:8px;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}

.btn-save:hover{
  opacity:.85;
}

.btn-save:disabled{
  opacity:.4;
  cursor:not-allowed;
}