/* L2Gamers pages.css */
/* ═══════════════════════════════════════════════════
   L2GAMERS.CL — PAGES.CSS
   Estilos específicos por página
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════
   INDEX — Hero, Phoenix, Stats, Countdown
══════════════════════════════════ */
.hero{
  position:relative;min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;padding:7rem clamp(1rem,4vw,3rem) 4rem;
  overflow:hidden;gap:2rem;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 70% 60%,var(--bf) 0%,transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%,transparent 30%,var(--c0) 100%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--bf) 1px,transparent 1px),
    linear-gradient(90deg,var(--bf) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black,transparent);
}
.hero-left{position:relative;z-index:3;max-width:540px}
.hero-right{position:relative;z-index:3;display:flex;align-items:center;justify-content:center}

/* Badge online */
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 18px;border:1px solid var(--bf);border-radius:28px;
  font-size:10px;font-weight:700;color:var(--gold3);
  letter-spacing:2.5px;text-transform:uppercase;
  margin-bottom:1.6rem;background:var(--bf);backdrop-filter:blur(6px);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 0 7px var(--bf)}
}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:livePulse 1.8s ease-in-out infinite;flex-shrink:0;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}
}

/* Título */
.hero-title{
  font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.07;margin-bottom:1.4rem;color:var(--tx1);
}
.hero-title .gd{
  background:linear-gradient(135deg,var(--gold1),var(--gold4) 50%,var(--gold2));
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 4s linear infinite;display:block;
}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
.hero-sub{font-size:.95rem;color:var(--tx3);max-width:450px;margin-bottom:2.2rem;font-weight:300;line-height:1.85}
.hero-btns{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:2.8rem}

/* Stats */
.stats-row{
  display:flex;gap:1px;background:var(--bf);
  border:1px solid var(--bf);border-radius:6px;overflow:hidden;
}
.stat-c{
  background:rgba(8,5,2,.88);padding:12px 14px;flex:1;text-align:center;
  transition:background .22s;position:relative;overflow:hidden;
}
.stat-c::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--fire2),var(--gold3));
  transform:scaleX(0);transition:transform .28s;
}
.stat-c:hover{background:rgba(16,9,4,.92)}
.stat-c:hover::after{transform:scaleX(1)}
.stat-v{
  font-family:'Cinzel',serif;font-size:1.25rem;font-weight:700;
  background:linear-gradient(135deg,var(--gold2),var(--gold4));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:block;line-height:1.2;
}
.stat-l{font-size:9px;color:var(--tx4);letter-spacing:2px;text-transform:uppercase;margin-top:2px;display:block}

/* ── COUNTDOWN ───────────────────────────────────── */
.countdown-wrap{
  background:var(--c1);border:1px solid var(--bf);border-radius:8px;
  padding:2rem clamp(1rem,4vw,2.5rem);text-align:center;
  margin:0 clamp(1rem,4vw,3rem) 2rem;
  max-width:1240px;margin-left:auto;margin-right:auto;
  position:relative;z-index:2;
}
.countdown-label{
  font-family:'Cinzel',serif;font-size:10px;font-weight:700;
  letter-spacing:4px;color:var(--fire2);text-transform:uppercase;
  margin-bottom:.4rem;
}
.countdown-date{
  font-family:'Cinzel',serif;font-size:clamp(1rem,2.5vw,1.3rem);
  color:var(--gold3);font-weight:600;margin-bottom:1.4rem;letter-spacing:1px;
}
.countdown-timer{
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,16px);
  flex-wrap:nowrap;
}
.cd-unit{
  background:rgba(3,2,1,.8);border:1px solid var(--bf2);border-radius:6px;
  padding:clamp(10px,2vw,18px) clamp(14px,3vw,28px);
  min-width:clamp(60px,12vw,90px);text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 0 20px var(--bf);
}
.cd-unit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bf) 0%,transparent 100%);
}
.cd-num{
  font-family:'Cinzel',serif;
  font-size:clamp(1.8rem,5vw,3rem);
  font-weight:900;color:var(--tx1);
  display:block;line-height:1;position:relative;z-index:1;
  text-shadow:0 0 20px var(--bf);
}
.cd-sep{
  font-family:'Cinzel',serif;font-size:clamp(1.4rem,3.5vw,2.2rem);
  font-weight:900;color:var(--fire2);
  animation:cdBlink 1s ease-in-out infinite;
  padding-bottom:1.2rem;flex-shrink:0;
}
@keyframes cdBlink{0%,100%{opacity:1}50%{opacity:.25}}
.cd-lbl{
  font-size:clamp(8px,1.5vw,10px);font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--tx4);
  display:block;margin-top:4px;position:relative;z-index:1;
}

/* ── PHOENIX SCENE ───────────────────────────────── */
.phoenix-scene{
  position:relative;width:clamp(280px,40vw,460px);
  height:clamp(280px,40vw,460px);
  display:flex;align-items:center;justify-content:center;
}
#px-cvs{position:absolute;inset:0;width:100%;height:100%}
.phoenix-logo{
  width:clamp(200px,30vw,320px);height:clamp(200px,30vw,320px);
  object-fit:contain;position:relative;z-index:5;
  animation:pxFloat 5s ease-in-out infinite alternate;
  will-change:transform,filter;
}
@keyframes pxFloat{
  from{transform:translateY(0);filter:drop-shadow(0 0 20px var(--bf2)) drop-shadow(0 0 40px var(--bf))}
  to{transform:translateY(-16px);filter:drop-shadow(0 0 38px var(--bf2)) drop-shadow(0 0 70px var(--bf2))}
}
.scroll-hint{
  position:absolute;bottom:1.5rem;left:clamp(1rem,4vw,3rem);z-index:3;
  display:flex;align-items:center;gap:10px;
  animation:shint 2.8s ease-in-out infinite;
}
@keyframes shint{
  0%,100%{opacity:.3;transform:translateX(0)}
  50%{opacity:.65;transform:translateX(7px)}
}
.scroll-hint span{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--tx4)}
.sarr{width:22px;height:1px;background:linear-gradient(90deg,var(--tx4),transparent)}

/* ── FEATURES GRID (Inicio) ──────────────────────── */
.feats-sec{padding:4rem clamp(1rem,4vw,3rem);max-width:1240px;margin:0 auto;position:relative;z-index:2}
.feats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;background:var(--bf);border:1px solid var(--bf);border-radius:8px;overflow:hidden;
}
.feat-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 80%,#000) 0%,var(--c1) 100%);
  padding:2.2rem;transition:background .25s,box-shadow .25s;
  position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.feat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--fire2),var(--gold3));
  transform:scaleX(0);transform-origin:left;transition:transform .32s;
}
.feat-card:hover{background:var(--c2);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.feat-card:hover::before{transform:scaleX(1)}

.feat-card:hover .feat-iw{
  background:var(--bf);border-color:var(--bf2);
  box-shadow:0 0 16px var(--bf);
}
.feat-h{font-family:'Cinzel',serif;font-size:1rem;font-weight:600;color:var(--tx1);margin-bottom:.55rem}
.feat-p{font-size:13px;color:var(--tx4);line-height:1.75}

/* ══════════════════════════════════
   RANKING
══════════════════════════════════ */
.rank-sec{padding:1.5rem clamp(1rem,4vw,3rem) 3rem;max-width:1240px;margin:0 auto;position:relative;z-index:2}
.rank-tabs{
  display:flex;gap:6px;margin-bottom:1.4rem;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.rank-tabs::-webkit-scrollbar{display:none;}
.rank-tabs:active{cursor:grabbing;}
/* Select mobile ranking — oculto en desktop */
.rank-tab-select{display:none;}
.csr-sel[data-for="rankTabSel"]{display:none;}
@media(max-width:600px){
  .rank-tabs{display:none;}
  .rank-tab-select{display:none;}
  .csr-sel[data-for="rankTabSel"]{display:block;width:100%;margin-bottom:12px}
  .csr-sel[data-for="rankTabSel"] .csr-sel-btn{width:100%;font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold3);padding:12px 40px 12px 16px}
}
.rtab{flex-shrink:0;scroll-snap-align:start;}
@media(max-width:960px){
  .rtab{ padding:10px 18px; font-size:12px; white-space:nowrap; }
}
.rtab{
  padding:6px 15px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 45%,var(--c2)) 0%,var(--c2) 100%);
  border:1px solid var(--bf);
  color:var(--tx4);font-family:'Exo 2',sans-serif;font-size:11px;
  font-weight:700;cursor:pointer;border-radius:3px;
  letter-spacing:1px;text-transform:uppercase;transition:all .22s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.rtab.on{background:linear-gradient(135deg,var(--fire1),var(--fire3));border-color:var(--fire3);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--fire3) 38%,transparent)}
.rtab:hover:not(.on){border-color:var(--fire2);color:var(--tx2);box-shadow:0 2px 10px rgba(0,0,0,.26),0 0 10px color-mix(in srgb,var(--fire3) 16%,transparent)}
.tbl-wrap{
  border:1px solid var(--bf);border-radius:6px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--fire2) var(--c1);
}
.tbl-wrap::-webkit-scrollbar{height:4px;}
.tbl-wrap::-webkit-scrollbar-track{background:var(--c1);}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--fire2);border-radius:2px;}
.rtbl{width:100%;border-collapse:collapse;font-size:14px;min-width:600px;}
.rtbl thead{background:var(--c1)}
.rtbl th{
  text-align:left;padding:11px 18px;font-size:9px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--tx4);border-bottom:1px solid var(--bf);
}
.rtbl td{padding:14px 18px;border-bottom:1px solid var(--bf);color:var(--tx2);transition:background .18s}
.rtbl tbody tr:last-child td{border-bottom:none}
.rtbl tbody tr:hover td{background:var(--bf)}
.rtbl tbody tr:nth-child(1) td{color:var(--gold3)}
.rtbl tbody tr:nth-child(2) td{color:var(--tx1)}
.rtbl tbody tr:nth-child(3) td{color:var(--fire3)}
/* Boss mode — sin colores de posición */
body.boss-mode .rtbl tbody tr:nth-child(1) td,
body.boss-mode .rtbl tbody tr:nth-child(2) td,
body.boss-mode .rtbl tbody tr:nth-child(3) td{color:var(--tx2)!important}

.rtbl tbody tr:nth-child(1) .rpos{color:var(--gold3)}
.rtbl tbody tr:nth-child(2) .rpos{color:var(--fire3)}
.rtbl tbody tr:nth-child(3) .rpos{color:var(--fire2)}

.rtbl tbody tr:nth-child(1) .pvp-b{background:var(--bf);border-color:var(--bf);color:var(--gold3)}
.cr{display:flex;align-items:center;gap:9px}
.av{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--c3),var(--fire1));
  border:1px solid var(--bf);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--tx3);font-family:'Cinzel',serif;flex-shrink:0;
}
/* Pill servidor */
.srv-pill{
  display:flex;align-items:center;gap:18px;
  padding:11px 18px;background:rgba(8,5,2,.9);
  border:1px solid var(--bf);border-radius:4px;
  margin-bottom:1.8rem;flex-wrap:wrap;backdrop-filter:blur(6px);
}
.srv-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:livePulse 2s ease-in-out infinite}
.srv-lbl{font-size:11px;font-weight:700;color:var(--green);letter-spacing:2px;text-transform:uppercase}
.srv-stat{font-size:12px;color:var(--tx4)}
.srv-stat b{color:var(--gold2);font-weight:600}

/* ══════════════════════════════════
   INFORMACIÓN — Sidebar layout
══════════════════════════════════ */
.sidebar{
  position:sticky;top:calc(var(--nav-h) + 12px);
  height:fit-content;background:var(--c1);
  border:1px solid var(--bf);border-radius:6px;padding:14px;align-self:start;
}
.sidebar-nav-label{
  font-family:'Cinzel',serif;font-size:9px;font-weight:700;
  letter-spacing:3px;color:var(--fire2);text-transform:uppercase;
  margin-bottom:10px;padding:0 8px;
}
.sidebar-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;
  color:var(--tx3);transition:all .2s;user-select:none;
}
.sidebar-item:hover{background:var(--bf);color:var(--tx2)}
.sidebar-item.active{
  background:var(--bf);color:var(--gold3);
  border-left:2px solid var(--fire2);
}
.sidebar-toggle{
  display:none;width:100%;padding:9px 14px;
  background:var(--bf);border:1px solid var(--bf);border-radius:4px;
  color:var(--tx2);font-family:'Cinzel',serif;font-size:11px;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;margin-bottom:12px;text-align:left;
}
.sec-title{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--tx1);
  margin-bottom:1rem;display:flex;align-items:center;gap:10px;
  padding-bottom:.6rem;border-bottom:1px solid var(--bf);
}
.rate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.rate-icon{font-size:22px;flex-shrink:0}
.rate-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx4);margin-bottom:3px}
.rate-value{font-family:'Cinzel',serif;font-size:1.3rem;font-weight:700;color:var(--gold3)}
.features-section{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.features-group{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 78%,#000) 0%,var(--c1) 100%);border:1px solid var(--bf);border-radius:6px;padding:14px;box-shadow:0 3px 12px rgba(0,0,0,.22)}

.feat-icon{width:24px;height:24px;flex-shrink:0;color:var(--fire3)}
.feat-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat-name{font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:2px}
.feat-desc{font-size:12px;color:var(--tx4);line-height:1.5}

/* ══════════════════════════════════
   DONACIONES
══════════════════════════════════ */
.don-wrap{max-width:1100px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,3rem) 3rem;position:relative;z-index:2;overflow:visible}
.info-msg{
  background:var(--bf);border:1px solid var(--bf);
  border-radius:4px;padding:12px 18px;margin-bottom:2rem;
  text-align:center;font-size:14px;color:var(--tx3);
}
.notice-bar strong{color:var(--gold3)}
.packs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-bottom:2rem;align-items:stretch;overflow:visible;
  padding-top:22px;
}
/* Wrapper por card: overflow visible para que el badge salga por arriba */
.pack-wrap{position:relative;padding-top:14px}
/* Card: overflow hidden para contener la llama del hover */
.pack-card{
  position:relative;background:var(--c1);border:1px solid var(--bf);
  border-radius:10px;padding:26px 20px;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden;
  height:100%;
}
.pack-card.featured{
  border:2px solid var(--fire3);
  box-shadow:0 0 0 1px var(--bf), 0 0 28px var(--bf), inset 0 0 40px var(--bf);
  background:linear-gradient(180deg, var(--c0) 0%, var(--c1) 100%);
}
.pack-card::before{
  content:'';position:absolute;bottom:-100%;left:0;right:0;height:100%;
  background:linear-gradient(0deg,var(--bf) 0%,var(--bf) 60%,transparent 100%);
  transition:bottom .4s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0;
}
.pack-card:hover::before{bottom:0}
.pack-card:hover{transform:translateY(-4px);box-shadow:0 12px 38px var(--bf2);border-color:var(--fire3)}
.pack-card
.pack-card.featured:hover{box-shadow:0 16px 48px var(--bf2),0 0 0 1px var(--bf2)}
.pack-card>*{position:relative;z-index:1}
/* Badge en el WRAP (overflow visible) — fuera del card */
.pack-badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-5%);
  background:linear-gradient(90deg,var(--fire2),var(--gold2),var(--gold3),var(--gold2),var(--fire2));
  background-size:200% auto;
  animation:badgeShimmer 6s ease-in-out infinite, badgeAppear .5s ease .7s both;
  color:#06020a;font-family:'Cinzel',serif;font-size:11px;font-weight:900;
  letter-spacing:3px;padding:8px 22px;border-radius:20px;white-space:nowrap;
  box-shadow:0 0 14px var(--bf2),0 0 5px var(--bf);
  z-index:10;text-transform:uppercase;
  opacity:0;
}
@keyframes badgeShimmer{0%,100%{background-position:0% center}50%{background-position:200% center}}
@keyframes badgeAppear{from{opacity:0;transform:translate(-50%,-5%) translateY(-8px)}to{opacity:1;transform:translate(-50%,-5%)}}

.pack-icon-wrap{width:80px;height:80px;margin-bottom:18px;align-self:center;background:var(--bf);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}
.pack-icon-wrap svg{width:42px;height:42px;stroke:var(--gold3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}
.pack-card.featured .pack-icon-wrap{background:var(--bf2)}
.pack-card.featured .pack-icon-wrap svg{stroke:var(--fire3)}
.pack-icon-wrap{transition:box-shadow .35s ease}
.pack-icon-wrap svg{transition:stroke .35s ease}
.pack-card:hover .pack-icon-wrap{box-shadow:0 0 0 4px var(--bf),0 0 0 8px var(--bf),0 0 22px 6px var(--bf2)}
.pack-card.featured:hover .pack-icon-wrap{box-shadow:0 0 0 4px var(--bf),0 0 0 8px var(--bf),0 0 24px 8px var(--bf)}
.pack-card:hover .pack-icon-wrap svg{stroke:var(--gold3)}
.pack-card.featured:hover .pack-icon-wrap svg{stroke:var(--fire3)}

.pack-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--tx1);text-align:center;margin-bottom:6px}
.pack-price{font-family:'Cinzel',serif;font-size:2rem;font-weight:900;color:var(--gold3);text-align:center;line-height:1.1}
.pack-period{font-size:11px;color:var(--tx4);text-align:center;margin-bottom:14px}
.pack-list{list-style:none;flex:1;margin-bottom:18px;min-height:0;width:100%}
.pack-list li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--bf);font-size:13px;color:var(--tx2)}
.pack-list li:last-child{border-bottom:none}
.ck{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold1),var(--gold3));
  color:var(--c0);font-size:10px;font-weight:900;
  box-shadow:0 0 8px var(--bf);
}
.btn-pack{width:100%;font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:2px;padding:12px;border-radius:4px;cursor:pointer;text-transform:uppercase;transition:.2s;border:1px solid var(--fire2);background:linear-gradient(135deg,var(--fire1),var(--c2));color:var(--gold3)}
.btn-pack:hover{background:linear-gradient(135deg,var(--fire2),var(--fire1));color:#fff}
.btn-pack.featured{border-color:var(--fire3);background:linear-gradient(135deg,var(--fire1),var(--fire3));color:#fff;transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease}
.btn-pack.featured:hover{transform:scale(1.06);box-shadow:0 6px 24px var(--bf2);background:linear-gradient(135deg,var(--fire3),var(--fire2));color:#fff}
.btn-pack.featured:active{transform:scale(1.02)}
.pago-metodos{background:var(--c1);border:1px solid var(--bf);border-radius:6px;padding:22px;text-align:center}
.pago-titulo{font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:3px;color:var(--fire2);text-transform:uppercase;margin-bottom:14px}
.pago-lista{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--tx3);margin-bottom:12px}
.pago-contacto{font-size:13px;color:var(--tx3)}
.pay-contact a{color:var(--fire3)}
@keyframes cardFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.pack-card:nth-child(1){animation:cardFadeUp .5s .1s both}
.pack-card:nth-child(2){animation:cardFadeUp .5s .25s both}
.pack-card:nth-child(3){animation:cardFadeUp .5s .4s both}

/* ══════════════════════════════════
   DESCARGAS
══════════════════════════════════ */
.desc-wrap{max-width:760px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,3rem) 3rem;position:relative;z-index:2}
.dl-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn-dl{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;padding:9px 18px;border-radius:4px;cursor:pointer;text-transform:uppercase;transition:.2s;text-decoration:none;flex:1;min-width:120px;}
.btn-mf{background:linear-gradient(135deg,#0a1a3a,#1a3a6a);border:1px solid #3a6abf;color:#7aaeff}
.btn-mf:hover{background:linear-gradient(135deg,#1a3a6a,#2a4a8a);color:#aaccff}
.btn-gd{background:linear-gradient(135deg,#1a3a0a,#2a5a10);border:1px solid #4a8a20;color:#7ddb81}
.btn-gd:hover{background:linear-gradient(135deg,#2a5a10,#3a7a18)}
.btn-mg{background:linear-gradient(135deg,#3a0808,#6a1010);border:1px solid #cc2222;color:#ff8888}
.btn-mg:hover{background:linear-gradient(135deg,#6a1010,#8a1818);color:#ffaaaa}
.req-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.req-card{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 60%,var(--c2)) 0%,var(--c2) 100%);border:1px solid var(--bf);border-radius:4px;padding:12px;text-align:center;position:relative;overflow:hidden;transition:background .2s,border-color .2s,box-shadow .2s,transform .18s;box-shadow:0 2px 8px rgba(0,0,0,.22);}
.req-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--fire2),var(--gold3));transform:scaleX(0);transform-origin:left;transition:transform .28s;}
.req-card:hover{border-color:color-mix(in srgb,var(--gold3) 30%,var(--bf));transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.3),0 0 14px color-mix(in srgb,var(--fire3) 15%,transparent);}
.req-card:hover::before{transform:scaleX(1);}

/* ══════════════════════════════════
   REGISTRO
══════════════════════════════════ */
.reg-wrap{max-width:540px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2rem) 3rem;position:relative;z-index:2}
.field{margin-bottom:16px}
.lbl{font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--fire2);text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.req{color:var(--fire3)}

.inp{
  width:100%;padding:11px 14px;
  background:var(--c1);border:1px solid var(--bf);border-radius:4px;
  color:var(--tx1);font-family:'Exo 2',sans-serif;font-size:16px;
  transition:border-color .2s;outline:none;
  -webkit-appearance:none;appearance:none;
}
.inp:focus{border-color:var(--fire3)}
.inp.error{border-color:var(--fire2)}
select.inp{cursor:pointer}
.err-msg{font-size:12px;color:#ff6666;margin-top:4px;display:none}
.info-box{background:var(--bf);border:1px solid var(--bf);border-radius:4px;padding:10px 12px;font-size:13px;color:var(--tx3);line-height:1.6;margin-bottom:14px}
.warn-box{background:var(--bf);border:1px solid var(--bf);border-radius:4px;padding:10px 12px;font-size:13px;color:var(--tx3);line-height:1.6;margin-bottom:14px}
.check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:13px;color:var(--tx3)}
.check-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--fire3)}
.btn-submit{width:100%;font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:2px;padding:13px;border-radius:4px;cursor:pointer;text-transform:uppercase;border:1px solid var(--fire2);background:linear-gradient(135deg,var(--fire1),var(--c3));color:var(--gold3);transition:.2s}
.btn-submit:hover{background:linear-gradient(135deg,var(--fire2),var(--fire1));color:#fff;box-shadow:0 0 18px var(--bf)}

/* ══════════════════════════════════
   RESPONSIVE PAGES
══════════════════════════════════ */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;text-align:center;padding:5rem 1.5rem 3rem}
  .hero-left{max-width:100%}
  .hero-sub{margin:0 auto 2.2rem}
  .hero-btns{justify-content:center}
  .phoenix-scene{width:clamp(240px,70vw,340px);height:clamp(240px,70vw,340px)}
  .phoenix-logo{width:clamp(180px,55vw,260px);height:clamp(180px,55vw,260px)}
  .scroll-hint{display:none}
  .info-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .sidebar-toggle{display:block}
  .sidebar-nav{display:none}
  .sidebar-nav.open{display:block}
  .packs-grid{grid-template-columns:1fr}
  .pack-wrap{width:100%}
  .features-section{grid-template-columns:1fr}
  .req-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero{padding:4.5rem 1rem 2.5rem}
  .stats-row{flex-wrap:wrap}
  .stat-c{min-width:calc(50% - 1px)}
  .countdown-timer{gap:6px}
  .cd-unit{padding:10px 12px;min-width:54px}
  .countdown-wrap{padding:1.4rem 1rem}
  .packs-grid{gap:14px}
  .pack-card{padding:22px 16px}
  .dl-btns{flex-direction:column}
  .req-grid{grid-template-columns:1fr 1fr}
  .feats-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .cd-num{font-size:1.6rem}
  .cd-sep{font-size:1.2rem}
  .stats-row .stat-c{min-width:100%}
}

/* Sidebar nav mobile toggle */
@media(max-width:960px){
  .sidebar-nav{display:none}
  .sidebar-nav.open{display:block}
}


/* ── Registro — Mobile ── */
@media(max-width:600px){
  .reg-wrap{
    padding:1rem 1rem 3rem;
    width:100%;
    box-sizing:border-box;
    max-width:100%;
  }
  .reg-wrap form{
    width:100%;
    box-sizing:border-box;
  }
  .field{box-sizing:border-box;width:100%}
  .inp{
    width:100%;
    box-sizing:border-box;
    font-size:16px; /* evita zoom en iOS */
  }
  /* Row del sufijo: apilar verticalmente en mobile */
  .sufijo-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  .sufijo-row select.inp{
    max-width:100% !important;
    width:100% !important;
  }
  .login-preview{
    width:100%;
    box-sizing:border-box;
  }
  .check-row{font-size:13px}
  .btn-submit{font-size:11px;letter-spacing:1px}
}
@media(max-width:380px){
  .reg-wrap{padding:.8rem .8rem 3rem}
  .inp{padding:9px 10px;font-size:15px}
}

/* ════════════════════════════════════════
   INFORMACIÓN — CSS completo estandarizado
   Todos los estilos de informacion.html van aquí
════════════════════════════════════════ */

/* ── Página layout ── */
.info-page { padding-top: var(--nav-h,64px); min-height: 100vh; }

/* ── Header ── */
.info-header {
  text-align: center;
  padding: clamp(2rem,4vh,3rem) clamp(1rem,4vw,3rem) 1.5rem;
  border-bottom: 1px solid var(--bf);
  background: transparent;
}
.info-header .eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: var(--fire2); margin-bottom: .5rem;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.info-header .eyebrow::before { content: ''; height: 1px; width: 36px; background: linear-gradient(270deg,var(--fire2),transparent); }
.info-header .eyebrow::after  { content: ''; height: 1px; width: 36px; background: linear-gradient(90deg,var(--fire2),transparent); }
.info-header h1 {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: clamp(1.6rem,4vw,2.8rem); color: var(--tx1); margin-bottom: .3rem;
}
.info-header h1 span {
  background: linear-gradient(135deg, var(--gold1), var(--gold4) 50%, var(--gold2));
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { 0%{background-position:0% center} 100%{background-position:200% center} }
.info-header p { font-size: .85rem; color: var(--tx4); letter-spacing: 1px; }

/* ── Shell contenedor principal ── */
.info-shell {
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - var(--nav-h,64px));
  display: flex;
  flex-direction: column;
}

/* ── Header dentro del shell ── */
.info-shell-header {
  text-align: center;
  padding: clamp(2rem,4vh,3rem) clamp(1rem,4vw,3rem) 1.5rem;
  border-bottom: 1px solid var(--bf);
  flex-shrink: 0;
}

/* ── Layout 2 columnas ── */
.info-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  flex: 1;
}

/* ── Sidebar ── */
.info-sidebar {
  background: transparent;
  position: sticky;
  top: var(--nav-h,64px);
  height: calc(100vh - var(--nav-h,64px));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--fire2) var(--c0);
  align-self: start;
  padding-top: 2rem;
}
.info-sidebar::-webkit-scrollbar { width: 3px; }
.info-sidebar::-webkit-scrollbar-thumb { background: var(--fire2); }
.sidebar-toggle {
  display: none; width: 100%; padding: 11px 16px;
  background: var(--bf); border: none; border-bottom: 1px solid var(--bf);
  color: var(--tx2); font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer; text-align: left;
  position: sticky; top: 0; z-index: 10;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--tx3);
  transition: all .18s; user-select: none; border: none; background: none;
  width: 100%; text-align: left; border-left: 2px solid transparent;
}
.sidebar-item:hover { background: var(--bf); color: var(--tx2); border-left-color: var(--bf); }
.sidebar-item.active { background: var(--bf); color: var(--gold3); border-left: 2px solid var(--fire2); font-weight: 700; }
.sidebar-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }

/* ── Content area ── */
.info-content { padding: 2rem 2.5rem 3rem; min-width: 0; max-width: 100%; border-left: 1px solid var(--bf); overflow-x: clip; overflow-clip-margin: 14px; }
.section { display: none; }
.section.active { display: block; animation: secFade .3s ease; max-width: 100%; overflow-x: clip; overflow-clip-margin: 14px; }
@keyframes secFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Section title ── */
.sec-title {
  font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700;
  color: var(--tx1); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: .8rem; border-bottom: 1px solid var(--bf);
}

/* ── Description paragraph ── */
.sec-desc { font-size: 15px; color: var(--tx3); line-height: 1.75; margin-bottom: 1.5rem; }

/* ── Rate cards ── */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 12px; margin-bottom: 22px; }
.rate-card {
  background: linear-gradient(180deg, color-mix(in srgb,var(--c1) 78%,#000) 0%, var(--c1) 100%);
  border: 1px solid var(--bf); border-radius: 8px;
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .18s;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.26), inset 0 1px 0 color-mix(in srgb,var(--gold3) 10%,transparent);
}
.rate-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--fire3); opacity: 0; transition: opacity .2s;
}
.rate-card:hover {
  border-color: color-mix(in srgb,var(--gold3) 32%,var(--bf));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.32), 0 0 16px color-mix(in srgb,var(--fire3) 16%,transparent);
}
.rate-card:hover::before { opacity: .85; }
.rate-icon { font-size: 22px; flex-shrink: 0; }
.rate-icon svg { width: 22px !important; height: 22px !important; }
.rate-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tx4); margin-bottom: 4px; }
.rate-value { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold3); }

/* ── Feature groups — siempre 2 columnas ── */
.features-section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.features-group { background: var(--c1); border: 1px solid var(--bf); border-radius: 8px; padding: 18px; transition: border-color .2s; }
.features-group:hover { border-color: var(--bf2); }
.features-group-title {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--fire2);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bf);
  display: flex; align-items: center; gap: 8px;
}
.feat-card { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bf); }
.feat-card:last-child { border-bottom: none; }
.ench-scroll-grid .feat-card:nth-last-child(2) { border-bottom: none; }
.feat-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--fire3); margin-top: 1px; }
.feat-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat-name { font-size: 14px; font-weight: 600; color: var(--tx2); margin-bottom: 3px; }
.feat-desc { font-size: 13px; color: var(--tx4); line-height: 1.55; }

/* ── Info / Warn boxes ── */
.info-box { background: var(--bf); border: 1px solid var(--bf); border-radius: 5px; padding: 13px 16px; font-size: 14px; color: var(--tx3); line-height: 1.7; margin-bottom: 16px; }
.warn-box { background: var(--bf); border: 1px solid var(--bf); border-left: 3px solid var(--fire2); border-radius: 5px; padding: 13px 16px; font-size: 14px; color: var(--tx3); line-height: 1.7; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.warn-box .warn-icon { font-size: 18px; flex-shrink: 0; display: flex; align-items: center; }

/* ── Stat cards grandes (Olimpiadas) ── */
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: var(--c1); border: 1px solid var(--bf); border-radius: 8px;
  padding: 22px 16px; text-align: center; transition: background .2s, border-color .2s;
}
.stat-card:hover { border-color: var(--bf2); background: var(--c2); }
.stat-card-icon,
.stat-card [style*="border-radius:50%"] {
  width: 48px !important; height: 48px !important;
  background: var(--bf) !important;
  border: 1px solid var(--bf) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 12px !important; color: var(--gold3) !important;
}
.stat-card-icon svg,
.stat-card [style*="border-radius:50%"] svg {
  width: 22px !important; height: 22px !important;
  fill: none !important; stroke: var(--gold3) !important;
  stroke-width: 1.8 !important;
}
.stat-card-val { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 900; color: var(--gold3); margin-bottom: 4px; }
.stat-card-lbl { font-size: 12px; color: var(--tx4); letter-spacing: 1px; }

/* ── Enchant section ── */
.ench-badges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.ench-tables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ench-scroll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.ench-badge {
  background: var(--c1); border: 1px solid var(--bf); border-radius: 8px;
  padding: 18px 20px; display: flex; align-items: center; gap: 16px;
  transition: background .2s, border-color .2s;
  cursor: default;
}
.ench-badge:hover { background: var(--c2); border-color: var(--bf2); }
.ench-icon-wrap { width: 64px; height: 64px; background: var(--bf); border: 1px solid var(--bf); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ench-icon-wrap svg { width: 34px; height: 34px; fill: none; stroke: var(--gold3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ench-badge-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--tx4); text-transform: uppercase; margin-bottom: 4px; }
.ench-badge-num { font-family: 'Cinzel', serif; font-size: 2.6rem; font-weight: 900; color: var(--gold3); line-height: 1; }
.ench-badge-desc { font-size: 13px; color: var(--tx3); margin-top: 3px; }
.ench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ench-table-wrap { background: var(--c1); border: 1px solid var(--bf); border-radius: 8px; padding: 18px; overflow-x: auto; max-width: 100%; }
.ench-table-title { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--fire3); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ench-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 280px; }
.ench-table th { text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tx4); border-bottom: 1px solid var(--bf); }
.ench-table td { padding: 9px 12px; border-bottom: 1px solid var(--bf); color: var(--tx3); font-size: 13px; }
.ench-table tbody tr:last-child td { border-bottom: none; }
.ench-table tbody tr:hover td { background: var(--bf); }
.ench-val { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold3); font-size: 14px; }
.scroll-types-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.scroll-type-card { background: var(--c1); border: 1px solid var(--bf); border-radius: 6px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.scroll-type-name { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; color: var(--tx2); margin-bottom: 3px; }
.scroll-type-desc { font-size: 13px; color: var(--tx4); }
.badge-drop { background: rgba(74,100,200,.18); border: 1px solid rgba(74,100,200,.35); color: #8899ff; font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 3px; letter-spacing: 1px; flex-shrink: 0; font-family: 'Cinzel', serif; }
.badge-rare { background: rgba(140,60,200,.18); border: 1px solid rgba(140,60,200,.35); color: #cc88ff; font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 3px; letter-spacing: 1px; flex-shrink: 0; font-family: 'Cinzel', serif; }

/* ── Olimpiadas calendar ── */
.oly-calendar { background: var(--c1); border: 1px solid var(--bf); border-radius: 8px; padding: 22px; overflow-x: hidden; max-width: 100%; margin-bottom: 14px; }
.oly-cal-title { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--fire3); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.oly-cal-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oly-steps { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.oly-step { text-align: center; }
.oly-step-box {
  width: 68px; height: 68px;
  background: var(--bf); border: 1px solid var(--bf2); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 900; color: var(--gold3);
  margin: 0 auto 8px;
}
.oly-step-lbl { font-size: 12px; color: var(--tx4); }
.oly-arrow { color: var(--tx4); opacity: .5; display: flex; align-items: center; align-self: center; }
.oly-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.oly-info-items { display: flex; flex-direction: column; gap: 10px; }
.oly-info-item { background: var(--c2); border: 1px solid var(--bf); border-radius: 5px; padding: 14px 18px; }
.oly-info-item-title { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; color: var(--fire3); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.oly-info-item-title svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.oly-info-item p { font-size: 14px; color: var(--tx3); line-height: 1.65; }
.oly-equip { background: var(--c1); border: 1px solid var(--bf); border-radius: 8px; padding: 20px; box-sizing: border-box; width: 100%; }
.oly-equip-title { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--fire3); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.oly-equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; box-sizing: border-box; padding: 0 1px; }
.oly-equip-card { background: var(--c2); border: 1px solid var(--bf); border-radius: 5px; padding: 14px 18px; min-width: 0; box-sizing: border-box; }
.oly-equip-card-title { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; color: var(--tx1); margin-bottom: 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oly-equip-card-title .inner { display: flex; align-items: center; gap: 8px; }
.oly-equip-badge { font-size: 9px; padding: 2px 8px; border-radius: 3px; letter-spacing: 1px; font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.oly-equip-badge--green { background: rgba(76,175,80,.2); border: 1px solid rgba(76,175,80,.4); color: #7ddb81; }
.oly-equip-badge--red   { background: rgba(204,34,34,.2);  border: 1px solid rgba(204,34,34,.4);  color: #ff6666; }
.oly-equip-card p { font-size: 13px; color: var(--tx3); line-height: 1.55; }
.badge-ok { font-size: 9px; background: rgba(76,175,80,.2); border: 1px solid rgba(76,175,80,.4); color: #7ddb81; padding: 2px 8px; border-radius: 3px; letter-spacing: 1px; font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.badge-info { font-size: 9px; background: rgba(74,100,200,.18); border: 1px solid rgba(74,100,200,.35); color: #8899ff; padding: 2px 8px; border-radius: 3px; letter-spacing: 1px; font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.badge-ban { font-size: 9px; background: var(--bf); border: 1px solid var(--bf2); color: var(--fire3); padding: 2px 8px; border-radius: 3px; letter-spacing: 1px; font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* ── Items grid ── */
.items-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item-card {
  background: var(--c1); border: 1px solid var(--bf); border-radius: 8px;
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px;
  transition: all .2s;
}
.item-card:hover { background: var(--c2); border-color: var(--bf2); }
.item-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.item-name { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; color: var(--tx1); margin-bottom: 4px; }
.item-desc { font-size: 13px; color: var(--tx3); line-height: 1.55; }

/* ── Eventos grid ── */
.ev-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-card {
  background: var(--c1); border: 1px solid var(--bf); border-radius: 8px;
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px;
  transition: all .2s;
}
.ev-card:hover { background: var(--c2); border-color: var(--bf2); }
.ev-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.ev-name { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; color: var(--tx1); margin-bottom: 4px; }
.ev-desc { font-size: 13px; color: var(--tx3); line-height: 1.55; margin-bottom: 7px; }
.ev-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--fire3); background: var(--bf); border: 1px solid var(--bf); padding: 2px 8px; border-radius: 3px; font-family: 'Cinzel', serif; }

/* ── Social grid ── */
.social-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.social-card {
  background: var(--c1); border: 1px solid var(--bf); border-radius: 8px;
  padding: 20px 16px; text-align: center;
  transition: all .22s; display: block; cursor: pointer;
}
.social-card:hover { background: var(--c2); border-color: var(--fire2); box-shadow: 0 0 16px var(--bf); }
.social-icon { margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--bf); border: 1px solid var(--bf); border-radius: 10px; }
.social-icon svg { width: 28px; height: 28px; }
.social-name { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: var(--tx2); letter-spacing: 1px; }
.social-card:hover .social-name { color: var(--gold3); }

/* ── Reglas ── */
.rules-list { display: flex; flex-direction: column; gap: 10px; }
.rule-item { background: var(--c1); border: 1px solid var(--bf); border-radius: 6px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 14px; transition: background .18s; }
.rule-item:hover { background: var(--c2); }
.rule-num { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 900; color: var(--fire2); flex-shrink: 0; min-width: 28px; }
.rule-title { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; color: var(--fire3); margin-bottom: 4px; }
.rule-text { font-size: 13px; color: var(--tx3); line-height: 1.65; }

/* ── Responsive Info ── */
@media(max-width:1100px) {
  .stat-cards { grid-template-columns: repeat(2,1fr); }
  .social-grid { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:960px) {
  .info-shell { min-height: auto; }
  .info-layout { grid-template-columns: 1fr; }
  .info-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--bf); align-self: auto; }
  .sidebar-toggle { display: block; }
  .sidebar-items { display: none; }
  .sidebar-items.open { display: block; }
  .ench-badges, .ench-grid, .scroll-types-grid { grid-template-columns: 1fr; }
  .ench-badges-grid { grid-template-columns: 1fr; }
  .ench-tables-grid { grid-template-columns: 1fr; }
  .ench-scroll-grid { grid-template-columns: 1fr; }
  .features-section { grid-template-columns: 1fr; }
  .oly-equip-grid { grid-template-columns: 1fr; }
  .info-content { border-left: none; border-top: 1px solid var(--bf); }
}
@media(max-width:700px) {
  .info-content { padding: 1.2rem; }
  /* Rate cards 1 columna en mobile */
  .rate-cards { grid-template-columns: 1fr !important; gap: 8px; }
  .rate-card { padding: 10px 14px; }
  /* Enchant */
  .ench-badges-grid { grid-template-columns: 1fr; }
  .ench-tables-grid { grid-template-columns: 1fr; }
  .ench-scroll-grid { grid-template-columns: 1fr; }
  .ench-badges { grid-template-columns: 1fr; }
  .ench-badge { flex-direction: row; align-items: center; gap: 12px; }
  .ench-icon-wrap { width: 48px; height: 48px; flex-shrink: 0; }
  .ench-icon-wrap svg { width: 24px; height: 24px; }
  .ench-badge-num { font-size: 2rem; }
  .ench-grid { grid-template-columns: 1fr; }
  .ench-table th, .ench-table td { padding: 7px 8px; font-size: 12px; }
  .scroll-types-grid { grid-template-columns: 1fr; }
  /* Olimpiadas */
  .oly-steps { flex-direction: column; align-items: center; gap: 6px; }
  .oly-arrow { transform: rotate(90deg); }
  .oly-step-box { width: 54px; height: 54px; font-size: 1.4rem; }
  .oly-equip { padding: 14px; }
  .oly-equip-grid { grid-template-columns: 1fr; gap: 10px; }
  .oly-equip-card { padding: 12px 14px; max-width: 100%; }
  .oly-equip-badge { white-space: normal; word-break: break-word; }
  /* General */
  .features-section { grid-template-columns: 1fr; }
  .items-grid { grid-template-columns: 1fr; }
  .ev-list { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2,1fr); }
  .stat-cards { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:420px) {
  .ench-badge-num { font-size: 1.6rem; }
  .stat-cards { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2,1fr); }
  .oly-step-box { width: 46px; height: 46px; font-size: 1.2rem; }
  .ench-table th, .ench-table td { padding: 6px; font-size: 11px; }
}

/* Fix variable --gold-dark (proyecto anterior) */
.section svg[stroke="var(--gold-dark)"] { stroke: var(--gold3) !important; }
.info-content svg[stroke="var(--gold-dark)"] { stroke: var(--gold3) !important; }

/* ── Donaciones badge + grid fix ── */

/* ══════════════════════════════════════════════
   UCP — Panel de Usuario
══════════════════════════════════════════════ */
.ucp-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.ucp-wrap .field-group { margin-bottom: 14px; }
.ucp-wrap .btn-submit {
  width: 100%; padding: 12px;
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(135deg,var(--fire1),var(--fire3));
  color: #fff; border: none; border-radius: 4px; cursor: pointer;
  transition: opacity .2s, transform .2s;
  margin-bottom: 10px;
}
.ucp-wrap .btn-submit:hover { opacity: .85; transform: translateY(-1px); }
.ucp-wrap .btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.form-msg { padding: 10px 14px; border-radius: 4px; text-align: center; font-size: 13px; margin-top: 6px; }
.ucp-links { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 14px; font-size: 13px; color: var(--tx3); }
.ucp-links a { color: var(--gold3); text-decoration: none; }
.ucp-links a:hover { color: var(--gold4); }

/* ── Botón fire dinámico ─────────────────────────── */
.btn-fire{background:linear-gradient(135deg,var(--fire1),var(--fire2));color:#fff;border:1px solid var(--fire2)}
.btn-fire:hover{background:linear-gradient(135deg,var(--fire2),var(--fire3));box-shadow:0 0 20px var(--bf2);color:#fff}

/* reCAPTCHA responsive */
.g-recaptcha{transform-origin:left center;transform:scale(1)}
@media(max-width:400px){
  .g-recaptcha{transform:scale(0.85);transform-origin:left center}
}

/* ════════════════════════════════════════════════════════════════
   MODERNIZACIÓN WEB PÚBLICA — Ranking de jugadores (tabla principal)
   lote_publico_ranking_20260608
   Scopeado a #main-tbl-wrap → NO toca el ranking del UCP (.rpg-section,
   ya modernizado) ni el boss-map (#boss-categories-wrap, overrides
   propios en el inline de ranking.php). Mismo lenguaje que el UCP.
   ════════════════════════════════════════════════════════════════ */
#main-tbl-wrap .rtbl thead{
  background:linear-gradient(180deg,color-mix(in srgb,var(--fire2) 10%,transparent),transparent);
}
#main-tbl-wrap .rtbl th{
  color:var(--gold3);
  border-bottom:1px solid color-mix(in srgb,var(--fire3) 30%,transparent);
}
#main-tbl-wrap .rtbl tbody tr td{position:relative}
#main-tbl-wrap .rtbl tbody tr:hover td{
  background:color-mix(in srgb,var(--fire2) 12%,transparent);
}
#main-tbl-wrap .rtbl tbody tr:hover td:first-child{
  box-shadow:inset 3px 0 0 var(--fire3);
  color:var(--tx1);
}
/* Top-3 sin color de posición (igual que el ranking del UCP): los nombres/
   datos van en color normal; el realce queda en medallas + flash de entrada. */
#main-tbl-wrap .rtbl tbody tr:nth-child(1) td,
#main-tbl-wrap .rtbl tbody tr:nth-child(2) td,
#main-tbl-wrap .rtbl tbody tr:nth-child(3) td{color:var(--tx2)}

/* ════════════════════════════════════════════════════════════════
   MODERNIZACIÓN WEB PÚBLICA — Registro (lote_publico_registro_20260608)
   Scopeado a .reg-wrap para no afectar .inp/.field de otras páginas
   (login, reset, panel comparten esas clases). Todo con variables.
   ════════════════════════════════════════════════════════════════ */
/* Tarjeta del formulario: contención visual + profundidad */
.reg-wrap form{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 70%,var(--c2)) 0%,var(--c1) 100%);
  border:1px solid color-mix(in srgb,var(--fire2) 22%,var(--bf));
  border-radius:14px;
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 10px 40px rgba(0,0,0,.35),0 0 50px color-mix(in srgb,var(--fire1) 10%,transparent);
}
/* Inputs con profundidad y foco con glow dorado (scopeado a registro) */
.reg-wrap .inp{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c0) 50%,var(--c1)) 0%,var(--c1) 100%);
  border:1px solid color-mix(in srgb,var(--fire2) 20%,var(--bf));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
  transition:border-color .2s,box-shadow .2s;
}
.reg-wrap .inp:focus{
  border-color:var(--gold3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 0 0 3px color-mix(in srgb,var(--gold3) 18%,transparent),0 0 14px color-mix(in srgb,var(--gold3) 16%,transparent);
}
/* Checkbox custom dorado (exclusivo de registro) */
.check-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin-top:1px;flex-shrink:0;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--gold3) 40%,var(--bf));
  border-radius:5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c0) 50%,var(--c1)),var(--c1));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
  transition:all .18s;position:relative;
}
.check-row input[type=checkbox]:hover{
  border-color:var(--gold3);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 0 8px color-mix(in srgb,var(--gold3) 25%,transparent);
}
.check-row input[type=checkbox]:checked{
  background:linear-gradient(135deg,var(--gold2),var(--gold3));
  border-color:var(--gold3);
  box-shadow:0 0 10px color-mix(in srgb,var(--gold3) 45%,transparent);
}
.check-row input[type=checkbox]:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--c0);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.check-row input[type=checkbox]:focus-visible{
  outline:2px solid color-mix(in srgb,var(--gold3) 60%,transparent);outline-offset:2px;
}

/* ── Select custom del sufijo (reemplaza el desplegable nativo blanco) ── */
.sufijo-cs{position:relative;width:130px;flex-shrink:0;font-family:'Exo 2',sans-serif}
.sufijo-cs-btn{
  width:100%;padding:11px 14px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c0) 50%,var(--c1)) 0%,var(--c1) 100%);
  border:1px solid color-mix(in srgb,var(--fire2) 20%,var(--bf));border-radius:4px;
  color:var(--tx1);font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);transition:border-color .2s,box-shadow .2s;
}
.sufijo-cs-btn:hover{border-color:color-mix(in srgb,var(--gold3) 35%,var(--bf))}
.sufijo-cs.open .sufijo-cs-btn{border-color:var(--gold3);box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 0 0 3px color-mix(in srgb,var(--gold3) 18%,transparent)}
.sufijo-cs-arrow{color:var(--fire3);font-size:11px;transition:transform .2s}
.sufijo-cs.open .sufijo-cs-arrow{transform:rotate(180deg)}
.sufijo-cs-list{
  position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:30;
  background:linear-gradient(180deg,var(--c1),var(--c0));
  border:1px solid color-mix(in srgb,var(--fire2) 40%,var(--bf));border-radius:8px;overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.6),0 0 20px color-mix(in srgb,var(--fire1) 14%,transparent);
  display:none;
}
.sufijo-cs.open .sufijo-cs-list{display:block}
.sufijo-cs-opt{
  padding:10px 14px;font-size:15px;color:var(--tx2);cursor:pointer;
  border-bottom:1px solid color-mix(in srgb,var(--bf) 60%,transparent);transition:background .15s,color .15s;
}
.sufijo-cs-opt:last-child{border-bottom:none}
.sufijo-cs-opt:hover{background:color-mix(in srgb,var(--fire1) 14%,transparent);color:var(--tx1)}
.sufijo-cs-opt.sel{
  background:color-mix(in srgb,var(--gold2) 12%,transparent);
  color:var(--gold3);font-weight:700;border-left:3px solid var(--gold3);padding-left:11px;
}