/* ===== Dos formas de vivir el recorrido: video o scroll ===== */
  .loader .bar2, .loader #loadtxt, .loader .howto, .loader .enter { display: none !important; }
  .loader .pick { display: block; margin: 22px auto 0; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); }
  .loader .modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 14px auto 0; padding: 0 16px; max-width: 680px; }
  .loader .mode, .loader .mode * { text-transform: none; letter-spacing: normal; }
  .loader .mode { flex: 1 1 260px; max-width: 320px; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 20px; border: 1.5px solid rgba(247,243,236,0.55); background: rgba(247,243,236,0.06); color: var(--text); font: inherit; cursor: pointer; transition: transform 200ms ease, background 200ms ease, border-color 200ms ease; }
  .loader .mode:hover { transform: translateY(-2px); background: rgba(247,243,236,0.12); }
  .loader .mode:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
  .loader .mode.mvid { background: var(--paper); color: var(--navy); border-color: var(--paper); }
  .loader .mode.mvid:hover { background: #fff; }
  .loader .mode .mic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(247,243,236,0.1); border: 1px solid rgba(247,243,236,0.35); position: relative; overflow: hidden; }
  .loader .mode.mvid .mic { background: var(--navy); border-color: var(--navy); }
  .loader .mode .mic svg { width: 20px; height: 20px; }
  .loader .mode.mvid .mic svg { fill: var(--paper); margin-left: 3px; }
  .loader .mode.mscr .mic svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 26px; margin: -13px 0 0 -9px; }
  .loader .mode.mscr .mic .m1 { animation: micA 4s ease-in-out infinite; }
  .loader .mode.mscr .mic .m2 { animation: micB 4s ease-in-out infinite; }
  .loader .mode.mscr .mic .m1 .wh { animation: whl 1s ease-in-out infinite; }
  .loader .mode.mscr .mic .m2 { animation-name: micB; }
  @keyframes micA { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes micB { 0%, 45% { opacity: 0; transform: translateY(6px); } 55% { opacity: 1; transform: translateY(6px); } 90% { opacity: 1; transform: translateY(-6px); } 95%, 100% { opacity: 0; } }
  @keyframes whl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  .loader .mode .mtx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .loader .mode .mtx b { display: block; margin: 0; padding: 0; font-family: var(--font) !important; font-size: 16px !important; font-weight: 600; line-height: 1.2; color: inherit; letter-spacing: 0.01em; }
  .loader .mode .mtx small { font-size: 12.5px; line-height: 1.4; opacity: 0.8; }
  .loader .mode.pref { box-shadow: 0 0 0 4px rgba(122,208,234,0.45); }
  @media (max-width: 900px) { .loader .modes { flex-direction: column; align-items: stretch; max-width: 380px; gap: 10px; margin-top: 12px; } .loader .mode { max-width: none; flex: none; padding: 13px 14px; } .loader .mode .mic { width: 42px; height: 42px; } .loader .pick { margin-top: 16px; } }
  @media (max-height: 640px) { .loader .badge360 { margin-bottom: 6px; } .loader .pick { margin-top: 10px; } .loader .brand2 { margin-top: 10px; } }

  /* Barra: botón para cambiar de modo y ayuda */
  .music .modebtn { width: auto; height: 32px; border-radius: 999px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--paper); font: inherit; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; border-color: rgba(122,208,234,0.75); background: rgba(0,172,205,0.14); }
  .music .modebtn svg { width: 14px; height: 14px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .music .modebtn .ic-v { fill: var(--paper); stroke: none; }
  .music .modebtn .ic-s { display: none; }
  body.vmode .music .modebtn .ic-v { display: none; } body.vmode .music .modebtn .ic-s { display: block; }
  .music .modebtn:hover { background: rgba(0,172,205,0.28); }
  .helpbtn { display: none; position: absolute; left: 12px; top: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(247,243,236,0.6); background: rgba(6,18,30,0.55); color: var(--paper); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  body.smode .helpbtn { display: grid; place-items: center; }
  .helpbtn:hover { background: rgba(6,18,30,0.8); }
  @media (max-width: 900px) { .music .modebtn { width: 28px; height: 28px; padding: 0; justify-content: center; } .music .modebtn span { display: none; } body.vmode .stops, body.vmode .infobtn { display: none !important; } }

  /* Modo video */
  .vplayer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 2; background: transparent; }
  body.vmode .vplayer { display: block; opacity: 0; }
  body.vmode .vplayer.act { opacity: 1; }
  body.vmode .cue { display: none !important; }
  .vctl { display: none; align-items: center; gap: 12px; width: min(560px, 44vw); min-width: 0; }
  body.vmode .vctl { display: flex; }
  .vctl .vplay { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(247,243,236,0.85); background: rgba(247,243,236,0.1); display: grid; place-items: center; cursor: pointer; padding: 0; }
  .vctl .vplay svg { width: 16px; height: 16px; fill: var(--paper); }
  .vctl .vplay .ic-pa { display: none; } .vctl.playing .vplay .ic-pl { display: none; } .vctl.playing .vplay .ic-pa { display: block; }
  .vctl .vplay .ic-pl { margin-left: 3px; }
  .vtrack { position: relative; flex: 1; min-width: 60px; height: 26px; cursor: pointer; touch-action: none; }
  .vtrack::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: rgba(247,243,236,0.2); }
  .vtrack .vfill { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--turquoise), var(--sky)); width: 0; }
  .vtrack .vknob { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,0.45); left: 0; }
  .vtrack .vtick { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--sky); background: #061523; padding: 0; cursor: pointer; }
  .vtrack .vtick.done { background: var(--sky); }
  .vtrack .vtick.on { background: var(--paper); border-color: var(--paper); box-shadow: 0 0 0 4px rgba(247,243,236,0.22); }
  .vctl .vtime { flex: none; font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (max-width: 900px) { .vctl { width: auto; justify-self: stretch; gap: 8px; } .vctl .vplay { width: 40px; height: 40px; } .vctl .vtime { display: none; } body.vmode .center { justify-self: stretch; } .vctl { flex: 1; } }

  .vstop { position: absolute; left: var(--gutter); bottom: 18px; z-index: 3; max-width: min(440px, calc(100% - 32px)); background: rgba(6,18,30,0.88); border: 1px solid rgba(122,208,234,0.45); border-radius: 20px; padding: 14px 16px 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 300ms ease, transform 300ms ease; }
  .vstop.show { opacity: 1; transform: none; pointer-events: auto; }
  .vstop small { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sky); }
  .vstop .vsn { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.05; margin: 4px 0 12px; color: var(--paper); }
  .vstop .vsb { display: flex; flex-wrap: wrap; gap: 8px; }
  .vstop button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(122,208,234,0.8); background: rgba(0,172,205,0.14); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
  .vstop button:hover { background: rgba(0,172,205,0.28); }
  .vstop button svg { width: 16px; height: 16px; flex: none; }
  .vstop button.pri { background: var(--paper); color: var(--navy); border-color: var(--paper); }
  .vstop button.pri svg { fill: var(--navy); }
  .vstop button.pri .ring { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--turquoise); }
  .vstop button.pri.count .ring { animation: vcount var(--cd, 8s) linear forwards; }
  @keyframes vcount { from { width: 0; } to { width: 100%; } }
  .vstop .vsb button[hidden] { display: none; }
  @media (max-width: 900px) { .vstop { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 12px 12px; } .vstop .vsn { font-size: 22px; margin-bottom: 10px; } .vstop button { height: 40px; padding: 0 13px; font-size: 12.5px; } }
  .vbig { position: absolute; left: 50%; top: 50%; z-index: 3; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; border: 0; background: rgba(247,243,236,0.92); display: none; place-items: center; cursor: pointer; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
  .vbig svg { width: 30px; height: 30px; fill: var(--navy); margin-left: 5px; }
  body.vmode .vbig.show { display: grid; }
  .vspin { position: absolute; left: 50%; top: 50%; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgba(247,243,236,0.25); border-top-color: var(--paper); animation: vspin 0.9s linear infinite; display: none; }
  body.vmode .vspin.show { display: block; }
  @keyframes vspin { to { transform: rotate(360deg); } }
  .fload { position: absolute; left: 0; top: 0; height: 3px; width: 0; z-index: 3; background: var(--turquoise); transition: width 300ms ease, opacity 600ms ease; pointer-events: none; }

  /* Tutorial animado: dedo y mouse */
  .tut { position: absolute; inset: 0; z-index: 7; display: none; place-items: center; padding: 16px; background: rgba(6,18,30,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .tut.show { display: grid; animation: tutIn 350ms ease; }
  @keyframes tutIn { from { opacity: 0; } to { opacity: 1; } }
  .tbox { width: min(640px, 100%); max-height: 100%; overflow: auto; background: rgba(6,18,30,0.94); border: 1px solid rgba(122,208,234,0.4); border-radius: 24px; padding: 22px 22px 20px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
  .tbox h3 { margin: 0 0 16px; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.05; color: var(--paper); }
  .tdemos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tdemo { border: 1px solid var(--line); border-radius: 18px; padding: 16px 12px 14px; background: rgba(247,243,236,0.04); display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
  .tdemo > b { font-size: 13px; font-weight: 600; color: var(--paper); margin-top: 6px; }
  .tdemo .lf, .tdemo .lb { font-size: 12.5px; line-height: 1.35; color: var(--text-dim); border-radius: 999px; padding: 4px 10px; }
  .tdemo .lf em, .tdemo .lb em { font-style: normal; font-weight: 600; }
  .tdemo .lf { animation: hiF 4s ease-in-out infinite; }
  .tdemo .lb { animation: hiB 4s ease-in-out infinite; }
  @keyframes hiF { 0%, 46% { color: var(--paper); background: rgba(0,172,205,0.28); } 54%, 100% { color: rgba(247,243,236,0.55); background: transparent; } }
  @keyframes hiB { 0%, 46% { color: rgba(247,243,236,0.55); background: transparent; } 54%, 100% { color: var(--paper); background: rgba(255,210,122,0.22); } }
  .tstage { position: relative; height: 128px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; }
  .phone { position: relative; width: 66px; height: 120px; border-radius: 14px; border: 3px solid var(--paper); overflow: hidden; background: #0A3550; }
  .phone .scr { position: absolute; left: 0; right: 0; top: 0; height: 300%; background: linear-gradient(180deg, #7FD4E4 0%, #2A86B8 18%, #F6EBCB 34%, #5EC3DA 52%, #11558A 70%, #7FD4E4 86%, #F6EBCB 100%); animation: scr 4s ease-in-out infinite; }
  @keyframes scr { 0% { transform: translateY(0); } 42% { transform: translateY(-50%); } 50% { transform: translateY(-50%); } 92% { transform: translateY(0); } 100% { transform: translateY(0); } }
  .phone .finger { position: absolute; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: rgba(247,243,236,0.92); box-shadow: 0 0 0 6px rgba(247,243,236,0.28); animation: fing 4s ease-in-out infinite; }
  @keyframes fing { 0% { top: 82px; opacity: 0; } 6% { top: 82px; opacity: 1; } 40% { top: 12px; opacity: 1; } 46%, 52% { top: 12px; opacity: 0; } 56% { top: 12px; opacity: 1; } 90% { top: 82px; opacity: 1; } 96%, 100% { top: 82px; opacity: 0; } }
  .pw { position: relative; }
  .hand { position: absolute; left: 20px; width: 34px; height: 45px; animation: hand 4s ease-in-out infinite; pointer-events: none; }
  .hand path { fill: rgba(6,18,30,0.85); stroke: var(--paper); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
  @keyframes hand { 0% { top: 92px; opacity: 0; } 6% { top: 92px; opacity: 1; } 40% { top: 22px; opacity: 1; } 46%, 52% { top: 22px; opacity: 0; } 56% { top: 22px; opacity: 1; } 90% { top: 92px; opacity: 1; } 96%, 100% { top: 92px; opacity: 0; } }
  .arrows { display: flex; flex-direction: column; gap: 34px; }
  .arrows i { display: block; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; }
  .arrows .up { border-bottom: 12px solid var(--turquoise); animation: aF 4s ease-in-out infinite; }
  .arrows .dn { border-top: 12px solid #FFD27A; animation: aB 4s ease-in-out infinite; }
  .tmouse .arrows .up { border-bottom-color: #FFD27A; animation-name: aB; } .tmouse .arrows .dn { border-top-color: var(--turquoise); animation-name: aF; }
  @keyframes aF { 0%, 46% { opacity: 1; transform: scale(1.15); } 54%, 100% { opacity: 0.18; transform: none; } }
  @keyframes aB { 0%, 46% { opacity: 0.18; transform: none; } 54%, 100% { opacity: 1; transform: scale(1.15); } }
  .mouse { position: relative; width: 62px; height: 98px; border-radius: 31px; border: 3px solid var(--paper); }
  .mouse::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 34px; margin-left: -1.5px; background: var(--paper); opacity: 0.6; }
  .mouse .wheel { position: absolute; left: 50%; top: 12px; width: 12px; height: 22px; margin-left: -6px; border-radius: 6px; background: var(--sky); overflow: hidden; }
  .mouse .wheel::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: rgba(6,18,30,0.75); top: 0; animation: wroll 4s linear infinite; }
  @keyframes wroll { 0% { top: -4px; } 11% { top: 22px; } 11.01% { top: -4px; } 22% { top: 22px; } 22.01% { top: -4px; } 33% { top: 22px; } 33.01%, 50% { top: -4px; } 50.01% { top: 22px; } 61% { top: -4px; } 61.01% { top: 22px; } 72% { top: -4px; } 72.01% { top: 22px; } 83% { top: -4px; } 83.01%, 100% { top: 22px; } }
  .tprog { width: 80%; height: 5px; border-radius: 3px; background: rgba(247,243,236,0.15); overflow: hidden; margin: 4px 0 2px; }
  .tprog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--turquoise), var(--sky)); animation: tprog 4s ease-in-out infinite; }
  @keyframes tprog { 0% { width: 15%; } 42%, 50% { width: 85%; } 92%, 100% { width: 15%; } }
  .tnote { margin: 14px auto 0; max-width: 520px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
  .tnote b { color: var(--paper); font-weight: 600; }
  .tok { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; background: var(--paper); color: var(--navy); border: 0; border-radius: 999px; padding: 13px 24px; font: inherit; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
  .tok:hover { background: #fff; }
  @media (max-width: 560px) { .tbox { padding: 16px 12px 14px; border-radius: 20px; } .tbox h3 { margin-bottom: 10px; } .tdemos { gap: 8px; } .tdemo { padding: 12px 6px 10px; } .tstage { height: 110px; gap: 8px; transform: scale(0.88); } .tdemo .lf, .tdemo .lb { font-size: 11.5px; padding: 3px 6px; } .tdemo > b { font-size: 12px; } .tnote { font-size: 12px; margin-top: 10px; } .tok { margin-top: 10px; padding: 12px 20px; } }
  @media (max-height: 520px) { .tut { padding: 8px; } .tbox { padding: 10px 14px 12px; } .tstage { height: 66px; transform: scale(0.58); } .tprog { display: none; } .tdemo { padding: 6px 8px 8px; gap: 3px; } .tdemo > b { margin-top: 0; } .tbox h3 { font-size: 20px; margin-bottom: 6px; } .tnote { display: none; } .tok { margin-top: 8px; padding: 10px 20px; } }
  @media (max-width: 900px) and (orientation: landscape) { .vstop { right: auto; max-width: min(440px, 62%); } }
  @media (prefers-reduced-motion: reduce) { .phone .scr, .phone .finger, .hand, .mouse .wheel::after, .tprog i, .tdemo .lf, .tdemo .lb, .arrows i, .loader .mode .mic * { animation: none !important; } }
  body.vmode .infobtn { display: none !important; }
  @media (min-width: 901px) and (max-width: 1180px) { .homebtn span, .music .modebtn span { display: none; } .homebtn, .music .modebtn { width: 32px; height: 32px; padding: 0; justify-content: center; } .vctl { width: min(420px, 34vw); } body.vmode .music .waves { display: none; } }