/* ============================================================
   Nando Apps — Rediseño 2026-10-28 · Hoja compartida
   Lenguaje visual aprobado en muestra: fondo oscuro azul noche /
   verde oscuro, colores vivos, tipografía gruesa (800–900),
   tarjetas con color y radio grande, botones píldora.
   ============================================================ */
:root{
  --na-green:#22C55E; --na-green-deep:#0B3D24; --na-green-dark:#16A34A;
  --na-blue:#2563EB; --na-blue-lt:#60A5FA;
  --na-orange:#F97316; --na-ink:#FFFFFF; --na-muted:#B7C9BC; --na-muted-blue:#A9BBD6;
  --na-panel:#0D2136; --na-night:#050D18;
}
.na-bg{
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(124,58,237,.32), transparent 60%),
    radial-gradient(800px 480px at -10% 22%, rgba(34,197,94,.25), transparent 60%),
    radial-gradient(700px 500px at 110% 62%, rgba(37,99,235,.28), transparent 60%),
    linear-gradient(180deg,#050D18 0%, #071A10 55%, #050D18 100%);
  background-color:#050D18;
  color:var(--na-ink);
}
/* ---------- selector de idioma (variante oscura, en todas las páginas) ---------- */
.na-langseg{display:flex;border:2.5px solid var(--na-green);border-radius:999px;overflow:hidden;background:#0A1A2F;flex:none}
.na-langseg button{border:none;background:transparent;color:#fff;font-weight:800;font-size:.85rem;padding:9px 14px;cursor:pointer;font-family:inherit;line-height:1.2}
.na-langseg button.on{background:var(--na-green);color:#04140A}
@media(max-width:600px){.na-langseg button{padding:8px 10px;font-size:.78rem}}
.na-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}
.na-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;color:#fff;text-decoration:none;letter-spacing:-.02em}
.na-brand img{width:38px;height:38px;object-fit:contain}
/* ---------- botones píldora ---------- */
.na-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:800;font-size:1.02rem;padding:14px 26px;border-radius:999px;line-height:1.15;color:#fff;background:linear-gradient(90deg,var(--na-green-dark),var(--na-green));box-shadow:0 10px 26px rgba(34,197,94,.35)}
.na-btn:active{transform:scale(.97)}
/* ---------- botón flotante de música (siempre visible, fácil de apagar) ---------- */
#naMusicFab{position:fixed;left:12px;bottom:12px;z-index:9000;display:flex;align-items:center;gap:5px;border:none;cursor:pointer;font-family:inherit;background:linear-gradient(90deg,#8A6A1F,#D4AF37);color:#171106;font-weight:900;font-size:.62rem;padding:5px 8px;border-radius:999px;box-shadow:0 8px 18px rgba(0,0,0,.45)}
#naMusicFab .na-note{font-size:.72rem;display:inline-block}
#naMusicFab.dancing{background:linear-gradient(90deg,#A97F1F,#E8C766)}
#naMusicFab.dancing .na-note{animation:naNoteDance .55s ease-in-out infinite alternate}
@keyframes naNoteDance{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(12deg) translateY(-3px)}}
#naMusicFab .na-fab-state{font-weight:800;font-size:.54rem;opacity:.85}
/* ---------- toast de volumen / avisos ---------- */
#naToast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:78px;z-index:10001;background:#fff;color:#221A08;font-weight:800;font-size:.95rem;padding:12px 20px;border-radius:999px;box-shadow:0 16px 34px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;max-width:calc(100vw - 32px);text-align:center}
#naToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- globo de Nando: oferta de música + frases (solo index) ---------- */
#naMusicBubble{position:fixed;right:20px;bottom:94px;z-index:9997;width:min(300px,calc(100vw - 40px));background:#fff;color:#14100A;border-radius:20px;border-bottom-right-radius:6px;padding:15px 16px;box-shadow:0 16px 34px rgba(0,0,0,.45);border:2.5px solid rgba(169,127,31,.85);display:none;animation:naBubbleIn .35s ease-out}
#naMusicBubble.show{display:block}
#naMusicBubble .na-bubble-name{font-weight:900;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#8A6A1F;margin-bottom:4px}
#naMusicBubble p{font-size:.99rem;font-weight:600;line-height:1.45;margin:0;transition:opacity .4s ease}
#naMusicBubble p.fade{opacity:0}
#naMusicBubble .na-bubble-btns{display:flex;gap:8px;margin-top:12px}
#naMusicBubble .na-bubble-btns button{flex:1;border:none;cursor:pointer;font-family:inherit;font-weight:900;font-size:.92rem;padding:12px 8px;border-radius:999px;line-height:1.15}
#naMusicBubble .na-yes{background:linear-gradient(90deg,#A97F1F,#D4AF37);color:#171106}
#naMusicBubble .na-no{background:transparent;color:#5C4A12;border:2.5px solid #8A6A1F}
#naMusicBubble .na-bubble-close{position:absolute;top:6px;right:10px;background:none;border:none;font-size:1.05rem;color:#64748b;cursor:pointer;padding:4px;line-height:1}
@keyframes naBubbleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:600px){#naMusicBubble{right:16px;bottom:90px}}
/* ---------- pop-up de ventas reales (dormido sin datos) ---------- */
#naSalePop{position:fixed;left:16px;bottom:78px;z-index:9001;width:min(320px,calc(100vw - 32px));background:linear-gradient(140deg,#14110A,#0A0A0A);color:#fff;border:2.5px solid rgba(212,175,55,.75);border-radius:20px;padding:16px 18px;box-shadow:0 18px 38px rgba(0,0,0,.55);display:none;animation:naBubbleIn .4s ease-out}
#naSalePop.show{display:block}
#naSalePop p{font-size:1rem;font-weight:700;line-height:1.45;margin:0}
#naSalePop .na-sale-close{position:absolute;top:6px;right:10px;background:none;border:none;font-size:1.05rem;color:#B7C9BC;cursor:pointer;padding:4px;line-height:1}
/* ---------- divisores de ola animados ---------- */
.na-wave{display:block;width:100%;height:56px;overflow:hidden;line-height:0;pointer-events:none}
.na-wave svg{display:block;width:200%;height:100%;animation:naWaveSlide 16s linear infinite}
.na-wave.wv-green svg{color:rgba(212,175,55,.40)}
.na-wave.wv-purple svg{color:rgba(212,175,55,.28)}
.na-wave.wv-blue svg{color:rgba(212,175,55,.22)}
@keyframes naWaveSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- canvas de confeti ---------- */
#naConfettiCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10002}
/* ---------- flotación suave del botón de Nando (sin tocar su lógica) ---------- */
#nando-chat-btn{animation:none}
@keyframes naFabFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(0deg)}}
/* ---------- menos movimiento si el teléfono lo pide ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .na-wave svg{animation:none}
  #nando-chat-btn{animation:none}
  #naMusicFab.dancing .na-note{animation:none}
}