/* M2 Urano — capa visual premium (se carga después de style.css) */
:root{--blue:#5aa0ff;--side-w:290px}

/* ===== Índice lateral desplegable (escritorio) ===== */
.layout{transition:grid-template-columns .4s var(--ease)}
.sidebar{transition:transform .4s var(--ease),opacity .3s;background:linear-gradient(180deg,rgba(16,15,23,.92),rgba(10,9,14,.96));backdrop-filter:blur(10px)}
@media (min-width:901px){
  .layout.side-collapsed{grid-template-columns:0 minmax(0,1fr)}
  .layout.side-collapsed .sidebar{transform:translateX(-100%);opacity:0;pointer-events:none;border-right-color:transparent;padding-inline:0}
}
.menu-btn{display:grid!important;place-items:center;gap:0;align-content:center;padding:0;transition:background .25s,border-color .25s}
.menu-btn:hover{background:rgba(212,168,67,.12);border-color:var(--gold)}
.menu-btn span{display:block;width:18px;height:2px;margin:2.5px 0;border-radius:2px;background:var(--gold);transition:transform .3s var(--ease),opacity .2s,width .3s}
.menu-btn[aria-expanded="false"] span:nth-child(2){width:12px}
@media (min-width:901px){.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(0)}}

/* ===== Barra superior ===== */
.topbar{background:rgba(9,8,12,.72);border-bottom:1px solid rgba(212,168,67,.22);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.brand img{filter:drop-shadow(0 0 10px rgba(90,160,255,.7))}
.srv-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.72rem;color:#b9b1a5;white-space:nowrap}
.srv-pill i{width:8px;height:8px;border-radius:50%;background:#777;flex:none}
.srv-pill.up{border-color:rgba(70,200,120,.45);color:#9be8b8}
.srv-pill.up i{background:#38d27a;box-shadow:0 0 0 0 rgba(56,210,122,.7);animation:ping 1.8s infinite}
.srv-pill.down{border-color:rgba(192,41,43,.5);color:#ff9a9a}
.srv-pill.down i{background:#e0393b}
.srv-pill b{font-weight:600}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(56,210,122,0)}100%{box-shadow:0 0 0 0 rgba(56,210,122,0)}}
@media (max-width:1100px){.srv-pill b{display:none}.srv-pill{padding:8px}}

/* ===== Botones ===== */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn-primary{background:linear-gradient(135deg,#8b1a1a,#d6302f 60%,#ff5a3c);box-shadow:0 8px 28px rgba(214,48,47,.4)}
.btn-pair{display:flex;flex-wrap:wrap;gap:10px}

/* ===== Hero ===== */
.hero{min-height:calc(100vh - var(--top));padding:80px 24px 110px}
.hero-bg{background:
  radial-gradient(ellipse 60% 55% at 50% 36%,rgba(90,160,255,.18),transparent 70%),
  radial-gradient(ellipse 50% 40% at 15% 90%,rgba(192,41,43,.22),transparent 70%),
  radial-gradient(ellipse 50% 40% at 85% 90%,rgba(212,168,67,.14),transparent 70%);
  animation:heroDrift 14s ease-in-out infinite alternate}
@keyframes heroDrift{to{transform:scale(1.08) translateY(-12px)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(212,168,67,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(212,168,67,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}
.hero-eyebrow{padding:7px 18px;border:1px solid var(--line);border-radius:99px;background:rgba(212,168,67,.06);letter-spacing:4px;font-size:.66rem}
.emblem img{width:min(230px,52vw);transition:transform .2s ease-out;will-change:transform}
.hero-title{font:900 clamp(2.2rem,6.4vw,4.6rem)/1.05 Cinzel,serif;letter-spacing:2px;color:#fff;margin:4px 0 10px;text-shadow:0 6px 40px rgba(0,0,0,.7)}
.hero-title em{font-style:normal;background:linear-gradient(90deg,#b8862a,#ffe9a8 35%,#d4a843 55%,#ff7b5a 85%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
.lead{font-size:clamp(1.05rem,2.2vw,1.35rem)}
.countdown-card{background:linear-gradient(160deg,rgba(26,22,36,.75),rgba(14,12,20,.75));border-color:rgba(212,168,67,.3);box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(212,168,67,.5);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ===== Marquesina ===== */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(139,26,26,.25),rgba(16,15,23,.6),rgba(139,26,26,.25));padding:14px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:34px;animation:marq 38s linear infinite}
.marquee-track span{font:700 .85rem Cinzel,serif;letter-spacing:5px;color:var(--gold2)}
.marquee-track span:nth-child(even){color:var(--red2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===== Estadísticas ===== */
.stats{border:0;gap:14px;padding:46px clamp(16px,4vw,40px) 0}
.stat{border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,var(--bg3),var(--bg2));padding:28px 12px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.stat b{font-size:clamp(1.8rem,3.4vw,2.6rem);background:linear-gradient(180deg,#fff3c4,#d4a843);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat i{font-style:normal}

/* ===== Secciones ===== */
main{counter-reset:sec}
.sec{position:relative}
.sec:not(.closing)>.eyebrow::before{counter-increment:sec;content:"0" counter(sec) "  ";color:var(--red2);margin-right:6px}
.sec h2{background:linear-gradient(180deg,#fff,#cdbf9a);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;padding-bottom:16px}
.sec h2::after{content:"";position:absolute;left:0;bottom:0;width:70px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--red2));transition:width .6s var(--ease)}
.sec:hover h2::after{width:130px}
.closing h2::after{left:50%;transform:translateX(-50%)}

/* ===== Tarjetas con foco de luz que sigue al ratón ===== */
.card,.map,.class,.steps li,.stat{--mx:50%;--my:50%}
.card::before,.class::after,.steps li::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(212,168,67,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before,.class:hover::after,.steps li:hover::before{opacity:1}
.card,.class,.steps li{position:relative;overflow:hidden}
.card{background:linear-gradient(160deg,rgba(26,22,36,.92),rgba(14,12,20,.92));backdrop-filter:blur(4px)}
.ico{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;margin-bottom:14px;font-size:1.7rem;background:linear-gradient(135deg,rgba(139,26,26,.45),rgba(212,168,67,.18));border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.card:hover .ico,.class:hover .ico{transform:rotate(-6deg) scale(1.1)}
.steps li{transition:transform .35s var(--ease),border-color .35s}
.steps li:hover{transform:translateX(6px);border-color:rgba(212,168,67,.45)}
.num{box-shadow:0 0 0 6px rgba(192,41,43,.15),0 8px 20px rgba(192,41,43,.35)}

/* ===== Clases ===== */
.class{--c:#c0292b;min-height:210px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,transparent),var(--bg2) 75%);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.class[data-c="Ninja"]{--c:#2a8f6a}.class[data-c="Sura"]{--c:#6a3bb8}.class[data-c="Chamán"]{--c:#2f7fd6}
.class:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 18px 44px color-mix(in srgb,var(--c) 40%,transparent)}
.class .ico{background:color-mix(in srgb,var(--c) 35%,transparent)}
.class span{margin-top:auto}

/* ===== Mapas con arte por zona ===== */
.map{--a:#8b5a2b;--b:#2a1a10;padding:0;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}
.map[data-m="1"]{--a:#5b3aa8;--b:#150d2a}.map[data-m="2"]{--a:#1f8f86;--b:#08201f}.map[data-m="3"]{--a:#5a86b8;--b:#0c1626}
.map[data-m="4"]{--a:#c9a23a;--b:#241a06}.map[data-m="5"]{--a:#d6402a;--b:#2a0b06}.map[data-m="6"]{--a:#9a4cff;--b:#12071f}
.map::before{inset:0;height:auto;background:radial-gradient(ellipse 80% 70% at 70% 15%,color-mix(in srgb,var(--a) 70%,transparent),transparent 70%),linear-gradient(180deg,var(--b),#08070b);opacity:1;transition:transform .8s var(--ease)}
.map::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px);pointer-events:none}
.map:hover::before{transform:scale(1.12)}
.map header,.map p{position:relative;z-index:1;padding-inline:24px}
.map header{padding-top:90px;margin-bottom:6px}
.map p{padding-bottom:24px;color:#cfc7ba}
.map h3{font-size:1.25rem;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.map header span{color:var(--gold2)}
.map em{z-index:2}

/* ===== Escenarios 3D, evolución y chips ===== */
.stage{border-color:rgba(212,168,67,.28);box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 0 80px rgba(0,0,0,.35)}
.stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.evo li{background:linear-gradient(160deg,var(--bg3),var(--bg2))}
.evo li:hover{border-color:rgba(212,168,67,.5);transform:translateY(-3px)}
.evo li{transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.eq-icon img{image-rendering:auto}
.edit-cta{background:linear-gradient(120deg,rgba(212,168,67,.1),rgba(139,26,26,.1))}

/* ===== Eventos ===== */
#eventos .card:nth-child(odd) .ico{background:linear-gradient(135deg,rgba(30,90,200,.4),rgba(90,160,255,.15))}

/* ===== Cierre ===== */
.closing{padding-block:130px;background:radial-gradient(ellipse at 50% 0,rgba(214,48,47,.3),transparent 65%),radial-gradient(ellipse at 50% 100%,rgba(90,160,255,.12),transparent 60%)}
.closing h2{font-size:clamp(2.2rem,5.5vw,3.8rem)}

/* ===== Reveal robusto (si falla el JS se ve todo) ===== */
.reveal{opacity:0;transform:translateY(34px) scale(.98)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ===== Móvil ===== */
@media (max-width:900px){
  .hero{padding:60px 18px 100px}
  .stats{grid-template-columns:repeat(2,1fr);padding-top:30px}
  .stat:last-child{grid-column:1/-1}
  .sec{padding-block:64px}
  .map{min-height:200px}
  .map header{padding-top:70px}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .marquee-track{animation:none}
}

/* ===== Iconos de equipo en grande, suaves y con giro 3D ===== */
.eq-icon{perspective:900px}
.eq-icon img{image-rendering:auto;width:clamp(130px,22vw,190px);max-height:60%;object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(212,168,67,.5)) drop-shadow(0 16px 22px rgba(0,0,0,.75));
  animation:eqspin 9s ease-in-out infinite;transform-style:preserve-3d}
@keyframes eqspin{0%,100%{transform:translateY(0) rotateY(-24deg)}50%{transform:translateY(-10px) rotateY(24deg)}}
@media (prefers-reduced-motion:reduce){.eq-icon img{animation:none}}