/* EXYTOSA V31 · navbar centrado + menú editable + drawer móvil + banners fijos + mago MU + botón oferta */

/* ===== Botón hamburguesa / drawer (oculto en escritorio) ===== */
.exy-menu-btn{display:none;width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border,#26303f);border-radius:10px;background:var(--bg3,#0d1320);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.exy-menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--txt,#e8eef7);transition:transform .25s,opacity .2s}
body.exy-menu-open .exy-menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.exy-menu-open .exy-menu-btn span:nth-child(2){opacity:0}
body.exy-menu-open .exy-menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.exy-drawer-overlay{display:none}
.exy-drawer-head{display:none}
.exy-actions-empty{display:none!important}
.exy-side{display:flex;align-items:center;gap:8px;min-width:0}

/* ===== Items del menú ===== */
.navbar .nav-links .exy-nav-item{--nb:0,230,118;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--txt2,#b9c4d3);font:inherit;font-size:12px;font-weight:750;letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.navbar .nav-links .exy-nav-item svg{width:17px;height:17px;flex:0 0 17px}
.navbar .nav-links .exy-nav-item .exy-emoji{font-size:16px;line-height:1}
.navbar .nav-links .exy-nav-item:hover{color:var(--txt,#fff);background:rgba(0,230,118,.07);transform:translateY(-1px)}
.navbar .nav-links .exy-nav-item.is-active{color:var(--txt,#fff);background:rgba(0,230,118,.1);border-color:rgba(0,230,118,.3)}
.navbar .nav-links .exy-nav-item::after{display:none!important}
.navbar .nav-links .exy-nav-item.exy-pill{font-size:11px;font-weight:850;letter-spacing:.05em;color:rgb(var(--nb));border-color:rgba(var(--nb),.42);background:linear-gradient(135deg,rgba(var(--nb),.16),rgba(var(--nb),.05))}
.navbar .nav-links .exy-nav-item.exy-pill:hover,.navbar .nav-links .exy-nav-item.exy-pill.is-active{color:#fff;border-color:rgb(var(--nb));background:linear-gradient(135deg,rgba(var(--nb),.34),rgba(var(--nb),.12));box-shadow:0 0 22px rgba(var(--nb),.22)}
html[data-theme="light"] .navbar .nav-links .exy-nav-item{color:#44506a}
html[data-theme="light"] .navbar .nav-links .exy-nav-item:hover,html[data-theme="light"] .navbar .nav-links .exy-nav-item.is-active{color:#0b3d24;background:#e9fbf1}
html[data-theme="light"] .navbar .nav-links .exy-nav-item.exy-pill{color:color-mix(in srgb,rgb(var(--nb)) 58%,#000);background:linear-gradient(135deg,rgba(var(--nb),.18),rgba(var(--nb),.06))}
html[data-theme="light"] .navbar .nav-links .exy-nav-item.exy-pill:hover,html[data-theme="light"] .navbar .nav-links .exy-nav-item.exy-pill.is-active{color:#000;background:linear-gradient(135deg,rgba(var(--nb),.35),rgba(var(--nb),.14))}

/* ===== ESCRITORIO: dos filas centradas ===== */
@media(min-width:760px){
  .navbar{display:grid!important;grid-template-columns:1fr auto 1fr;grid-template-areas:"l c r" "m m m";align-items:center;column-gap:18px;row-gap:6px;height:auto!important;min-height:0!important;padding:8px max(20px,calc((100vw - 1320px)/2)) 6px!important;flex-wrap:nowrap}
  .navbar .logo{grid-area:c;justify-self:center;margin:0}
  .navbar .logo .logo-txt{font-size:23px}
  .navbar .logo .logo-icon img{width:42px;height:42px}
  .exy-side-left{grid-area:l;justify-self:start}
  .exy-side-right{grid-area:r;justify-self:end;gap:9px}
  .navbar .nav-links{grid-area:m;display:flex!important;width:100%;margin:0!important;padding:6px 0 0!important;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px!important;border-top:1px solid var(--border,rgba(255,255,255,.08));overflow:visible;height:auto}
  .exy-nav-item{flex:0 0 auto}
}

/* ===== MÓVIL / TABLET: drawer vertical deslizante ===== */
@media(max-width:759px){
  .navbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px!important;height:auto!important;min-height:56px;padding:8px 10px!important}
  .exy-menu-btn{display:flex}
  .navbar .logo{order:2;flex:0 1 auto;min-width:0}
  .navbar .logo .logo-txt{font-size:17px}
  .exy-side-left{order:3;margin-left:auto;gap:5px}
  .exy-side-right{order:4;gap:5px}
  .exy-side-left .lang-switch,.exy-side-right .nav-status{display:none!important}
  .navbar .nav-links{position:fixed!important;top:0;left:0;bottom:0;z-index:1200;width:min(84vw,320px);height:100dvh!important;margin:0!important;padding:0 0 28px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:6px!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border:0!important;border-right:1px solid rgba(0,230,118,.25)!important;background:linear-gradient(180deg,#07111c,#050912)!important;box-shadow:12px 0 40px rgba(0,0,0,.5);transform:translateX(-105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  html[data-theme="light"] .navbar .nav-links{background:linear-gradient(180deg,#ffffff,#f1f6ff)!important}
  body.exy-menu-open .navbar .nav-links{transform:none;visibility:visible}
  .exy-drawer-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;padding:16px 18px;margin-bottom:6px;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#00e676;background:inherit;border-bottom:1px solid rgba(0,230,118,.18)}
  .exy-drawer-head button{width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
  .navbar .nav-links .exy-nav-item{width:calc(100% - 24px);margin:0 12px;justify-content:flex-start;min-height:48px;padding:10px 14px;font-size:13px;border-radius:12px}
  .navbar .nav-links .exy-nav-item:not(.exy-pill){color:#d9e3ef;border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
  html[data-theme="light"] .navbar .nav-links .exy-nav-item:not(.exy-pill){color:#26324a;background:#fff;border-color:rgba(30,60,120,.1)}
  .navbar .nav-links .exy-nav-item svg{width:20px;height:20px;flex-basis:20px}
  .exy-drawer-overlay{display:block;position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s}
  body.exy-menu-open .exy-drawer-overlay{opacity:1;pointer-events:auto}
  body.exy-menu-open{overflow:hidden}
}
@media(max-width:430px){
  .navbar .logo .logo-txt{font-size:15px}
  .navbar .logo .logo-icon img{width:30px;height:30px}
  .live-toggle-btn .live-label{display:none}
  .exy-side-left .pwa-install-nav span{display:none}
}

/* ===== Banners laterales fijos (sticky) ===== */
.content-with-ads{align-items:flex-start}
.ad-left,.ad-right{position:sticky;top:112px;align-self:flex-start}
.ad-left.exy-has-ad #adLeftSlot1,.ad-right.exy-has-ad #adRightSlot1{display:none!important}
.exy-ad{position:relative;width:144px;height:min(540px,calc(100vh - 140px));min-height:260px;border-radius:12px;overflow:hidden;border:1px solid rgba(0,230,118,.22);background:#05080f;box-shadow:0 10px 30px rgba(0,0,0,.35);flex-shrink:0}
.exy-ad a{display:block;width:100%;height:100%}
.exy-ad img,.exy-ad video{display:block;width:100%;height:100%;object-fit:cover}
.exy-ad-html{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.exy-ad-tag{position:absolute;z-index:3;left:6px;top:6px;padding:2px 6px;border-radius:999px;background:rgba(0,0,0,.55);color:#d7e3f2;font-size:8px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
@media(max-width:1200px){.exy-ad{width:96px;height:min(420px,calc(100vh - 140px))}.exy-ad-tag{display:none}}
body.user-panel-mode .exy-ad{display:none}

/* ===== Mago estilo MU ===== */
.site-footer{padding-bottom:230px!important}
@media(min-width:760px) and (max-width:1100px){.exy-side-right .nav-status{display:none!important}.navbar{grid-template-columns:auto 1fr!important;grid-template-areas:"c r" "m m"!important;column-gap:10px!important}.navbar .logo{justify-self:start!important}.exy-side-left{display:none!important}}
.mu-wing{animation:muFlap 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.mu-wing-r{animation-delay:-.3s}
.mu-flame{animation:muFlick .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.mu-weyes{animation:muGlow 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mu-rider{animation:muBreath 3s ease-in-out infinite}
@keyframes muFlap{0%,100%{transform:translate(0,0) scaleY(1)}50%{transform:translate(0,-3px) scaleY(1.07)}}
@keyframes muFlick{from{transform:scale(1,.92) skewX(-3deg)}to{transform:scale(1.05,1.08) skewX(3deg)}}
.exy-mu-scene{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%);position:absolute;left:0;right:0;bottom:0;height:300px;pointer-events:none;z-index:4;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 12% 100%,rgba(106,77,255,.35),transparent 70%),linear-gradient(180deg,transparent 52%,rgba(14,10,40,.94) 78%,#070514 100%)}
.exy-mu-canvas{position:absolute;inset:0;width:100%;height:100%}
.exy-mu-wrap{position:absolute;left:-18px;bottom:0;width:clamp(200px,17vw,240px);transform-origin:50% 100%;transition:transform .25s ease-out;filter:drop-shadow(0 0 16px rgba(122,107,255,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.exy-mu-figure{display:block;width:100%;height:auto;overflow:visible}
.mu-orb{animation:muOrb 1.3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mu-orb-glow{animation:muGlow 1.3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mu-palm{animation:muGlow 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mu-eyes{animation:muBlink 5s infinite;transform-box:fill-box;transform-origin:center}
.mu-cape{animation:muCape 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.mu-ground{animation:muGlow 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes muBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}
@keyframes muOrb{0%,100%{transform:scale(.9)}50%{transform:scale(1.18)}}
@keyframes muGlow{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.2);opacity:1}}
@keyframes muBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes muCape{0%,100%{transform:skewX(0)}50%{transform:skewX(-2.5deg)}}
@media(max-width:600px){.site-footer{padding-bottom:190px!important}.exy-mu-scene{height:230px}.exy-mu-wrap{width:180px;left:-26px}}
@media(prefers-reduced-motion:reduce){.exy-mu-figure,.exy-mu-figure *{animation:none!important}}

/* ===== Oferta relámpago: botón ===== */
.offer-banner{flex-wrap:wrap}
.offer-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;font-weight:900;letter-spacing:.03em;color:#10130a;background:linear-gradient(135deg,#ffe36a,#ffb21f 55%,#ff7a18);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 22px rgba(255,160,20,.35);transition:transform .2s,box-shadow .2s;white-space:nowrap;animation:offerCtaPulse 2.2s ease-in-out infinite}
.offer-cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 12px 30px rgba(255,160,20,.55)}
.offer-cta i{font-style:normal;font-weight:900}
@keyframes offerCtaPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 22px rgba(255,160,20,.3)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 8px 30px rgba(255,160,20,.65)}}
@media(max-width:640px){.offer-cta{width:100%;justify-content:center;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.offer-cta{animation:none}}

/* ===== Secciones propias del constructor ===== */
.home-section-user-hidden{display:none!important}
.exy-block{margin:16px;padding:clamp(18px,3vw,34px);border-radius:18px;border:1px solid rgba(0,230,118,.22);position:relative;overflow:hidden}
.exy-block .exy-b-title{margin:0 0 10px;font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:-.02em}
.exy-block p{margin:0 0 10px;line-height:1.65;font-size:14px;opacity:.9}
.exy-align-center{text-align:center}
.exy-theme-dark{background:linear-gradient(145deg,#07111f,#0a0f1d);color:#e8eef7}
.exy-theme-glow{background:radial-gradient(ellipse at 0 0,rgba(0,230,118,.22),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(155,92,255,.22),transparent 55%),#080c18;color:#fff;border-color:rgba(155,92,255,.4)}
.exy-theme-light{background:#fff;color:#16223a;border-color:rgba(30,60,120,.14)}
.exy-b-btn{display:inline-flex;align-items:center;min-height:42px;margin-top:6px;padding:0 22px;border-radius:999px;background:linear-gradient(135deg,#00e676,#00b86b);color:#04170d;font-weight:900;font-size:13px;text-decoration:none}
.exy-b-media{border-radius:14px;overflow:hidden}
.exy-b-media a{display:block;height:100%}
.exy-b-media img,.exy-b-media video{display:block;width:100%;height:100%;object-fit:cover}
.exy-block-media{padding:12px}
.exy-b-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.exy-b-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:inherit;text-decoration:none;text-align:left}
.exy-theme-light .exy-b-card{border-color:rgba(30,60,120,.12);background:#f4f8ff}
.exy-b-ico{font-size:26px}.exy-b-card b{font-size:15px}.exy-b-card small{font-size:12px;opacity:.8;line-height:1.5}
a.exy-b-card:hover{transform:translateY(-3px);border-color:#00e676}
.exy-block-html{padding:0;border:0;background:none}

.mu-tail{animation:muTail 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:100% 100%}
@keyframes muTail{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
.mu-wolf{animation:muBreath 3.4s ease-in-out infinite}

/* ===== V31.5 · mago clásico con poder + nieve cayendo en el pie ===== */
.mw-bob{animation:mwBob 1.6s ease-in-out infinite}
.mw-arm{animation:mwCast 1.8s ease-in-out infinite;transform-box:view-box;transform-origin:180px 205px}
.mw-beard{animation:mwSway 1.6s ease-in-out infinite;transform-box:view-box;transform-origin:150px 172px}
.mw-hair{animation:mwSway 1.6s ease-in-out infinite;transform-box:view-box;transform-origin:150px 138px}
.mw-cloak{animation:mwFlap 1.6s ease-in-out infinite;transform-box:view-box;transform-origin:185px 195px}
.mw-orb{animation:mwPulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mw-ring{animation:mwRing 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.mw-shot{animation:mwShoot 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.mw-sp{animation:mwSpark 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.mw-rise{animation:mwRise 3s ease-out infinite}
.mw-tw{animation:mwTwinkle 1.4s ease-in-out infinite}
.mw-circ{stroke-dasharray:8 8;animation:mwSpin 3s linear infinite}
@keyframes mwBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mwCast{0%,100%{transform:rotate(-5deg)}35%,55%{transform:rotate(7deg)}}
@keyframes mwSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
@keyframes mwFlap{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes mwPulse{0%,100%{transform:scale(1)}35%{transform:scale(1.35)}}
@keyframes mwShoot{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:1;transform:translate(10px,-2px) scale(1)}100%{transform:translate(120px,-35px) scale(1.5);opacity:0}}
@keyframes mwRing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes mwSpark{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes mwRise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-90px);opacity:0}}
@keyframes mwTwinkle{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes mwSpin{to{stroke-dashoffset:-60}}
.exy-mu-snowbank{position:absolute;left:0;right:0;bottom:0;height:var(--pile,6px);background:linear-gradient(180deg,#f7fbff,#cfe5ff 70%,#a9c8ea);border-radius:60% 40% 0 0 / 12px 9px 0 0;box-shadow:0 -2px 10px rgba(190,220,255,.35);transition:height 1.2s ease}

/* ===== V31.6 · estilo de selección de "Mi cuenta" aplicado a PANTALLAS, CUENTAS, etc. ===== */
.cat-bar{gap:6px;padding:7px 10px}
.cat-item{border:1px solid transparent;border-radius:10px;padding:9px 14px}
.cat-item:hover{color:var(--txt);border-color:var(--border);background:rgba(255,255,255,.025)}
.cat-item:active,.cat-item.active-cat{color:#fff;border-color:rgba(41,121,255,.42);background:linear-gradient(135deg,rgba(0,180,255,.18),rgba(168,85,247,.15));box-shadow:inset 0 -3px var(--electric)!important}
html[data-theme="light"] .cat-item:active,html[data-theme="light"] .cat-item.active-cat{color:#0b2a6b;border-color:rgba(41,121,255,.45);background:linear-gradient(135deg,rgba(0,180,255,.14),rgba(168,85,247,.12))}
.experience-card:active,.experience-card.active,.experience-card:focus-visible{border-color:rgba(41,121,255,.55);background:linear-gradient(135deg,rgba(0,180,255,.18),rgba(168,85,247,.15));box-shadow:inset 3px 0 var(--electric),0 10px 28px rgba(41,121,255,.18);outline:none}
.experience-card:active:not(.experience-card-premium) .experience-copy b,.experience-card.active:not(.experience-card-premium) .experience-copy b{color:#fff}
html[data-theme="light"] .experience-card:active:not(.experience-card-premium) .experience-copy b,html[data-theme="light"] .experience-card.active:not(.experience-card-premium) .experience-copy b{color:var(--txt)}
.experience-subnav button:hover,.experience-subnav button.active,.experience-subnav button:active{color:#fff;background:linear-gradient(135deg,rgba(0,180,255,.18),rgba(168,85,247,.15));border-color:rgba(41,121,255,.42);box-shadow:inset 0 -2px var(--electric)}
html[data-theme="light"] .experience-subnav button:hover,html[data-theme="light"] .experience-subnav button.active,html[data-theme="light"] .experience-subnav button:active{color:#0b2a6b}