<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes, maximum-scale=5.0, minimal-ui">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<!-- ═══ FONTS — FIRST: deben cargarse antes que cualquier script para evitar FOFT en producción ═══ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<!-- ═══ CSS CRITICAL — primer byte, fondo negro + FOUC guard en visitas de vuelta ═══ -->
<style>
:root{--bg:#0a0a0a;--text:#f0f0ef;--panel:#141414;--teal:#319795;--gold:#f59e0b;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#0a0a0a;color:#f0f0ef;}
/* En visitas de vuelta (krd-no-splash en html): body invisible hasta que CSS cargue */
html.krd-no-splash body{opacity:0;}
html.krd-no-splash body.krd-ready{opacity:1;transition:opacity 0.08s ease;}
/* ═══ FIX ESPACIO HERRAMIENTAS — inline critical, máxima especificidad ═══ */
#page-tuner,#page-metro,#page-recorder,#page-backing,#page-audio-analyzer,
#page-progresiones,#page-chordfinder,#page-keydetector,#page-transpositor,
#page-circulo,#page-fretboard,#page-acordes{
  padding-top:0 !important;margin-top:0 !important;
}
#page-tuner .page-inner,#page-metro .page-inner,#page-recorder .page-inner,
#page-backing .page-inner,#page-audio-analyzer .page-inner,#page-progresiones .page-inner,
#page-chordfinder .page-inner,#page-keydetector .page-inner,#page-transpositor .page-inner,
#page-circulo .page-inner,#page-fretboard .page-inner,#page-acordes .page-inner{
  padding-top:0 !important;margin-top:0 !important;
}
#page-tuner .page-inner > *:first-child,#page-metro .page-inner > *:first-child,
#page-recorder .page-inner > *:first-child,#page-backing .page-inner > *:first-child,
#page-audio-analyzer .page-inner > *:first-child,#page-progresiones .page-inner > *:first-child,
#page-chordfinder .page-inner > *:first-child,#page-keydetector .page-inner > *:first-child,
#page-transpositor .page-inner > *:first-child,#page-circulo .page-inner > *:first-child,
#page-fretboard .page-inner > *:first-child,#page-acordes .page-inner > *:first-child{
  margin-top:0 !important;padding-top:0 !important;
}
</style>
<!-- En visitas de vuelta: revelar body exactamente cuando el CSS de Vite esté cargado -->
<script>
(function(){
  try{
    if(!sessionStorage.getItem('krd_visited'))return;
    document.documentElement.classList.add('krd-no-splash');

    var revealed=false;
    function reveal(){
      if(revealed)return; revealed=true;
      clearTimeout(_fb); obs.disconnect();
      requestAnimationFrame(function(){ document.body.classList.add('krd-ready'); });
    }

    function watchLink(n){
      if(n.tagName!=='LINK'||n.rel!=='stylesheet')return;
      // Ignorar links de fuentes externas (Google Fonts, CDNs) — solo reaccionar al CSS de Vite
      if(n.href&&(n.href.indexOf('fonts.googleapis.com')!==-1||n.href.indexOf('fonts.gstatic.com')!==-1))return;
      if(n.sheet){reveal();}
      else{n.addEventListener('load',reveal,{once:true}); n.addEventListener('error',reveal,{once:true});}
    }

    // 1. Chequear links ya en el head (CSS cacheado ya está ahí)
    document.head.querySelectorAll('link[rel="stylesheet"]').forEach(watchLink);

    // 2. Observar links que Vite inyecte después
    var obs=new MutationObserver(function(muts){
      muts.forEach(function(m){ m.addedNodes.forEach(watchLink); });
    });
    obs.observe(document.head,{childList:true});

    // Fallback absoluto
    var _fb=setTimeout(reveal,2000);
  }catch(_){}
})();
</script>

<!-- ═══ CONTENT SECURITY POLICY (CSP) v5 - Reforzado para producción ═══ -->
<!-- NOTA: unsafe-eval se mantiene por compatibilidad con Tone.js y Supabase SDK -->
<!-- NOTA: localhost eliminado de connect-src para seguridad en producción -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://js.supabase.co https://cdnjs.cloudflare.com https://unpkg.com https://esm.sh data: blob:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com data:; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com data:; img-src 'self' data: blob: https:; media-src 'self' blob: https: data:; connect-src 'self' https://nuejbupcvzhobyldqiwu.supabase.co https://api.supabase.co https://api.gumroad.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com https://fonts.gstatic.com wss://nuejbupcvzhobyldqiwu.supabase.co https: wss:; object-src 'none'; frame-src 'self' https://gumroad.com https://*.gumroad.com; form-action 'self' https://gumroad.com https://*.gumroad.com; base-uri 'self'; worker-src 'self' blob:; manifest-src 'self'; child-src 'self' blob:;">
<!-- CSP Report-Only: detecta violaciones sin bloquear. Revisar console/network en produccion. -->
<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self' https:; script-src 'self' https:; style-src 'self' https:; font-src 'self' https:; img-src 'self' data: https:; connect-src 'self' https:; object-src 'none'; frame-src 'self' https://gumroad.com; form-action 'self' https://gumroad.com;">
<!-- ═══ Security Headers via meta (Cloudflare Pages no permite custom headers nativamente) ═══ -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(self), geolocation=(), payment=(), usb=(), magnetometer=(), gyroscope=(), accelerometer=(), ambient-light-sensor=(), autoplay=(self)">


<!-- ═══ HERO CTA PRIMARY FIX ═══ -->
<style>
.hero-cta-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.2rem;
  background: linear-gradient(135deg, var(--teal), #0d9488) !important;
  border: 1px solid rgba(0, 229, 204, .4) !important;
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 229, 204, .3), 0 0 0 1px rgba(255,255,255,.1) inset !important;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, filter .3s ease;
}
.hero-cta-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .8s cubic-bezier(.16, 1, .3, 1);
}
.hero-cta-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 229, 204, .45), 0 0 0 1px rgba(255,255,255,.15) inset !important;
  filter: brightness(1.1);
}
.hero-cta-primary:hover::after { left: 120%; }
.hero-cta-primary svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.hero-cta-primary:hover svg { transform: translateX(5px); }

/* Layout de CTAs en columna */
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
  }
}
</style>

<!-- ═══ FAVICON ═══ -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="shortcut icon" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Apple splash screens — evitan pantalla blanca al abrir PWA desde home screen -->
<link rel="apple-touch-startup-image" href="/splash-1290x2796.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)">
<link rel="apple-touch-startup-image" href="/splash-1179x2556.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3)">
<link rel="apple-touch-startup-image" href="/splash-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)">
<link rel="apple-touch-startup-image" href="/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">
<link rel="apple-touch-startup-image" href="/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Kuerda">
<meta name="mobile-web-app-capable" content="yes">

<!-- ═══ SEO PRIMARIO ═══ -->
<title>Kuerda — Kit de Herramientas para Músicos | Acordes, Escalas, Afinador y Más</title>
<meta id="meta-desc" name="description" content="Kit profesional de herramientas para músicos: afinador cromático, metrónomo, detector de tonalidad, transpositor, generador de progresiones, diapasón interactivo con biblioteca de escalas y práctica de patrones integrada, biblioteca de acordes, círculo de quintas, grabadora, identificador de acordes y analizador de audio. Herramientas ideales para guitarra, piano, ukelele, bajo y otros instrumentos.">
<meta name="keywords" content="herramientas guitarra, kit guitarra, afinador guitarra, metrónomo guitarra, escalas guitarra, acordes guitarra, progresiones guitarra, diapasón interactivo, círculo de quintas, detector tonalidad, transpositor acordes, analizador audio, ukelele, piano, bajo, biblioteca de escalas, patrones de escalas, práctica de escalas">
<meta name="robots" content="index, follow">
<meta name="author" content="Kuerda">
<meta name="theme-color" content="#0a0a0a">

<!-- Estilos forzados para título del afinador -->
<style>
/* Mobile: Título prominente */
@media (max-width: 640px) {
  .tuner-container .tool-shell__title {
    font-size:2.4rem !important;
    font-weight:800 !important;
    letter-spacing:0.02em !important;
    line-height:1 !important;
  }
  .tuner-container .tool-shell__category {
    font-size:0.8rem !important;
    letter-spacing:0.15em !important;
    margin-top:0.3rem !important;
  }
}
/* PC: Título grande y prominente */
@media (min-width: 641px) {
  .tuner-container .tool-shell__title {
    font-size:4rem !important;
    font-weight:800 !important;
    letter-spacing:0.03em !important;
    line-height:1 !important;
  }
  .tuner-container .tool-shell__category {
    font-size:1rem !important;
    letter-spacing:0.2em !important;
    margin-top:0.4rem !important;
  }
}
</style>

<link rel="sitemap" type="application/xml" href="/assets/xml/sitemap-Bg0csjQZ.xml">
<link rel="canonical" id="meta-canonical" href="https://kuerda.app/">
  <link rel="alternate" id="meta-hreflang-es" hreflang="es" href="https://kuerda.app/">
  <link rel="alternate" id="meta-hreflang-en" hreflang="en" href="https://kuerda.app/?lang=en">
  <link rel="alternate" id="meta-hreflang-default" hreflang="x-default" href="https://kuerda.app/">

<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "f2336852292f4528ceef2af3cc171587"}'></script>
<!-- End Cloudflare Web Analytics -->

<!-- ═══ OPEN GRAPH (Facebook, WhatsApp, LinkedIn) ═══ -->
<meta property="og:type" content="website">
<meta id="meta-og-url" property="og:url" content="https://kuerda.app">
<meta id="meta-og-title" property="og:title" content="Kuerda — Kit de Herramientas Premium para Músicos">
<meta id="meta-og-desc" property="og:description" content="Afinador, metrónomo, diapasón interactivo con biblioteca de escalas y práctica de patrones, acordes, progresiones y más. El toolkit que todo músico necesita.">
<meta property="og:image" content="https://kuerda.app/og-image.png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:locale" content="es_ES">
<meta property="og:site_name" content="Kuerda">

<!-- ═══ TWITTER CARD ═══ -->
<meta name="twitter:card" content="summary_large_image">
<meta id="meta-tw-url" name="twitter:url" content="https://kuerda.app">
<meta id="meta-tw-title" name="twitter:title" content="Kuerda — Kit de Herramientas Premium para Músicos">
<meta id="meta-tw-desc" name="twitter:description" content="Afinador, metrónomo, diapasón interactivo con biblioteca de escalas y práctica de patrones, acordes, progresiones y más. El toolkit que todo músico necesita.">
<meta name="twitter:image" content="https://kuerda.app/og-image.png">

<!-- ═══ PWA / APP ═══ -->
<link rel="manifest" href="/manifest.json">
<meta name="mobile-web-app-capable" content="yes">

<!-- ═══ STRUCTURED DATA — SoftwareApplication ═══ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Kuerda",
  "url": "https://kuerda.app",
  "description": "Kit profesional de herramientas diseñado para músicos. Incluye: biblioteca de acordes con diagramas, diapasón interactivo con biblioteca de escalas y práctica de patrones integrada, afinador cromático, metrónomo, detector de tonalidad, transpositor de acordes, generador de progresiones, círculo de quintas, Banda Kuerda con backing tracks inteligentes, grabadora de ideas, identificador de acordes por notas y analizador de audio (MP3/YouTube). Herramientas perfectas para guitarra, piano, ukelele, bajo y otros instrumentos",
  "applicationCategory": "MusicApplication",
  "operatingSystem": "Web, iOS, Android",
  "offers": [
    {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD",
      "description": "Plan gratuito con herramientas básicas: afinador, acordes, escalas, círculo de quintas"
    },
    {
      "@type": "Offer",
      "price": "4.99",
      "priceCurrency": "USD",
      "description": "Kuerda PRO — acceso completo a todas las herramientas"
    }
  ],
  "featureList": [
    "Biblioteca de acordes de guitarra con 600+ diagramas visuales",
    "Diapasón interactivo con biblioteca de escalas, patrones interactivos en el mástil y práctica de escalas",
    "Afinador cromático con micrófono del navegador",
    "Metrónomo profesional con tap tempo y compases complejos",
    "Detector de tonalidad por progresión de acordes",
    "Transpositor de acordes de guitarra automático",
    "Generador de progresiones multi-género con exportación MIDI/PDF",
    "Círculo de quintas interactivo para armonía musical",
    "Grabadora de ideas musicales e ilimitada",
    "Identificador de acordes por notas",
    "Analizador de audio: detecta tonalidad, acordes, BPM y estructura (MP3/YouTube)",
    "Disponible en Español e Inglés"
  ],
  "inLanguage": [
    "es",
    "en"
  ],
  "screenshot": "https://kuerda.app/og-image.png",
  "author": {
    "@type": "Organization",
    "name": "Kuerda"
  }
}
</script>

<!-- ═══ STRUCTURED DATA — FAQPage ═══ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "¿Cómo funciona Kuerda?",
      "acceptedAnswer": { "@type": "Answer", "text": "Kuerda funciona con un plan básico y un plan PRO. El plan básico incluye Biblioteca de Acordes, Escalas, diapasón interactivo, metrónomo, afinador y generador de progresiones. Kuerda PRO desbloquea todas las herramientas sin límites y modo offline." }
    },
    {
      "@type": "Question",
      "name": "¿Cómo aprender acordes de guitarra con Kuerda?",
      "acceptedAnswer": { "@type": "Answer", "text": "Kuerda tiene una Biblioteca de Acordes organizada por categoría: abiertos, cejilla, séptimas, jazz, blues y más. Cada acorde muestra el diagrama visual con los trastes y dedos exactos. Simplemente busca el acorde en la biblioteca y practica con el metrónomo integrado." }
    },
    {
      "@type": "Question",
      "name": "¿Para qué sirve el detector de tonalidad?",
      "acceptedAnswer": { "@type": "Answer", "text": "El detector de tonalidad de Kuerda analiza una progresión de acordes y te dice en qué tonalidad está. Por ejemplo, si tienes Am, F, C, G — el detector te dirá que estás en Do Mayor o La menor. Es perfecto para aprender a improvisar solos o transcribir canciones." }
    },
    {
      "@type": "Question",
      "name": "¿Qué escalas de guitarra tiene Kuerda?",
      "acceptedAnswer": { "@type": "Answer", "text": "Kuerda incluye Escalas de guitarra con patrones visuales en el mástil: pentatónica menor y mayor, escala de blues, modos (dórico, frigio, lidio, mixolidio), menor armónica y melódica, escalas exóticas como la japonesa In Sen, húngara menor, árabe y más. Cada escala incluye canciones de referencia y ejercicios de práctica." }
    },
    {
      "@type": "Question",
      "name": "¿Cómo funciona el transpositor de acordes?",
      "acceptedAnswer": { "@type": "Answer", "text": "El transpositor de Kuerda cambia todos los acordes de una canción a otra tonalidad automáticamente. Escribe tus acordes (ej: G, Em, C, D) y elige cuántos semitonos subir o bajar. Ideal para adaptar canciones a tu voz o a un capotraste." }
    },
    {
      "@type": "Question",
      "name": "¿Puedo usar Kuerda sin instalar nada?",
      "acceptedAnswer": { "@type": "Answer", "text": "Sí. Kuerda funciona completamente en el navegador web, sin instalar nada. También es una PWA (Progressive Web App) que puedes instalar en tu teléfono o computadora con un solo clic para usarla sin internet." }
    },
    {
      "@type": "Question",
      "name": "¿Kuerda funciona en el móvil?",
      "acceptedAnswer": { "@type": "Answer", "text": "Kuerda está optimizada para móvil, tablet y escritorio. Puedes instalarla como aplicación en tu teléfono Android o iPhone directamente desde el navegador, sin pasar por ninguna tienda de aplicaciones." }
    },
    {
      "@type": "Question",
      "name": "¿En qué idiomas está disponible Kuerda?",
      "acceptedAnswer": { "@type": "Answer", "text": "Kuerda está disponible en español e inglés. Puedes cambiar el idioma desde la configuración de la aplicación." }
    },
    {
      "@type": "Question",
      "name": "¿Qué es el círculo de quintas en guitarra?",
      "acceptedAnswer": { "@type": "Answer", "text": "El círculo de quintas es el mapa de todas las tonalidades musicales y su relación entre sí. Kuerda incluye un círculo de quintas interactivo que te muestra qué acordes pertenecen a cada tonalidad, qué tonalidades son vecinas y cómo modular entre ellas." }
    }
  ]
}
</script>

<!-- ═══ SEO RUNTIME INJECTION — SEO Suite Pro ═══ -->
<script>
(function(){
  var slug = window.location.pathname.replace(/^\//,'').replace(/\/$/,'') || 'home';
  // ignorar paths que no son páginas SEO (assets, etc.)
  if (/\.|^admin/.test(slug)) return;

  fetch('/api/seo?slug='+encodeURIComponent(slug))
    .then(function(r){ return r.ok?r.json():null; })
    .then(function(d){
      if(!d)return;
      if(d.title) document.title = d.title;

      function setMeta(n, v){
        var el = document.querySelector('meta[name="'+n+'"]');
        if(!el){ el=document.createElement('meta'); el.setAttribute('name',n); document.head.appendChild(el); }
        el.setAttribute('content', v);
      }
      function setProp(p, v){
        var el = document.querySelector('meta[property="'+p+'"]');
        if(!el){ el=document.createElement('meta'); el.setAttribute('property',p); document.head.appendChild(el); }
        el.setAttribute('content', v);
      }

      if(d.description) setMeta('description', d.description);
      if(d.keywords && d.keywords.length) setMeta('keywords', d.keywords.join(', '));
      if(d.robots) setMeta('robots', d.robots);
      if(d.og_title) setProp('og:title', d.og_title);
      if(d.og_description) setProp('og:description', d.og_description);
      if(d.og_image) setProp('og:image', d.og_image);
      if(d.og_type) setProp('og:type', d.og_type);
      if(d.twitter_card) setMeta('twitter:card', d.twitter_card);
      if(d.canonical){
        var c = document.querySelector('link[rel="canonical"]');
        if(c) c.setAttribute('href', d.canonical);
      }
      if(d.json_ld || d.json_ld_override){
        var ld = document.getElementById('ld-dynamic');
        if(!ld){ ld=document.createElement('script'); ld.id='ld-dynamic'; ld.type='application/ld+json'; document.head.appendChild(ld); }
        ld.textContent = JSON.stringify(d.json_ld_override || d.json_ld);
      }
    })
    .catch(function(e){ console.warn('[SEO-Runtime]', e); });
})();
</script>

<!-- Preload hero backgrounds — evita flash de fondo al cargar -->
<link rel="preload" as="image" href="/hero-bg-mobile.webp" media="(max-width: 767px)" fetchpriority="high">
<link rel="preload" as="image" href="/hero-bg.png" media="(min-width: 768px)" fetchpriority="high">

<!-- iOS PWA — oculta UI del navegador, status bar dark, sensación de app nativa -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Kuerda">
<meta name="theme-color" content="#0a0a0a">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Prefetch de herramientas populares — carga en background después del hero -->
<script>
(function(){
  if(!('requestIdleCallback' in window)) return;
  requestIdleCallback(function(){
    // Precargar módulos de herramientas más usadas en background
    // Se cachean en el service worker → navegación instantánea
    var tools = ['audio-analyzer','fretboard','tuner','metro','acordes'];
    tools.forEach(function(t){
      var l = document.createElement('link');
      l.rel = 'prefetch';
      l.href = '/' + t;
      document.head.appendChild(l);
    });
  }, { timeout: 5000 });
})();
</script>

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<!-- Fonts ya cargadas al inicio del <head> — ver líneas 8-11 -->
<!-- CSS bundled via Vite (src/styles/main.css) — legacy CSS migrado a src/styles/legacy-*.css -->

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Cómo potenciar tu práctica con el Toolkit de Kuerda",
  "description": "Guía para utilizar las herramientas profesionales de Kuerda: Analizador, Progresiones y Diapasón.",
  "totalTime": "PT15M",
  "tool": [{ "@type": "HowToTool", "name": "Kuerda — Guitar Toolkit Pro" }],
  "step": [
    { "@type": "HowToStep", "name": "Analiza tu música", "text": "Usa el Analizador de Canciones para obtener acordes, tempo y estructura de cualquier tema en segundos.", "position": 1 },
    { "@type": "HowToStep", "name": "Explora el diapasón", "text": "Visualiza patrones y escalas aplicadas directamente en el mástil interactivo para entender lo que tocas.", "position": 2 },
    { "@type": "HowToStep", "name": "Genera ideas", "text": "Crea progresiones armónicas complejas con el generador multi-género para tus propias composiciones.", "position": 3 },
    { "@type": "HowToStep", "name": "Perfecciona el ritmo", "text": "Usa el metrónomo de alta precisión para consolidar tu técnica sobre las progresiones creadas.", "position": 4 }
  ]
}
</script>
<!-- Supabase: defer — loader.js lo maneja async; el defer no bloquea el parser -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.39.3/dist/umd/supabase.js" integrity="sha384-AnCI38wV8hkSj/zxgOGEnguju+XVURiaGOU45+JaV3tlv/+WRp60wmeECvwdMBRW" crossorigin="anonymous" defer></script>

<!-- ═══ STRUCTURED DATA — WebSite + Sitelinks Searchbox ═══ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Kuerda",
  "url": "https://kuerda.app",
  "description": "Herramienta completa para músicos: acordes, escalas, transpositor y más.",
  "inLanguage": ["es", "en"],
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://kuerda.app/acordes?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}
</script>

<!-- ═══ STRUCTURED DATA — BreadcrumbList por herramienta ═══ -->
<script id="ld-breadcrumb" type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Kuerda",
      "item": "https://kuerda.app/"
    }
  ]
}
</script>

<style>
      @media (max-width: 768px) {
        #heroSection { min-height: 100svh !important; position: relative !important; }
        .hide-mobile { display: none !important; }
        #krdShareToast { display: none !important; }
      }
    </style>

<!-- ═══ SPLASH SCREEN — CSS Critical Inline (anti-FOUC) ═══ -->
<style id="krd-splash-css">
/* Reveal suave del primer viewport — aplicado por JS al nav + hero */
.krd-reveal-enter {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  filter: blur(10px) !important;
  transition:
    opacity   0.9s cubic-bezier(0.25,0.46,0.45,0.94),
    filter    0.9s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.krd-reveal-enter.krd-reveal-go {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: translateY(0) !important;
}

/* ── Splash container ── */
#krd-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: visible; /* override body:visibility:hidden del CSS crítico */
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.92s cubic-bezier(0.76, 0, 0.24, 1);
  overflow: hidden;
  will-change: clip-path;
}
#krd-splash.krd-splash--out {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

/* ── Fondo: gradiente radial premium ── */
#krd-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,212,180,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(240,174,26,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(108,99,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Grain texture ── */
#krd-splash::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* ── Logo wrapper ── */
#krd-splash-logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Safe area para notch / Dynamic Island */
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── Wordmark ── */
#krd-splash-word {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 6.5rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #f0f0f0;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Móvil pequeño: reducir letter-spacing del logo */
@media (max-width: 374px) {
  #krd-splash-word {
    font-size: clamp(2.2rem, 14vw, 2.8rem) !important;
    letter-spacing: 0.12em !important;
  }
  #krd-splash-tag {
    font-size: 0.65rem !important;
    letter-spacing: 0.25em !important;
  }
  #krd-splash-dot {
    margin-top: 1.8rem !important;
  }
}

/* Tablet: logo más grande aprovechando pantalla */
@media (min-width: 768px) and (max-width: 1023px) {
  #krd-splash-word {
    font-size: clamp(5rem, 12vw, 7rem) !important;
  }
}
/* Cada letra es un span que entra escalonado */
#krd-splash-word .kl {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  animation: krdLetterIn 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}
#krd-splash-word .kl:nth-child(1) { animation-delay: 0.05s; }
#krd-splash-word .kl:nth-child(2) { animation-delay: 0.13s; }
#krd-splash-word .kl:nth-child(3) { animation-delay: 0.21s; }
#krd-splash-word .kl:nth-child(4) { animation-delay: 0.29s; }
#krd-splash-word .kl:nth-child(5) { animation-delay: 0.37s; }
#krd-splash-word .kl:nth-child(6) { animation-delay: 0.45s; }

#krd-splash-word .k-accent {
  color: #FF6B35;
  animation: krdLetterIn 0.55s cubic-bezier(0.16,1,0.3,1) 0.05s forwards,
             krdKGlow 2.4s ease-in-out 0.8s infinite;
}

/* ── Tagline ── */
#krd-splash-tag {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  margin-top: 0.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0;
  animation: krdSplashIn 0.6s cubic-bezier(0.2,0.8,0.3,1) 0.62s forwards;
}

/* ── Barra de progreso ── */
#krd-splash-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  z-index: 3;
}
#krd-splash-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00D4B4, #F0AE1A, #6C63FF, #00D4B4);
  background-size: 300% 100%;
  animation: krdBarSlide 2.6s cubic-bezier(0.4,0,0.2,1) forwards, krdBarShimmer 1.5s linear 0.3s infinite;
}

/* ── Punto decorativo ── */
#krd-splash-dot {
  position: relative;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00D4B4;
  margin-top: 2.2rem;
  box-shadow: 0 0 12px rgba(0,212,180,0.8), 0 0 24px rgba(0,212,180,0.3);
  opacity: 0;
  animation: krdDotPulse 1.2s ease-in-out 0.6s infinite, krdSplashIn 0.4s ease 0.5s forwards;
}

/* ══ Keyframes ══ */
@keyframes krdSplashIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes krdLetterIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
@keyframes krdKGlow {
  0%,100% { text-shadow: 0 0 30px rgba(255,107,53,0.4), 0 0 60px rgba(255,107,53,0.15); }
  50%      { text-shadow: 0 0 55px rgba(255,107,53,0.75), 0 0 100px rgba(255,107,53,0.3), 0 0 6px rgba(255,200,150,0.6); }
}
@keyframes krdBarSlide {
  0%   { width: 0%;  }
  50%  { width: 60%; }
  75%  { width: 82%; }
  92%  { width: 95%; }
  100% { width: 100%; }
}
@keyframes krdBarShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes krdDotPulse {
  0%,100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.6); opacity: 0.4; }
}

/* ── Desktop grande: logo máximo aprovechando pantalla ── */
@media (min-width: 1024px) {
  #krd-splash-word {
    font-size: clamp(6rem, 8vw, 8rem) !important;
    letter-spacing: 0.2em !important;
  }
  #krd-splash-tag {
    font-size: 0.9rem !important;
    letter-spacing: 0.4em !important;
  }
}

/* ── Accesibilidad: reducir animaciones ── */
@media (prefers-reduced-motion: reduce) {
  #krd-splash-word .kl,
  #krd-splash-word .k-accent,
  #krd-splash-tag,
  #krd-splash-dot,
  #krd-splash-bar-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  #krd-splash {
    transition: none !important;
  }
}
</style>

  <!-- ═══ LUCIDE ICONS ═══ -->
  <script src="https://unpkg.com/lucide@0.395.0/dist/umd/lucide.min.js" integrity="sha384-JwqxfZtUY/tkkk1s8KjMJQA+r+Abx/geLBWR6o1UbsuvbUe8qtKoMQCX5x/EJLmC" crossorigin="anonymous" defer></script>
  
  <!-- ═══ LENIS SMOOTH SCROLL ═══ -->
  <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js" integrity="sha384-li4UtcFCH6QeUqR4JyV58/VgTprMuz9aauj+oWtew7V4Y7ZVjnvz5px9Y3UCG0Ea" crossorigin="anonymous"></script>
  
    <script type="module" crossorigin src="/assets/js/main-ryudfFnj.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/rolldown-runtime-BXAhQ5vp.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/auth-DzBs8vZ4.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/core-CgmvYdjd.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-fretboard-DSwXK1GK.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/data-Bz65qG9u.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-chordLibrary-CvNt7CSq.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-circulo-BT5kX5S1.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-chordfinder-CL_dMzzR.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-progresiones-CULpZzVo.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-transpositor-q4g7YAhG.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-fretboardTrick-D_AZ1oNg.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-openChordsGrid-CQIktP78.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-scaleModal-LTe_5Pp-.js">
    <link rel="modulepreload" crossorigin href="/assets/js/chunks/tool-scales-DFhHSs5-.js">
    <link rel="stylesheet" crossorigin href="/assets/css/tool-fretboard-CxV7sd5H.css">
    <link rel="stylesheet" crossorigin href="/assets/css/tool-circulo-rng_jxr8.css">
    <link rel="stylesheet" crossorigin href="/assets/css/tool-chordfinder-BPHoJZYF.css">
    <link rel="stylesheet" crossorigin href="/assets/css/tool-progresiones-COiAynzJ.css">
    <link rel="stylesheet" crossorigin href="/assets/css/tool-transpositor-T3Dq3k8R.css">
    <link rel="stylesheet" crossorigin href="/assets/css/main-CNOB3gyL.css">
  </head>
<body>

<!-- ══════════════════════════════════════════════════════
     SPLASH SCREEN — Se elimina automáticamente cuando
     main.js llama window.__krdReady()
════════════════════════════════════════════════════════ -->
<div id="krd-splash" role="status" aria-label="Cargando Kuerda...">

  <!-- Logo + tagline -->
  <div id="krd-splash-logo">
    <div id="krd-splash-word"><span class="kl k-accent">K</span><span class="kl">U</span><span class="kl">E</span><span class="kl">R</span><span class="kl">D</span><span class="kl">A</span></div>
    <div id="krd-splash-tag">El kit del músico</div>
  </div>

  <!-- Punto pulsante -->
  <div id="krd-splash-dot" aria-hidden="true"></div>

  <!-- Barra de progreso inferior -->
  <div id="krd-splash-bar" aria-hidden="true">
    <div id="krd-splash-bar-fill"></div>
  </div>

</div>

<!-- Script inline: ciclo de vida del splash — sistema único, sin conflictos -->
<script>
(function() {
  var splash = document.getElementById('krd-splash');
  var splashCss = document.getElementById('krd-splash-css');

  // ── Visita de vuelta: skip instantáneo ───────────────────────────
  var isFirst = true;
  try { isFirst = !sessionStorage.getItem('krd_visited'); } catch(_) {}

  if (!isFirst) {
    if (splash && splash.parentNode) splash.parentNode.removeChild(splash);
    if (splashCss && splashCss.parentNode) splashCss.parentNode.removeChild(splashCss);
    window.__krdReady = function() {};
    return;
  }

  // ── Primera visita: splash completo ──────────────────────────────
  var done      = false;
  var startTime = Date.now();
  var MIN_MS    = 2200;

  function doExit() {
    // 1. Marcar sesión
    try { sessionStorage.setItem('krd_visited', '1'); } catch(_) {}

    // 2. Cortina sube — animación clip-path
    splash.classList.add('krd-splash--out');

    // 3. Limpiar DOM cuando termina la animación (920ms)
    setTimeout(function() {
      if (splash && splash.parentNode) splash.parentNode.removeChild(splash);
      if (splashCss && splashCss.parentNode) splashCss.parentNode.removeChild(splashCss);
    }, 960);
  }

  function hideSplash() {
    if (done) return;
    done = true;
    var wait = Math.max(0, MIN_MS - (Date.now() - startTime));
    setTimeout(doExit, wait);
  }

  window.krdScrollTo = function(target, instant) {
    var el = typeof target === 'string' ? document.querySelector(target) : target;
    if (!el) return;
    var nav = document.getElementById('authBar');
    var navHeight = nav ? nav.offsetHeight : 56;
    var top = el.getBoundingClientRect().top + window.scrollY - navHeight;
    window.scrollTo({
      top: top,
      behavior: instant ? 'auto' : 'smooth'
    });
  };

  window.__krdReady = hideSplash;
  setTimeout(hideSplash, 4000); // fallback máximo
})();
</script>
<!-- Fondos genéricos .k-grain y .k-vignette eliminados — reemplazados por ambient-bg global -->

<!-- navbar.js + event-delegation.js: cargados via src/main.js (FASE H) -->

<!-- ═══ AUTH BAR — fixed top-right ═══ -->
<!-- ═══ MAIN NAVBAR (Windsurf-style) ═══ -->
<nav id="authBar" role="navigation" aria-label="Navegación principal">

  <!-- LOGO & BRAND -->
  <div class="kn-brand-wrapper">
    <div class="kn-brand-info">
      <button class="nav-logo-spotify" data-action="scrollToHero" data-close-nav="kn" title="Kuerda Home">K</button>
    </div>
  </div>

  <!-- CENTER NAV -->
  <div class="kn-center">

    <!-- CREAR dropdown -->
    <div class="kn-item" id="knCrear">
      <button class="kn-btn">
        Crear
        <svg class="kn-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
      <div class="kn-drop">
        <div class="kn-drop-section">Crea música ahora</div>
        <button class="kn-drop-item" data-goto="progresiones" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="6" height="12" rx="1" fill="currentColor"/><rect x="9" y="10" width="6" height="8" rx="1" fill="currentColor" opacity="0.6"/><rect x="15" y="8" width="6" height="10" rx="1" fill="currentColor" opacity="0.3"/></svg></span>
          <div><div class="kn-drop-title">Generador de Progresiones</div><div class="kn-drop-sub">Rock, Jazz, Blues, Flamenco</div></div>
        </button>
      </div>
    </div>

    <!-- ANALIZAR dropdown -->
    <div class="kn-item" id="knAnalizar">
      <button class="kn-btn">
        Analizar
        <svg class="kn-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
      <div class="kn-drop">
        <div class="kn-drop-section">Análisis armónico</div>
        <button class="kn-drop-item kn-drop-star" data-goto="audio-analyzer" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10v4M6 6v12M9 11v2M12 4v16M15 8v8M18 10v4M21 7v10"/></svg></span>
          <div><div class="kn-drop-title">Analizador de Canciones Pro</div><div class="kn-drop-sub">Acordes, key, BPM y estructura</div></div>
        </button>
        <button class="kn-drop-item" data-goto="keydetector" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10v4M6 7v10M9 5v14"/><path d="M12 12h3"/><circle cx="18" cy="10" r="3" fill="currentColor"/><path d="M18 7V4"/></svg></span>
          <div><div class="kn-drop-title">Detector de Tonalidad</div><div class="kn-drop-sub">Pega los acordes, detecta la key</div></div>
        </button>
        <button class="kn-drop-item" data-goto="chordfinder" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="2" width="16" height="20" rx="1" fill="none"/><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/><circle cx="12" cy="10" r="2" fill="none" stroke-width="1"/><circle cx="12" cy="10" r="0.5" fill="currentColor"/></svg></span>
          <div><div class="kn-drop-title">ID de Acordes</div><div class="kn-drop-sub">¿Qué acorde estoy pisando?</div></div>
        </button>
        <button class="kn-drop-item" data-goto="transpositor" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 8h16"/><path d="M4 16h16"/><path d="M8 4v16"/><path d="M16 4v16"/><path d="M6 6l2-2 2 2"/><path d="M18 18l-2 2-2-2"/></svg></span>
          <div><div class="kn-drop-title">Transpositor</div><div class="kn-drop-sub">Cambia de key en segundos</div></div>
        </button>
        <button class="kn-drop-item" data-goto="circulo" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/></svg></span>
          <div><div class="kn-drop-title">Círculo Armónico</div><div class="kn-drop-sub">Guía visual de armonía</div></div>
        </button>
      </div>
    </div>

    <!-- PRACTICAR dropdown -->
    <div class="kn-item" id="knPracticar">
      <button class="kn-btn">
        Practicar
        <svg class="kn-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
      <div class="kn-drop">
        <div class="kn-drop-section">Herramientas de práctica</div>
        <button class="kn-drop-item" data-goto="tuner" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2v6"/><circle cx="12" cy="14" r="8"/><line x1="12" y1="14" x2="16" y2="10"/><circle cx="12" cy="14" r="1.5" fill="currentColor"/></svg></span>
          <div><div class="kn-drop-title">Afinador Cromático</div><div class="kn-drop-sub">Drop D, DADGAD, Open G</div></div>
        </button>
        <button class="kn-drop-item" data-goto="metro" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polygon points="7,22 17,22 14,4 10,4"/><line x1="12" y1="13" x2="16" y2="8"/><circle cx="12" cy="14" r="1.5"/></svg></span>
          <div><div class="kn-drop-title">Metrónomo Pro</div><div class="kn-drop-sub">TAP tempo, 5 compases</div></div>
        </button>
        <button class="kn-drop-item" data-goto="backing" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg></span>
          <div><div class="kn-drop-title">Banda Kuerda <span class="kn-new">BETA</span></div><div class="kn-drop-sub">Backing Tracks Sandbox</div></div>
        </button>
        <button class="kn-drop-item" data-goto="recorder" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></svg></span>
          <div><div class="kn-drop-title">Grabadora</div><div class="kn-drop-sub">Captura ideas al instante</div></div>
        </button>
      </div>
    </div>

    <!-- REFERENCIA dropdown -->
    <div class="kn-item" id="knReferencia">
      <button class="kn-btn">
        Consulta
        <svg class="kn-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
      <div class="kn-drop">
        <div class="kn-drop-section">Herramientas de consulta</div>
        <button class="kn-drop-item" data-goto="fretboard" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="1" fill="none"/><line x1="2" y1="8" x2="22" y2="8"/><line x1="2" y1="13" x2="22" y2="13"/><line x1="2" y1="18" x2="22" y2="18"/><circle cx="7" cy="10.5" r="1.5" fill="currentColor"/><circle cx="17" cy="15.5" r="1.5" fill="currentColor"/></svg></span>
          <div><div class="kn-drop-title">Diapasón Interactivo</div><div class="kn-drop-sub">Visualización dinámica en el mástil</div></div>
        </button>
        <button class="kn-drop-item" data-goto="acordes" data-close-nav="kn">
          <span class="kn-drop-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="2" width="16" height="20" rx="1" fill="none"/><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/><circle cx="9" cy="9.5" r="1.5" fill="currentColor"/><circle cx="15" cy="9.5" r="1.5" fill="currentColor"/><circle cx="12" cy="14.5" r="1.5" fill="currentColor"/></svg></span>
          <div><div class="kn-drop-title">Explorador de Acordes</div><div class="kn-drop-sub">Diagramas y variaciones dinámicas</div></div>
        </button>
      </div>
    </div>

  </div>

  <div class="kn-actions-right">
    <!-- SEARCH BTN -->
    <button class="kn-search-btn-clean" onclick="openSearch()" title="Buscar (/)">
      <svg width="20" height="20" viewBox="0 0 50 50" fill="currentColor"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"/></svg>
    </button>

    <!-- FAVORITOS BTN -->
    <button id="favoritesBtn" class="favorites-btn-refined" data-action="toggleFavoritesPanel" title="Mis Favoritos">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>
    </button>

    <!-- RIGHT: Auth -->
    <div class="kn-right" id="navAuthBtns">
      <!-- Desktop: dos botones separados (como antes) -->
      <button class="btn-login" id="navBtnLogin" data-action="openAuthModal" data-arg="login">Iniciar sesión</button>
      <button class="btn-register" id="navBtnRegister" data-action="openAuthModal" data-arg="register">Crear cuenta</button>

      <!-- Mobile: split-pill premium (oculto en desktop) -->
      <div class="mob-auth-pill" id="mobAuthPill">
        <button class="mob-auth-pill__login" data-action="openAuthModal" data-arg="login" aria-label="Iniciar sesión">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/>
            <polyline points="10 17 15 12 10 7"/>
            <line x1="15" y1="12" x2="3" y2="12"/>
          </svg>
          <span>Entrar</span>
        </button>
        <span class="mob-auth-pill__sep" aria-hidden="true"></span>
        <button class="mob-auth-pill__register" data-action="openAuthModal" data-arg="register" aria-label="Crear cuenta">
          <span>Crear cuenta</span>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14M12 5l7 7-7 7"/>
          </svg>
        </button>
      </div>
    </div>

    <button type="button" class="nav-user-badge-premium" id="navUserBadge" style="display:none" aria-label="Abrir perfil">
      <span class="nav-user-avatar-refined" id="navUserAvatar"></span>
      <span class="nav-user-info">
        <span id="navUserEmail"></span>
        <span id="navUserPro">PRO</span>
      </span>
    </button>
  </div>
</nav>


<!-- ═══ SPLASH ═══ -->


<!-- ═══ LICENSE GATE ═══ -->
<div id="licenseGate" style="display:none">
  <div class="license-box">
    <!-- Estado: pedir email -->
    <div id="authStep1">
      <div class="license-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M9 12c-2.5.5-4 2.5-3.5 4.5S8 20 10 19.5c1-.2 2-.8 2-2"/><path d="M14 10L9 12M14 10l3-6"/><circle cx="17" cy="4" r=".7" fill="currentColor"/></svg></div>
      <div class="license-title">Kuerda PRO</div>
      <div class="license-subtitle">Ingresa el email con el que compraste.<br>Te enviaremos un link de acceso instantáneo.</div>
      <input class="license-input" id="authEmailInput" type="email"
        placeholder="tu@email.com"
        style="letter-spacing:0;text-transform:lowercase;font-size:.95rem"
        onkeydown="if(event.key==='Enter')sendMagicLink()">
      <div class="license-error" id="authError"></div>
      <button class="license-btn" data-action="sendMagicLink">ENVIAR LINK DE ACCESO</button>
      <div class="license-hint">
        Recibirás un email con un botón para entrar.<br>
        <strong>Sin contraseñas.</strong> Solo un clic.
      </div>
    </div>
    <!-- Estado: email enviado -->
    <div id="authStep2" style="display:none">
      <div class="license-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" width="32" height="32"><path d="M22 13V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h8"/><path d="M22 7l-10 7L2 7"/><path d="M16 19h6M19 16l3 3-3 3"/></svg></div>
      <div class="license-title">Revisa tu email</div>
      <div class="license-subtitle">Te enviamos un link a <strong id="authEmailSent" style="color:var(--teal)"></strong>.<br>Haz clic en el botón del email para entrar.</div>
      <div class="license-hint" style="margin-top:1.5rem">
        ¿No llegó? Revisa spam o
        <span data-action="resetAuthGate" style="color:var(--gold);cursor:pointer;text-decoration:underline">intenta con otro email</span>.
      </div>
    </div>
  </div>
</div>

<!-- ═══ HERO ═══ -->
<div id="heroSection" style="position:relative;overflow:hidden">

  <!-- ── AMBIENT ORBS ── -->
  <div class="hero-orb" style="position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,180,.08) 0%,transparent 65%);top:-200px;right:-350px;pointer-events:none;z-index:1"></div>
  <div class="hero-orb" style="position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.06) 0%,transparent 65%);bottom:-200px;left:-200px;pointer-events:none;z-index:1"></div>


  <!-- ══ ABOVE THE FOLD ══ -->
  <div class="hero-above-fold">

    <!-- H1 para SEO -->
    <h1 style="position:fixed;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;visibility:hidden">Kuerda — El Kit de Herramientas Premium para Músicos</h1>

    <!-- ① WORDMARK -->
    <div class="hero-kuerda" role="heading" aria-level="1">
      <span class="hero-kuerda-k">K</span>UERDA
    </div>

    <!-- ② QUÉ ES — propuesta de valor inmediata -->
    <p class="hero-value-prop">
      El <strong>kit premium</strong> para músicos
    </p>

    <!-- ③ TAGLINE emocional -->
    <p class="hero-tagline">Abre. Toca.<br><em class="tagline-accent">Crea.</em></p>

    <!-- ④ BENEFIT CARDS — modern alternative to tool overload -->
    <div class="hero-benefits-grid" data-reveal>
      <article class="hb-card" data-goto="audio-analyzer" role="button" tabindex="0">
        <div class="hb-icon-wrap">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10v4M6 6v12M9 11v2M12 4v16M15 8v8M18 10v4M21 7v10"/></svg>
        </div>
        <div class="hb-content">
          <h3 class="hb-title">Aprende cualquier canción</h3>
          <p class="hb-desc">Desglosa canciones: acordes, tempo y estructura en tiempo real.</p>
        </div>
      </article>

      <article class="hb-card" data-goto="progresiones" role="button" tabindex="0">
        <div class="hb-icon-wrap">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="6" height="12" rx="1" fill="currentColor"/><rect x="9" y="10" width="6" height="8" rx="1" fill="currentColor" opacity="0.6"/><rect x="15" y="8" width="6" height="10" rx="1" fill="currentColor" opacity="0.3"/></svg>
        </div>
        <div class="hb-content">
          <h3 class="hb-title">Crea con progresiones pro</h3>
          <p class="hb-desc">Blues, Rock, Jazz, Flamenco — estructura completa al instante.</p>
        </div>
      </article>

      <article class="hb-card" data-goto="keydetector" role="button" tabindex="0">
        <div class="hb-icon-wrap">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10v4M6 7v10M9 5v14"/><path d="M12 12h3"/><circle cx="18" cy="10" r="3" fill="currentColor"/><path d="M18 7V4"/></svg>
        </div>
        <div class="hb-content">
          <h3 class="hb-title">Detecta la tonalidad</h3>
          <p class="hb-desc">Sube audio y descubre la tonalidad al instante.</p>
        </div>
      </article>
    </div>

    <!-- ⑤ CTA principal -->
    <div class="hero-ctas">
      <button class="hero-cta-primary" id="ctaRegisterHero" data-magnetic data-action="openAuthModal" data-arg="register">
        Empieza gratis ahora
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </button>
    </div>

    <!-- ⑥ STATS ─────────────────────────────── -->
    <div class="hero-trust-row">

    <!-- Stats row -->
      <div class="hero-stats-mini" data-reveal>
        <div class="hsm-item" data-reveal-item>
          <span class="hsm-num" data-count="13">13</span>
          <span class="hsm-label">Herramientas</span>
        </div>
        <div class="hsm-div"></div>
        <div class="hsm-item" data-reveal-item>
          <span class="hsm-num" data-count="100">100<span style="color:var(--teal)">%</span></span>
          <span class="hsm-label">en español</span>
        </div>
        <div class="hsm-div"></div>
        <div class="hsm-item" data-reveal-item>
          <span class="hsm-num" data-count="0">0</span>
          <span class="hsm-label">anuncios molestos</span>
        </div>
      </div>

    </div>

    <!-- ⑥ COMUNIDAD KUERDA - Comentarios reales -->
    <div id="communityHeroSection">
      <!-- TODO: Implementar sección de comunidad -->
    </div>

    <!-- ═══ SCROLL INDICATOR PREMIUM — "Kuerda Pluck" ═══
         Cuerda vertical con púa que cae elásticamente.
         100% CSS, compositor-safe (transform + opacity).
    ═══════════════════════════════════════════════════════ -->
    <button class="krd-scroll" type="button"
      aria-label="Desliza para descubrir las herramientas"
      onclick="window.krdScrollTo('.hero-tools-section', window.innerWidth <= 768)">
      <span class="krd-scroll__label">Desliza</span>
      <span class="krd-scroll__string" aria-hidden="true">
        <span class="krd-scroll__pluck"></span>
      </span>
      <span class="krd-scroll__chev" aria-hidden="true"></span>
    </button>

  </div><!-- /above-fold -->

  <!-- ══ TOOLS SECTION ══ -->


  <!-- ══ SESSION PANEL — personalizado por historial ══ -->
  <div id="sessionPanel" style="display:none">
    <!-- filled by _renderSessionPanel() -->
  </div>

  <div class="hero-tools-section" id="kuerda-tools-3d">

    <!-- ACCESO RÁPIDO — herramientas recientes y continuar -->
    <div id="krdAccesoRapido" style="display:none" class="krd-acceso-rapido" data-reveal></div>

    <!-- ══════════════════════════════════════════════════════════════════
         FLUJOS RÁPIDOS V2 — Timeline cards
         ══════════════════════════════════════════════════════════════════ -->
    <div class="hero-tools-header" style="margin-top:2rem" id="section-flujos" data-reveal>
      <div>
        <div class="hero-tools-eyebrow">FLUJOS RÁPIDOS</div>
        <div class="hero-tools-title">¿Qué quieres hacer hoy?</div>
        <div class="hero-tools-sub">Empieza desde cualquier punto — cada flujo conecta las herramientas correctas en orden.</div>
      </div>
      <div class="hero-tools-line"></div>
    </div>

    <div class="flujos-v2" data-reveal>
      <!-- IMPROVISAR -->
      <article class="flujo-v2 f-improv" data-reveal-item data-goto="keydetector" role="button" tabindex="0">
        <div class="flujo-v2-head">
          <div class="flujo-v2-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M8 9l4-4 4 4M8 15l4 4 4-4"/></svg>
          </div>
          <h3 class="flujo-v2-title">Quiero improvisar</h3>
        </div>
        <div class="flujo-v2-timeline">
          <div class="flujo-v2-step" data-goto="keydetector" data-stop-prop>
            <div class="node">1</div>
            <div class="label">Detectar tonalidad</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="fretboard" data-stop-prop>
            <div class="node">2</div>
            <div class="label">Ver escalas</div>
          </div>
        </div>
        <span class="flujo-v2-cta">Empezar →</span>
      </article>

      <!-- COMPONER -->
      <article class="flujo-v2 f-compose" data-reveal-item data-goto="progresiones" role="button" tabindex="0">
        <div class="flujo-v2-head">
          <div class="flujo-v2-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M9 18V5l12-2v13"/><path d="M15 16V3"/></svg>
          </div>
          <h3 class="flujo-v2-title">Quiero componer</h3>
        </div>
        <div class="flujo-v2-timeline">
          <div class="flujo-v2-step" data-goto="progresiones" data-stop-prop>
            <div class="node">1</div>
            <div class="label">Generar progresión</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="transpositor" data-stop-prop>
            <div class="node">3</div>
            <div class="label">Transponer</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="backing" data-stop-prop>
            <div class="node">4</div>
            <div class="label">Banda Pro</div>
          </div>
        </div>
        <span class="flujo-v2-cta">Empezar →</span>
      </article>

      <!-- ENTENDER UNA CANCIÓN -->
      <article class="flujo-v2 f-decode" data-reveal-item data-goto="audio-analyzer" role="button" tabindex="0">
        <div class="flujo-v2-head">
          <div class="flujo-v2-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
          </div>
          <h3 class="flujo-v2-title">Quiero entender una canción</h3>
        </div>
        <div class="flujo-v2-timeline">
          <div class="flujo-v2-step" data-goto="audio-analyzer" data-stop-prop>
            <div class="node">1</div>
            <div class="label">Analizar canción</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="keydetector" data-stop-prop>
            <div class="node">2</div>
            <div class="label">Confirmar key</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="fretboard" data-stop-prop>
            <div class="node">3</div>
            <div class="label">Escalas</div>
          </div>
        </div>
        <span class="flujo-v2-cta">Empezar →</span>
      </article>

      <!-- PRACTICAR -->
      <article class="flujo-v2 f-practice" data-reveal-item data-goto="metro" role="button" tabindex="0">
        <div class="flujo-v2-head">
          <div class="flujo-v2-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><polygon points="7,22 17,22 14,4 10,4"/><line x1="12" y1="13" x2="16" y2="8"/><circle cx="12" cy="14" r="1.5"/></svg>
          </div>
          <h3 class="flujo-v2-title">Quiero practicar hoy</h3>
        </div>
        <div class="flujo-v2-timeline">
          <div class="flujo-v2-step" data-goto="metro" data-stop-prop>
            <div class="node">1</div>
            <div class="label">Metrónomo</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="progresiones" data-stop-prop>
            <div class="node">2</div>
            <div class="label">Progresión</div>
          </div>
          <span class="flujo-v2-connector"></span>
          <div class="flujo-v2-step" data-goto="fretboard" data-stop-prop>
            <div class="node">3</div>
            <div class="label">Diapasón</div>
          </div>
        </div>
        <span class="flujo-v2-cta">Empezar →</span>
      </article>
    </div>

    <!-- TU SESIÓN -->
    <div class="hero-tools-header" id="section-sesion" data-reveal>
      <div>
        <div class="hero-tools-eyebrow">EL KIT COMPLETO</div>
        <div class="hero-tools-title">Todas las herramientas<br><em style="font-style:italic;color:var(--teal)">en un solo lugar.</em></div>
        <div class="hero-tools-sub">13 herramientas profesionales — Regístrate para empezar, PRO para dominar.</div>
        <!-- Stats chip row — prueba social tangible -->
        <div class="tk-stats-row" aria-label="Estadísticas de Kuerda">
          <span class="tk-stat-chip"><strong>13</strong> herramientas profesionales</span>
          <span class="tk-stat-chip">Diagramas Interactivos</span>
          <span class="tk-stat-chip is-live"><strong id="krdWeeklyStats">1,240</strong> canciones analizadas esta semana</span>
        </div>
      </div><!-- /.hero-tools-header inner -->
      <div class="hero-tools-line"></div>
    </div>
    <!-- ══════════════════════════════════════════════════════════════════
         ⭐ HERO TOOL — ANALIZADOR DE CANCIONES PRO (full-width)
         La herramienta más revolucionaria de Kuerda. Anclaje visual #1.
         ══════════════════════════════════════════════════════════════════ -->
    <div class="toolkit-hero-wrap" data-reveal>
      <article class="toolkit-hero" data-goto="audio-analyzer" role="button" tabindex="0" aria-label="Abrir Analizador de Canciones Pro">
        <!-- ─ Copy ─ -->
        <div class="tkh-copy">
          <div class="tkh-tags">
            <span class="tkh-badge-pro">
              <svg width="9" height="11" viewBox="0 0 10 14" fill="currentColor" aria-hidden="true"><path d="M6 0L0 8h4L4 14l6-8H6L6 0z"/></svg>
              PRO
            </span>
            <span class="tkh-tag-revolution">✦ Revolucionario</span>
          </div>
          <h2 class="tkh-title">Analizador de Canciones</h2>
          <p class="tkh-desc">Sube cualquier canción y Kuerda detecta en segundos sus <strong>acordes</strong>, <strong>tonalidad</strong>, <strong>tempo</strong> y <strong>estructura</strong>. La forma más rápida de aprender cualquier tema sin tablaturas.</p>
          <div class="tkh-features">
            <div class="tkh-feat"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Detecta acordes en tiempo real</div>
            <div class="tkh-feat"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Encuentra el BPM exacto</div>
            <div class="tkh-feat"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Descubre la tonalidad real</div>
            <div class="tkh-feat"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Mapa visual de la estructura</div>
          </div>
          <div class="tkh-cta-row">
            <button class="tkh-cta" data-goto="audio-analyzer" data-stop-prop>
              Analizar mi primera canción
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </button>
            <span class="tkh-cta-meta">Sin instalar · Resultados en segundos</span>
          </div>
        </div>

        <!-- ─ Visual preview HUD ─ -->
        <div class="tkh-preview" aria-hidden="true">
          <div class="tkh-preview-hud">
            <span class="tkh-hud-pill"><span class="dot"></span>Analizando</span>
            <div class="tkh-hud-stats">
              <span>KEY <b>C maj</b></span>
              <span>BPM <b>124</b></span>
            </div>
          </div>

          <!-- Waveform 32 barras animadas (CSS only) -->
          <div class="tkh-wave">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>

          <!-- Acordes detectados -->
          <div class="tkh-chord-row">
            <span class="tkh-chord-label">Detectados</span>
            <span class="tkh-chord">Am</span>
            <span class="tkh-chord">F</span>
            <span class="tkh-chord">C</span>
            <span class="tkh-chord">G</span>
            <span class="tkh-chord">Em</span>
          </div>

          <!-- Mini estructura -->
          <div class="tkh-structure">
            <div class="tkh-struct-seg intro" title="Intro"></div>
            <div class="tkh-struct-seg verse" title="Verso"></div>
            <div class="tkh-struct-seg chorus" title="Coro"></div>
            <div class="tkh-struct-seg bridge" title="Puente"></div>
            <div class="tkh-struct-seg outro" title="Outro"></div>
          </div>
          <div class="tkh-struct-legend">
            <span><i style="background:rgba(0,229,204,.55)"></i>Verso</span>
            <span><i style="background:rgba(245,197,24,.7)"></i>Coro</span>
            <span><i style="background:rgba(108,99,255,.6)"></i>Puente</span>
          </div>
        </div>
      </article>
    </div>

    <!-- ══════════════════════════════════════════════════════════════════
         FILA 2 — FEATURED: Generador de Progresiones + Diapasón
         ══════════════════════════════════════════════════════════════════ -->
    <div class="toolkit-subheader">
      <span class="toolkit-subheader-label">01 // HERRAMIENTAS DE CREACIÓN</span>
      <span class="toolkit-subheader-line"></span>
      <span class="toolkit-subheader-count">Potencia tu flujo</span>
    </div>

    <div class="toolkit-featured-row" data-reveal>
      <!-- Progresiones -->
      <article class="tk-featured-v2 is-prog" data-reveal-item data-goto="progresiones" role="button" tabindex="0">
        <span class="tk-f2-tag">✦ Imprescindible</span>
        <div class="tk-f2-head">
          <div class="tk-f2-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="2" y="7" width="5" height="5" rx="1"/><rect x="9.5" y="4" width="5" height="5" rx="1"/><rect x="17" y="9" width="5" height="5" rx="1"/><line x1="7" y1="9.5" x2="9.5" y2="7"/><line x1="14.5" y1="8" x2="17" y2="11"/></svg>
          </div>
          <div>
            <h3 class="tk-f2-name">Generador de Progresiones</h3>
            <p class="tk-f2-desc">Verso + Coro + Puente al instante en Rock, Jazz, Blues, Flamenco y más. La forma más rápida de tener una canción en tus manos.</p>
          </div>
        </div>
        <div class="tk-f2-genres">
          <span>Rock</span><span>Blues</span><span>Jazz</span><span>Flamenco</span><span>Latin</span><span>Metal</span><span>+8 más</span>
        </div>
      </article>

      <!-- Diapasón -->
      <article class="tk-featured-v2 is-fret" data-reveal-item data-goto="fretboard" role="button" tabindex="0">
        <span class="tk-f2-tag">⬢ Herramienta estrella</span>
        <div class="tk-f2-head">
          <div class="tk-f2-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="8" y1="5" x2="8" y2="19"/><line x1="14" y1="5" x2="14" y2="19"/><circle cx="5" cy="9" r="1.5" fill="currentColor"/><circle cx="11" cy="14" r="1.5" fill="currentColor"/><circle cx="17" cy="10" r="1.5" fill="currentColor"/></svg>
          </div>
          <div>
            <h3 class="tk-f2-name">Diapasón Interactivo</h3>
            <p class="tk-f2-desc">Visualiza escalas, modos y arpegios en el mástil. Selecciona tonalidad, patrón y modo zurdo. El corazón visual de Kuerda.</p>
          </div>
        </div>
        <div class="tk-f2-fretboard" aria-hidden="true">
          <div class="fb-string"></div>
          <div class="fb-string"></div>
          <div class="fb-string"></div>
          <div class="fb-string"></div>
          <div class="fb-string"></div>
          <div class="fb-string"></div>
        </div>
      </article>
    </div>

    <!-- ══════════════════════════════════════════════════════════════════
         ESENCIALES — Afinador, Metrónomo, Pistas
         ══════════════════════════════════════════════════════════════════ -->
    <div class="toolkit-subheader">
      <span class="toolkit-subheader-label">02 // ESENCIALES DEL DÍA A DÍA</span>
      <span class="toolkit-subheader-line"></span>
      <span class="toolkit-subheader-count">3 herramientas</span>
    </div>

    <div class="toolkit-essentials cv-auto" data-reveal>
      <article class="tk-mini c-teal" data-reveal-item data-goto="tuner" role="button" tabindex="0">
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
        </div>
        <h3 class="tk-mini-name">Afinador Cromático</h3>
        <p class="tk-mini-desc">Afina en segundos. Drop D, DADGAD, Open G y todas las alternativas.</p>
      </article>

      <article class="tk-mini c-purple" data-reveal-item data-goto="metro" role="button" tabindex="0">
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 22L6 3h12L12 22z"/><line x1="6" y1="3" x2="18" y2="3"/></svg>
        </div>
        <h3 class="tk-mini-name">Metrónomo Pro</h3>
        <p class="tk-mini-desc">TAP tempo, acentos visuales y subdivisiones. El ritmo es la mitad de la música.</p>
      </article>

      <article class="tk-mini c-accent" data-reveal-item data-goto="backing" role="button" tabindex="0">
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
        </div>
        <h3 class="tk-mini-name">Banda Kuerda <span class="kn-new">BETA</span></h3>
        <p class="tk-mini-desc">Crea tus propios backing tracks rítmicos. Bajo, batería, piano real y sandbox de compases.</p>
      </article>

    </div>

    <!-- ══════════════════════════════════════════════════════════════════
         ANÁLISIS ARMÓNICO — ChordFinder, Tonalidad, Transpositor, Círculo
         ══════════════════════════════════════════════════════════════════ -->
    <div class="toolkit-subheader">
      <span class="toolkit-subheader-label">03 // ANÁLISIS ARMÓNICO</span>
      <span class="toolkit-subheader-line"></span>
      <span class="toolkit-subheader-count">4 herramientas</span>
    </div>

    <div class="toolkit-analyze" data-reveal>
      <article class="tk-mini c-accent" data-reveal-item data-goto="chordfinder" role="button" tabindex="0">
        <span class="tk-mini-badge">Analizar</span>
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="11" y1="8" x2="11" y2="14"/></svg>
        </div>
        <h3 class="tk-mini-name">Identificador de Acordes</h3>
        <p class="tk-mini-desc">Escanea las notas que pisas y descubre su nombre, función y variaciones.</p>
      </article>

      <article class="tk-mini c-accent" data-reveal-item data-goto="keydetector" role="button" tabindex="0">
        <span class="tk-mini-badge">Analizar</span>
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
        </div>
        <h3 class="tk-mini-name">Detector de Tonalidad</h3>
        <p class="tk-mini-desc">Analiza tu progresión de acordes para encontrar la tonalidad real al instante.</p>
      </article>

      <article class="tk-mini c-accent" data-reveal-item data-goto="transpositor" role="button" tabindex="0">
        <span class="tk-mini-badge">Analizar</span>
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M7 16V4m0 0L3 8m4-4l4 4"/><path d="M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
        </div>
        <h3 class="tk-mini-name">Módulo Transpositor</h3>
        <p class="tk-mini-desc">Cambia el tono de cualquier canción sin perder la relación entre acordes.</p>
      </article>

      <article class="tk-mini c-accent" data-reveal-item data-goto="circulo" role="button" tabindex="0">
        <span class="tk-mini-badge">Analizar</span>
        <div class="tk-mini-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/></svg>
        </div>
        <h3 class="tk-mini-name">Círculo de Armonía</h3>
        <p class="tk-mini-desc">Navegador visual para entender la relación entre escalas y tonalidades vecinas.</p>
      </article>
    </div>


  </div><!-- /hero-tools-section -->

<!-- ══════════════════════════════════════════════════════════════════
     PRO VALUE STRIP V2 — Banner premium de conversión a PRO
     ══════════════════════════════════════════════════════════════════ -->
<aside id="proValueStrip" class="pro-strip-v2 cv-auto" aria-label="Plan Kuerda PRO" data-reveal>
  <div class="pro-strip-v2-grid">
    <!-- Columna 1: Identidad + precio -->
    <div class="psv-left">
      <div class="psv-eyebrow">
        <span class="psv-bolt"><svg width="9" height="11" viewBox="0 0 10 14" fill="currentColor" aria-hidden="true"><path d="M6 0L0 8h4L4 14l6-8H6L6 0z"/></svg></span>
        KUERDA PRO
      </div>
      <div class="psv-price-row">
        <span class="psv-price">$4.99</span>
        <span class="psv-price-period">/ mes · cancela cuando quieras</span>
      </div>
      <div class="psv-title">Lleva tu práctica al <em>siguiente nivel</em>.<br>Sin límites. Sin pausas. Con toda la potencia.</div>
      <div class="psv-guarantee">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/><polyline points="9 12 11 14 15 10"/></svg>
        Sin compromiso · cancelá cuando quieras
      </div>
    </div>

    <!-- Columna 2: Beneficios -->
    <div class="psv-benefits">
      <div class="psv-benefit"><span class="psv-benefit-dot"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>Analizador de canciones ilimitado</div>
      <div class="psv-benefit"><span class="psv-benefit-dot"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>Backing Tracks con banda real ilimitados</div>
      <div class="psv-benefit"><span class="psv-benefit-dot"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>Progresiones de todos los géneros ilimitadas</div>
      <div class="psv-benefit"><span class="psv-benefit-dot"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>Exportá a PDF y guardá en la nube</div>
      <div class="psv-benefit"><span class="psv-benefit-dot"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>Sin límites diarios</div>
      <div class="psv-benefit"><span class="psv-benefit-dot"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></span>Funciones beta primero</div>
    </div>

    <!-- Columna 3: CTA + prueba social -->
    <div class="psv-cta-col">
      <div class="psv-social">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--teal)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-right: 2px;"><polyline points="20 6 9 17 4 12"/></svg>
        <span><b>Sincronización</b> multidispositivo</span>
      </div>
      <div class="psv-trust">
        <span><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Pago seguro</span>
        <span>Cancela en 1 clic</span>
      </div>
      <button class="psv-btn" type="button" onclick="window.kuerdaShowPaywall&&window.kuerdaShowPaywall('pro-value-strip','strip_cta')">
        Ver planes PRO
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
      <div class="psv-micro">Pago seguro · activación inmediata</div>
    </div>
  </div>
</aside>

</div><!-- /heroSection -->

<main id="mainContent">

<div class="page lazy-page" id="page-acordes" data-partial="pages/ref/acordes.html"></div>

<div class="page lazy-page" id="page-fretboard" data-partial="pages/ref/fretboard.html">
  <div class="page-inner"></div>
</div>


<div class="page lazy-page" id="page-circulo" data-partial="pages/ref/circulo.html"></div>

<!-- ═══ PAGE: AUDIO ═══ -->

<!-- ═══ PAGE: METRÓNOMO ═══ -->
<div class="page lazy-page" id="page-metro" data-partial="pages/tools/metro.html">
  <div class="page-inner metro-layout-refined"></div>
</div>

<!-- ═══ PAGE: KEY DETECTOR ═══ -->
<div class="page lazy-page" id="page-keydetector" data-partial="pages/tools/keydetector.html">
  <div class="page-inner compact"></div>
</div>

<script>
function kdSwitchTab(btn) {
  var picker = btn.closest('.kd-picker');
  picker.querySelectorAll('.kd-picker-tab').forEach(function(t){ t.classList.remove('is-active'); });
  picker.querySelectorAll('.kd-picker-panel').forEach(function(p){ p.classList.remove('is-active'); });
  btn.classList.add('is-active');
  var panel = document.getElementById(btn.dataset.kdTab);
  if (panel) panel.classList.add('is-active');
}
</script>

<!-- ═══ PAGE: PROGRESSION GENERATOR (v3 Premium Remaster) ═══ -->
<div class="page lazy-page" id="page-progresiones" data-partial="pages/tools/progresiones.html">
  <div class="page-inner"></div>
</div>



<!-- ═══ PAGE: AFINADOR ═══ -->
<div class="page lazy-page" id="page-tuner" data-partial="pages/tools/tuner.html">
  <div class="page-inner compact"></div>
</div>

<!-- ═══ PAGE: GRABADORA ═══ -->
<div class="page lazy-page" id="page-recorder" data-partial="pages/tools/recorder.html">
  <div class="page-inner compact"></div>
</div>

<!-- ═══ MODAL: EDITAR GRABACIÓN ═══ -->
<div id="editRecordingModal" style="display:none">
  <div class="rec-editor-panel">
    <!-- Header Minimalista -->
    <div class="rec-editor-header">
      <div class="rec-editor-title-container">
        <input id="editRecName" class="rec-editor-name-input" type="text" placeholder="Nombre de la grabación">
        <div class="rec-editor-glow-line"></div>
      </div>
      <button class="rec-editor-close-btn" data-action="closeEditRecordingModal">✕</button>
    </div>

    <!-- Eje del Editor -->
    <div class="rec-editor-body">
      <div class="rec-editor-waveform-wrapper" id="editWaveformWrapper">
         <canvas id="editWaveformCanvas" width="520" height="120"></canvas>
         
         <!-- Sombras de exclusión de audio -->
         <div class="rec-editor-dim-overlay left" id="editTrimOverlayLeft"></div>
         <div class="rec-editor-dim-overlay right" id="editTrimOverlayRight"></div>
         
         <!-- Manejadores interactivos arrastrables -->
         <div class="rec-editor-handle left" id="editTrimHandleStart">
           <div class="rec-editor-handle-line"></div>
           <div class="rec-editor-handle-trigger">
             <svg width="6" height="12" viewBox="0 0 6 12" fill="none"><path d="M1 2V10M5 2V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
           </div>
           <div class="rec-editor-handle-label" id="editTrimStartTimeLabel">0.0s</div>
         </div>
         
         <div class="rec-editor-handle right" id="editTrimHandleEnd">
           <div class="rec-editor-handle-line"></div>
           <div class="rec-editor-handle-trigger">
             <svg width="6" height="12" viewBox="0 0 6 12" fill="none"><path d="M1 2V10M5 2V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
           </div>
           <div class="rec-editor-handle-label" id="editTrimEndTimeLabel">0.0s</div>
         </div>
      </div>

      <!-- Barra de herramientas flotante -->
      <div class="rec-editor-toolbar">
         <div class="rec-editor-info-pill">
            <span class="rec-pill-accent" id="editTrimDuration">0.0s</span>
            <span class="rec-pill-sep">/</span>
            <span id="editTrimTotalDuration">0.0s</span>
         </div>
         <button id="editPreviewBtn" class="rec-editor-play-btn" data-action="previewEditedAudio" title="Previsualizar">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4"/></svg>
         </button>
      </div>
      
      <!-- Inputs ocultos para compatibilidad con la lógica de guardado y corte del backend -->
      <input id="editTrimStart" type="hidden" value="0">
      <input id="editTrimEnd" type="hidden" value="0">
    </div>

    <!-- Botones de Acción Redondeados -->
    <div class="rec-editor-footer">
      <button class="rec-editor-btn rec-editor-btn--cancel" data-action="closeEditRecordingModal">Cancelar</button>
      <button class="rec-editor-btn rec-editor-btn--save" data-action="saveRecordingEdits">
        Guardar cambios
      </button>
    </div>
  </div>
</div>

<!-- ═══ MINIATURA FLOTANTE GRABADORA ═══ -->
<div id="recMiniWidget" data-draggable="true" style="display:none">
  <div class="rec-mini-top">
    <div class="rec-mini-dot"></div>
    <div id="recMiniTimer">00:00</div>
  </div>

  <div class="rec-mini-progress-track">
    <div id="recMiniProgress"></div>
  </div>

  <div class="rec-mini-actions">
    <button id="recMiniPauseBtn" class="rec-mini-btn rec-mini-btn--primary" data-action="recMiniTogglePause" title="Pausar/Reanudar">
      <span class="rec-mini-icon"><svg viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></span>
    </button>
    <button class="rec-mini-btn rec-mini-btn--danger" data-action="recMiniStop" title="Detener">
      <span class="rec-mini-icon"><svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></span>
    </button>
    <button class="rec-mini-btn rec-mini-btn--expand" data-action="recMiniExpand" title="Ir a grabadora">
      <span class="rec-mini-icon"><svg viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></span>
    </button>
  </div>
</div>
<!-- ═══ PAGE: CHORD FINDER — PREMIUM REDESIGN v2 ═══ -->
<div class="page lazy-page" id="page-chordfinder" data-partial="pages/tools/chordfinder.html">
  <div class="page-inner compact"></div>
</div>

<!-- ═══ PAGE: TRANSPOSITOR ═══ -->
<div class="page lazy-page" id="page-transpositor" data-partial="pages/tools/transpositor.html">
  <div class="page-inner compact"></div>
</div>


<!-- ═══ PAGE: LICK GENERATOR ═══ -->


<!-- ═══ PAGE: AUDIO ANALYZER ═══ -->
<div class="page lazy-page" id="page-audio-analyzer" data-partial="pages/tools/audio-analyzer.html">
  <div class="page-inner"></div>
</div>

<!-- ═══ PAGE: BACKING TRACKS ═══ -->
<div class="page lazy-page" id="page-backing" data-partial="pages/tools/backing.html">
  <div class="page-inner"></div>
</div>

</main>

<!-- ════════════════════════════════════════════════════════════════
     PANEL DE FAVORITOS CENTRALIZADO
     ════════════════════════════════════════════════════════════════ -->
<div class="favorites-overlay" id="favoritesOverlay" data-action="toggleFavoritesPanel"></div>
<div class="favorites-panel" id="favoritesPanel">
  <!-- Header -->
  <div class="fav-panel-header">
    <div class="fav-panel-title">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
      </svg>
      <h2>Mis Favoritos</h2>
      <span class="fav-total-count" id="favTotalCount">0</span>
    </div>
    <button class="fav-panel-close" data-action="toggleFavoritesPanel" title="Cerrar">✕</button>
  </div>
  
  <!-- Body -->
  <div class="fav-panel-body" id="favPanelBody">
    <!-- Acordes favoritos -->
    <div class="fav-section" id="favChordsSection" style="display:none">
      <div class="fav-section-header" onclick="favToggleSection(this,'favChordsGrid')" role="button" tabindex="0" aria-expanded="true">
        <div class="fav-section-title-group">
          <div class="fav-section-title">ACORDES</div>
          <div class="fav-section-count" id="favChordsCount">0</div>
        </div>
        <div class="fav-section-chevron">▾</div>
      </div>
      <div class="fav-section-body" id="favChordsGridWrap">
        <div class="fav-chord-grid" id="favChordsGrid"></div>
      </div>
    </div>

    <!-- Escalas favoritas -->
    <div class="fav-section" id="favScalesSection" style="display:none">
      <div class="fav-section-header" onclick="favToggleSection(this,'favScalesList')" role="button" tabindex="0" aria-expanded="true">
        <div class="fav-section-title-group">
          <div class="fav-section-title">ESCALAS</div>
          <div class="fav-section-count" id="favScalesCount">0</div>
        </div>
        <div class="fav-section-chevron">▾</div>
      </div>
      <div class="fav-section-body" id="favScalesListWrap">
        <div class="fav-list" id="favScalesList"></div>
      </div>
    </div>

    <!-- Progresiones favoritas -->
    <div class="fav-section" id="favProgressionsSection" style="display:none">
      <div class="fav-section-header" onclick="favToggleSection(this,'favProgressionsList')" role="button" tabindex="0" aria-expanded="true">
        <div class="fav-section-title-group">
          <div class="fav-section-title">PROGRESIONES</div>
          <div class="fav-section-count" id="favProgressionsCount">0</div>
        </div>
        <div class="fav-section-chevron">▾</div>
      </div>
      <div class="fav-section-body" id="favProgressionsListWrap">
        <div class="fav-list" id="favProgressionsList"></div>
      </div>
    </div>
    
    <!-- Empty state Premium Mejorado -->
    <div class="fav-empty" id="favEmptyState">
      <div class="fav-empty-illustration">
        <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10" stroke="var(--teal)" stroke-dasharray="4 4" opacity="0.3">
            <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="20s" repeatCount="indefinite" />
          </circle>
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="rgba(0, 212, 180, 0.1)" stroke="var(--teal)" stroke-width="1.5">
            <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite" />
          </path>
          <circle cx="12" cy="12" r="3" fill="var(--gold)" opacity="0.5">
            <animate attributeName="r" values="2;4;2" dur="4s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>
      <h3 style="font-family:var(--font-heading);font-weight:800;font-size:1.4rem;color:var(--text);margin-bottom:0.5rem">Tu biblioteca está lista</h3>
      <p style="font-size:0.9rem;color:var(--muted);max-width:280px;margin:0 auto 1.5rem;line-height:1.6">
        Comienza a guardar tus acordes, escalas y progresiones favoritas para tenerlas siempre a mano en la nube.
      </p>
      <button class="fav-item-btn" onclick="toggleFavoritesPanel()" style="padding: 0.8rem 1.5rem; border-radius: 50px;">EMPEZAR A EXPLORAR</button>
    </div>
  </div>
</div>

<footer class="site-footer">
  <div class="sf-top">
    <div class="sf-brand">
      <div class="sf-logo"><span style="color:var(--orange)">K</span>UERDA</div>
      <p class="sf-tagline">El toolkit gratuito para músicos.</p>
      <p class="sf-copy">HECHO POR MÚSICOS, PARA MÚSICOS.</p>
    </div>
    <div class="sf-links">
      <div class="sf-col">
        <div class="sf-col-title">APRENDER</div>
        <a href="#" data-goto="acordes">Biblioteca de Acordes</a>
      </div>
      <div class="sf-col">
        <div class="sf-col-title">HERRAMIENTAS</div>
        <a href="#" data-goto="fretboard">Diapasón</a>
        <a href="#" data-goto="tuner">Afinador</a>
        <a href="#" data-goto="metro">Metrónomo</a>
        <a href="#" data-goto="progresiones">Progresiones</a>
        <a href="#" data-goto="backing">Banda Kuerda</a>
        <a href="#" data-goto="chordfinder">ID Acordes</a>
      </div>
      <div class="sf-col">
        <div class="sf-col-title">MÁS</div>
        <a href="#" data-goto="keydetector">Detector de Tonalidad</a>
        <a href="#" data-goto="transpositor">Transpositor</a>
        <a href="#" data-goto="circulo">Círculo Quintas</a>
      </div>
    </div>
  </div>
  <div class="sf-bottom">
    <span class="sf-bottom-left">© 2020 Kuerda · v1.0</span>
    <div class="sf-bottom-center">
      <button data-action="scrollToHero" class="sf-back-top">↑ VOLVER ARRIBA</button>
    </div>
    <span class="sf-bottom-right">GRATIS EN LO ESENCIAL · SIN INSTALACIÓN</span>
  </div>
</footer>




<!-- ═══ MODAL ═══ -->
<div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
  <div class="modal" id="modal">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.2rem">
      <div class="modal-title" id="modalTitle" style="margin-bottom:0"></div>
      <div style="display:flex;gap:.5rem;flex-shrink:0">
        <button class="krd-share-btn" id="modalShareBtn" data-action="krdShare" data-arg="scale" title="Compartir escala">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
          COMPARTIR
        </button>
        <button class="modal-close" data-action="closeModalDirect">✕</button>
      </div>
    </div>

    <div class="modal-body" id="modalBody"></div>
  </div>
</div>


<!-- Auth System cargado vía main.js -->

<!-- ═══ SEARCH OVERLAY ═══ -->
<div id="searchOverlay">
  <div class="search-dialog">
    <div class="search-input-bar">
      <span class="search-icon-wrap"><svg width="20" height="20" viewBox="0 0 50 50" fill="currentColor"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"/></svg></span>
      <input id="searchInput" type="text" placeholder="Buscar escala, acorde, herramienta..."
        oninput="runSearch(this.value)" autocomplete="off" spellcheck="false">
      <kbd class="search-shortcut">Ctrl+K</kbd>
      <button data-action="closeSearch" class="search-close-btn" aria-label="Cerrar búsqueda"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <div id="searchDropdown" class="search-dropdown">
      <div class="search-empty-hint">Escribe para buscar...</div>
    </div>
  </div>
</div>

<!-- ═══ TOAST ═══ -->
<div id="toast"></div>

<!-- styles in /assets/css/pages.css -->


<!-- ═══ MOBILE CATEGORY PANEL ═══ -->
<div id="mobCatPanel" onclick="if(event.target===this)closeMobCat()">
  <div id="mobCatContent">
    <div id="mobCatHeader">
      <span id="mobCatTitle">Categoría</span>
      <button id="mobCatCloseBtn" data-action="closeMobCat" aria-label="Cerrar">✕</button>
    </div>
    <div id="mobCatGrid"></div>
  </div>
</div>

<!-- ── Mobile: active tool name indicator ── -->
<div id="mobileToolLabel" aria-live="polite"></div>

<!-- ═══ MOBILE BOTTOM NAV ═══ -->

  <div id="sn-tt-bar"></div>
  <div id="sn-tt-body">
    <span id="sn-tt-name"></span>
    <span id="sn-tt-group"></span>
  </div>
</div>

<!-- ═══ SEO CONTENT — Visible to crawlers, hidden visually ═══ -->
<!-- FIX: usar position:fixed+left:-9999px en lugar de clip:rect (falla en iOS Safari) -->
<section aria-hidden="true" id="seo-text" style="position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none;user-select:none;visibility:hidden">
  <h2>Herramienta para músicos y guitarristas gratis</h2>
  <p>Kuerda es una aplicación web gratuita para músicos y guitarristas de todos los niveles. Explora acordes, practica escalas y analiza tonalidades desde tu navegador sin necesidad de instalar nada.</p>
  <h2>Acordes de guitarra</h2>
  <p>Accede a la Biblioteca de Acordes de guitarra con más de 600 diagramas organizados en 17 categorías: abiertos, cejilla, séptima, jazz, aumentados, disminuidos, sus, novenas, oncenas, slash chords y más.</p>
  <h2>Escalas de guitarra</h2>
  <p>Explora escalas con sus patrones visuales en el diapasón: pentatónica menor, pentatónica mayor, blues, modos griegos (dórico, frigio, lidio, mixolidio, locrio), escala menor natural, armónica, melódica y más.</p>
  <h2>Detector de tonalidad</h2>
  <p>Escribe los acordes de cualquier canción y Kuerda detecta automáticamente la tonalidad, diferencia mayor de menor y recomienda la escala ideal para improvisar.</p>
  <h2>Transpositor de acordes</h2>
  <p>Transpón cualquier canción a cualquier tonalidad al instante. Ideal para adaptar canciones a tu voz o para tocar con otros instrumentos en diferente afinación.</p>
  <h2>Generador de progresiones de acordes</h2>
  <p>Genera progresiones armónicamente correctas en más de 14 géneros musicales: Rock, Blues, Pop, Jazz, Flamenco, Funk, Reggae, Latin, Soul, Metal, Country, Bossa Nova, EDM y Gospel.</p>
</section>


<!-- PWA manejado por src/core/pwa.js vía main.js -->


<!-- ═══ AUTH MODAL (Register / Login) ═══ -->
<div id="authModal" role="dialog" aria-modal="true">
  <div class="auth-modal-box">
    <button class="auth-modal-close" data-action="closeAuthModal">✕</button>
    <div class="auth-modal-logo"><span class="logo-k">K</span>UERDA</div>
    <div class="auth-modal-tagline" id="authModalTitle">Tu herramienta de guitarra</div>
    <div class="auth-modal-sub" id="authModalSub" style="display:none"></div>

    <!-- Tab row -->
    <div class="auth-tab-row">
      <button class="auth-tab active" id="authTabRegister" data-action="switchAuthTab" data-arg="register">CREAR CUENTA</button>
      <button class="auth-tab"        id="authTabLogin"    data-action="switchAuthTab" data-arg="login">INICIAR SESIÓN</button>
    </div>

    <!-- ── REGISTER screen ── -->
    <div id="authScreenRegister" class="auth-screen active">
      <button class="auth-btn-google" data-action="loginWithGoogle">
        <svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.964 10.707A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.707V4.961H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.039l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.961L3.964 6.293C4.672 4.166 6.656 3.58 9 3.58z"/></svg>
        Registrarse con Google
      </button>
      <div class="auth-divider">o con email y contraseña</div>
      <div class="auth-field">
        <label>EMAIL</label>
        <input type="email" id="regEmail" placeholder="tu@email.com" autocomplete="email">
      </div>
      <div class="auth-field">
        <label>CONTRASEÑA</label>
        <input type="password" id="regPass" placeholder="Mínimo 6 caracteres" autocomplete="new-password"
          onkeydown="if(event.key==='Enter')submitRegister()">
      </div>
      <div class="auth-error" id="regError"></div>
      <button class="auth-btn-primary" id="regBtn" data-action="submitRegister">CREAR CUENTA GRATIS</button>
      <div class="auth-modal-foot">¿Ya tienes cuenta? <span data-action="switchAuthTab" data-arg="login">Inicia sesión</span></div>
    </div>

    <!-- ── LOGIN screen ── -->
    <div id="authScreenLogin" class="auth-screen">
      <button class="auth-btn-google" data-action="loginWithGoogle">
        <svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.964 10.707A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.707V4.961H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.039l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.961L3.964 6.293C4.672 4.166 6.656 3.58 9 3.58z"/></svg>
        Continuar con Google
      </button>
      <div class="auth-divider">o con email y contraseña</div>
      <div class="auth-field">
        <label>EMAIL</label>
        <input type="email" id="loginEmail" placeholder="tu@email.com" autocomplete="email">
      </div>
      <div class="auth-field">
        <label>CONTRASEÑA</label>
        <input type="password" id="loginPass" placeholder="Tu contraseña" autocomplete="current-password"
          onkeydown="if(event.key==='Enter')submitLogin()">
        <span class="auth-forgot-link" data-action="switchAuthTab" data-arg="forgot">¿Olvidaste tu contraseña?</span>
      </div>
      <div class="auth-error" id="loginError"></div>
      <button class="auth-btn-primary" id="loginBtn" data-action="submitLogin">ENTRAR</button>
      <div class="auth-modal-foot">¿No tienes cuenta? <span data-action="switchAuthTab" data-arg="register">Regístrate gratis</span></div>
    </div>

    <!-- ── FORGOT PASSWORD screen ── -->
    <div id="authScreenForgot" class="auth-screen">
      <p class="auth-modal-sub">Te enviaremos un link para restablecer tu contraseña.</p>
      <div class="auth-field">
        <label>EMAIL</label>
        <input type="email" id="forgotEmail" placeholder="tu@email.com" autocomplete="email"
          onkeydown="if(event.key==='Enter')submitForgot()">
      </div>
      <div class="auth-error" id="forgotError"></div>
      <div class="auth-ok"    id="forgotOk"></div>
      <button class="auth-btn-primary" id="forgotBtn" data-action="submitForgot">ENVIAR LINK</button>
      <div class="auth-modal-foot"><span data-action="switchAuthTab" data-arg="login">← Volver al login</span></div>
    </div>

    <!-- ── EMAIL CONFIRM screen (post-register) ── -->
    <div id="authScreenConfirm" class="auth-screen">
      <div class="auth-sent-icon"><svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="color:var(--teal)"><path d="M22 13V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h8"/><path d="M22 7l-10 7L2 7"/><path d="M16 19h6M19 16l3 3-3 3"/></svg></div>
      <p class="auth-modal-sub">
        Revisa tu email en <strong id="authConfirmEmail"></strong><br>
        Haz clic en el link para confirmar tu cuenta.
      </p>
      <div class="auth-modal-foot">
        <span data-action="switchAuthTab" data-arg="login">← Ya confirmé, iniciar sesión</span>
        <span style="margin-left:1rem;color:var(--muted);cursor:pointer" onclick="window.resendConfirmEmail?.()">Reenviar email ↻</span>
      </div>
    </div>

    <div class="auth-terms-foot">
      Al continuar aceptas nuestros <a href="#">Términos de uso</a>
    </div>
  </div>
</div>



<!-- ════════════════════════════════════════════════════════════
     PROFILE DROPDOWN — Compact Vercel-style
════════════════════════════════════════════════════════════ -->
<div id="profileDropdown" class="profile-dropdown">
  <div class="profile-dropdown-backdrop" onclick="closeProfileModal()"></div>
  <div class="profile-dropdown-menu" id="profileDropdownMenu">
    <!-- Manilla de arrastre (visible solo en móvil) -->
    <div class="profile-dropdown-handler" id="profileDropdownHandler">
      <span class="profile-dropdown-handler__bar"></span>
    </div>

    <!-- ═══ PÁGINA: PERFIL ═══ -->
    <div class="profile-dropdown-page profile-dropdown-page--main active" id="profilePageMain">
      <!-- Header tipo YouTube -->
      <div class="profile-dropdown-header">
        <div class="profile-dropdown-avatar-container">
          <div class="profile-dropdown-avatar" id="profileDropdownAvatar">
            <span class="profile-avatar-text" id="profileAvatarText">?</span>
          </div>
          <!-- Nivel Label -->
          <div class="profile-avatar-badge-level" id="profileHeaderLevel">---</div>
        </div>
        <div class="profile-dropdown-meta">
          <div class="profile-dropdown-name-row">
            <span class="profile-dropdown-name" id="profileDropdownName">Usuario</span>
            <span class="profile-dropdown-badge" id="profileDropdownBadge">PRO</span>
          </div>
          <span class="profile-dropdown-email" id="profileDropdownEmail"></span>
          <span class="profile-dropdown-since" id="profileDropdownSince"></span>
        </div>
      </div>

      <div class="profile-dropdown-divider"></div>

      <!-- Banner upgrade (solo visible para FREE) -->
      <div class="profile-dropdown-upgrade" id="profileDropdownUpgrade" style="display:none">
        <div class="profile-dropdown-upgrade__text">
          <span class="profile-dropdown-upgrade__title">Desbloquea todo</span>
          <span class="profile-dropdown-upgrade__sub">Progresiones ilimitadas, análisis de audio y más</span>
        </div>
        <button class="profile-dropdown-upgrade__btn" onclick="window.kuerdaShowPaywall('profile','dropdown_upgrade')">
          Obtener PRO
        </button>
      </div>

      <!-- Menu items tipo YouTube -->
      <button class="profile-dropdown-item profile-dropdown-item--nav" onclick="showProfilePage('stats')" style="display:none;">
        <div class="profile-dropdown-item-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="3 17 9 11 15 15 21 9"/></svg>
        </div>
        <span class="profile-dropdown-item-label">Estadísticas</span>
        <svg class="profile-dropdown-item-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
      </button>

      <button class="profile-dropdown-item profile-dropdown-item--nav" onclick="showProfilePage('profile-settings')">
        <div class="profile-dropdown-item-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <span class="profile-dropdown-item-label">Configuración del Perfil</span>
        <svg class="profile-dropdown-item-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
      </button>

      <button class="profile-dropdown-item profile-dropdown-item--nav" onclick="showProfilePage('settings')">
        <div class="profile-dropdown-item-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09A1.65 1.65 0 00-1.51 1z"/></svg>
        </div>
        <span class="profile-dropdown-item-label">Configuración</span>
        <svg class="profile-dropdown-item-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
      </button>

      <div class="profile-dropdown-divider"></div>

      <button class="profile-dropdown-item profile-dropdown-item--danger" onclick="try{console.log('[logoutBtn] Click detectado');if(typeof krdLogout==='function'){krdLogout();}else{console.error('[logoutBtn] krdLogout no disponible');localStorage.removeItem('sb-nuejbupcvzhobyldqiwu-auth-token');for(var i=localStorage.length-1;i>=0;i--){var k=localStorage.key(i);if(k&&k.startsWith('sb-'))localStorage.removeItem(k);}window._supabaseClient=null;location.reload();}}catch(e){console.error('[logoutBtn] Error:',e);location.reload();}">
        <div class="profile-dropdown-item-icon profile-dropdown-item-icon--danger">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        </div>
        <span class="profile-dropdown-item-label">Cerrar sesión</span>
      </button>
    </div>

    <!-- ═══ PÁGINA: CONFIGURACIÓN DE PERFIL ═══ -->
    <div class="profile-dropdown-page profile-dropdown-page--profile-settings" id="profilePageProfileSettings">
      <div class="profile-dropdown-subheader">
        <button class="profile-dropdown-back" onclick="showProfilePage('main')">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          Atrás
        </button>
        <span class="profile-dropdown-subtitle">Editar Perfil</span>
      </div>
      <div class="profile-dropdown-scroll">
        <!-- FOTO Y NOMBRE -->
        <div class="settings-group">
          <div class="settings-group-label">Identidad</div>
          <div class="settings-row settings-row--stacked">
            <div class="profile-edit-avatar-section">
               <div class="profile-edit-avatar-preview" id="profileEditAvatarPreview" onclick="document.getElementById('profileAvatarInput').click()">
                 <!-- Se llena vía JS -->
               </div>
               <button class="settings-action-btn" onclick="document.getElementById('profileAvatarInput').click()">Cambiar foto</button>
               <input type="file" id="profileAvatarInput" accept="image/*" style="display:none" onchange="handleProfileAvatarUpload(this)">
            </div>
            <div class="profile-edit-name-section">
               <div class="settings-row-label">Nombre completo</div>
               <div class="profile-name-input-row">
                 <input type="text" class="settings-input" id="profileEditNameInput" placeholder="Tu nombre">
                 <button class="settings-action-btn settings-action-btn--save" id="profileSaveNameBtn" onclick="var inp=document.getElementById('profileEditNameInput');if(inp)saveProfileName(inp)">Guardar</button>
               </div>
            </div>
          </div>
        </div>

        <div class="settings-divider"></div>

        <!-- INSTRUMENTO Y NIVEL -->
        <div class="settings-group">
          <div class="settings-group-label">Tu música</div>
          <div class="settings-row settings-row--stacked">
            <div>
              <div class="settings-row-label">Instrumento principal</div>
              <div class="settings-row-desc">Personaliza tu toolkit</div>
            </div>
            <div class="pill-selector pill-selector--grid" id="profileEditInstrumentPills">
              <button class="pill-option" data-value="guitar" onclick="setInstrument('guitar')">Guitarra</button>
              <button class="pill-option" data-value="bass" onclick="setInstrument('bass')">Bajo</button>
              <button class="pill-option" data-value="ukulele" onclick="setInstrument('ukulele')">Ukelele</button>
              <button class="pill-option" data-value="piano" onclick="setInstrument('piano')">Piano</button>
            </div>
          </div>
          <div class="settings-row settings-row--stacked" style="margin-top:1.5rem">
            <div>
              <div class="settings-row-label">Nivel actual</div>
              <div class="settings-row-desc">Afecta a las recomendaciones</div>
            </div>
            <div class="pill-selector" id="profileEditLevelPills">
              <button class="pill-option" data-value="beginner" onclick="setLevel('beginner')">BÁSICO</button>
              <button class="pill-option" data-value="intermediate" onclick="setLevel('intermediate')">MID</button>
              <button class="pill-option" data-value="advanced" onclick="setLevel('advanced')">PRO</button>
            </div>
          </div>
        </div>

        <div class="settings-divider"></div>

        <!-- SEGURIDAD (Eliminado de aquí, movido a Configuración General) -->

        <div class="settings-divider"></div>
        <div class="profile-dropdown-footer">
          <div class="footer-version">KUERDA ID · PERFIL</div>
        </div>
      </div>
    </div>
    <div class="profile-dropdown-page profile-dropdown-page--settings" id="profilePageSettings">
      <!-- Subheader con flecha atrás -->
      <div class="profile-dropdown-subheader">
        <button class="profile-dropdown-back" onclick="showProfilePage('main')">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          Atrás
        </button>
        <span class="profile-dropdown-subtitle">Configuración</span>
      </div>
      <!-- Scroll body -->
      <div class="profile-dropdown-scroll">
        <!-- AUDIO -->
        <div class="settings-group">
          <div class="settings-group-label">Audio</div>
          <div class="settings-row settings-row--stacked">
            <div>
              <div class="settings-row-label">Volumen general</div>
              <div class="settings-row-desc">Nivel de audio de la app</div>
            </div>
            <div class="slider-row">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg>
              <input type="range" class="settings-slider" id="cfgVolumeSlider" min="0" max="100" value="80" oninput="setVolume(this.value)">
              <span class="slider-value" id="cfgVolumeValue">80%</span>
            </div>
          </div>
        </div>
        <div class="settings-divider"></div>
        <!-- PRACTICA -->
        <div class="settings-group">
          <div class="settings-group-label">Práctica</div>
          <div class="settings-row settings-row--stacked">
            <div>
              <div class="settings-row-label">Meta diaria</div>
              <div class="settings-row-desc">Minutos de práctica objetivo</div>
            </div>
            <div class="pill-selector" id="cfgGoalPills">
              <button class="pill-option" data-value="15" onclick="setDailyGoal('15')">15 min</button>
              <button class="pill-option active" data-value="30" onclick="setDailyGoal('30')">30 min</button>
              <button class="pill-option" data-value="45" onclick="setDailyGoal('45')">45 min</button>
              <button class="pill-option" data-value="60" onclick="setDailyGoal('60')">60 min</button>
            </div>
          </div>
        </div>
        <div class="settings-divider"></div>
        <!-- APARIENCIA -->
        <div class="settings-group">
          <div class="settings-group-label">Apariencia</div>
          <div class="settings-row settings-row--stacked">
            <div>
              <div class="settings-row-label">Tema</div>
              <div class="settings-row-desc">Elige entre oscuro y claro</div>
            </div>
            <div class="pill-selector" id="cfgThemePills">
              <button class="pill-option active" data-theme="dark" onclick="window.setThemeConfig('dark')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/></svg>
                Oscuro
              </button>
              <button class="pill-option" data-theme="light" onclick="window.setThemeConfig('light')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg>
                Claro
              </button>
              <button class="pill-option" data-theme="system" onclick="window.setThemeConfig('system')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                Sistema
              </button>
            </div>
          </div>
        </div>
        <div class="settings-divider"></div>
        <!-- IDIOMA -->
        <div class="settings-group">
          <div class="settings-group-label">Idioma</div>
          <div class="pill-selector" id="cfgLangPills">
            <button class="pill-option active" data-lang="es" onclick="window._setLang?.('es')">Español</button>
            <button class="pill-option" data-lang="en" onclick="window._setLang?.('en')">English</button>
          </div>
        </div>
        <!-- SEGURIDAD -->
        <div class="settings-group" id="secGroup">
          <div class="settings-group-label">Seguridad</div>
          <div class="settings-row settings-row--stacked">
            <div>
              <div class="settings-row-label">Cambiar contraseña</div>
              <div class="settings-row-desc">Actualiza la contraseña de tu cuenta</div>
            </div>
            <div class="security-account" id="secAccountInfo">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              <span id="secAccountEmail"></span>
            </div>
            <div class="password-form">
              <input type="password" class="settings-input settings-input--pass" id="secPassCurrent" placeholder="Contraseña actual" autocomplete="current-password">
              <input type="password" class="settings-input settings-input--pass" id="secPassNew" placeholder="Nueva contraseña" autocomplete="new-password">
              <input type="password" class="settings-input settings-input--pass" id="secPassConfirm" placeholder="Confirmar nueva contraseña" autocomplete="new-password">
              <button class="settings-action-btn settings-action-btn--full" id="secPassBtn" onclick="submitPasswordChange()">Cambiar contraseña</button>
            </div>
            <div class="security-msg" id="secPassMsg"></div>
          </div>
        </div>
        <div class="settings-divider"></div>
        <div class="profile-dropdown-footer">
          <div class="footer-links">
            <a href="#" onclick="showToast('Soporte próximamente','info')">Soporte</a>
            <span class="footer-dot">•</span>
            <a href="#" onclick="showToast('Términos próximamente','info')">Términos</a>
            <span class="footer-dot">•</span>
            <a href="#" onclick="showToast('Privacidad próximamente','info')">Privacidad</a>
          </div>
          <div class="footer-version">KUERDA · v9.5 PREMIUM</div>
        </div>
      </div>
    </div>

    <!-- ═══ PÁGINA: ESTADÍSTICAS ═══ -->
    <div class="profile-dropdown-page profile-dropdown-page--stats" id="profilePageStats">
      <div class="profile-dropdown-subheader">
        <button class="profile-dropdown-back" onclick="showProfilePage('main')">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          Atrás
        </button>
        <span class="profile-dropdown-subtitle">Estadísticas</span>
      </div>
      <div class="profile-dropdown-content profile-dropdown-content--stats" id="profileStatsContent">
        <!-- Renderizado por JS -->
      </div>
    </div>

  </div>
</div>


<!-- ═══ PWA INSTALL PROMPT ═══ -->
<div id="pwaPrompt" role="dialog" aria-label="Instalar Kuerda">
  <div class="pwa-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M9 12c-2.5.5-4 2.5-3.5 4.5S8 20 10 19.5c1-.2 2-.8 2-2"/><path d="M14 10L9 12M14 10l3-6"/><circle cx="17" cy="4" r=".7" fill="currentColor"/></svg></div>
  <div class="pwa-body">
    <div class="pwa-title">Instala Kuerda</div>
    <div class="pwa-sub">Tenla a mano cuando practiques. Sin internet.</div>
  </div>
  <div class="pwa-actions">
    <button class="pwa-btn-install" id="pwaInstallBtn">INSTALAR</button>
    <button class="pwa-btn-close" id="pwaCloseBtn">Ahora no</button>
  </div>
</div>

<!-- ═══ SHARE TOAST (ELIMINADO) ═══ -->


  <!--
    === KUERDA Script Strategy (MIGRACIÓN COMPLETADA) ===
    - Data: src/data/ cargado vía main.js (ES6 modules)
    - Core: src/core/ (auth, freemium, router, ui, streak, pwa)
    - Legacy bridges: src/legacy/ para compatibilidad con app.js
    - app.js: funcionalidad no migrada aún
  -->
  <!-- Audio Context Manager para móvil -->
  <script defer src="/assets/js/audio-context-manager.js"></script>
  
  <!-- Promesa para sincronizar carga de datos con main.js -->
  <script>
    window._kuerdaDataReady = new Promise(function(resolve) {
      window._resolveKuerdaDataReady = resolve;
    });
  </script>
  
  <!-- app.js retirado en T-33 — toda la lógica vive en src/ -->
  
  <!-- Main entry point - Vite module (carga datos y resuelve promesa) -->

<!-- ═══ BOTTOM NAVIGATION MOBILE ═══ -->
<nav id="mobileBottomNav" aria-label="Navegación móvil" class="mob-nav-liquid-wrap">
  <!-- Píldora indicadora deslizante detrás de la tab activa -->
  <div id="mobNavIndicator" class="mob-nav-indicator"></div>

  <!-- Inicio -->
  <button class="mob-nav-btn" id="mobBtn-home" aria-label="Inicio">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 10.5l9-7.5 9 7.5v10.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/>
    </svg>
    Inicio
  </button>

  <!-- FAB Central (⊕) -->
  <div class="mob-nav-fab-wrap">
    <button class="mob-nav-fab" id="mobNavFab" aria-label="Menú de herramientas">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"/>
        <line x1="5" y1="12" x2="19" y2="12"/>
      </svg>
    </button>
  </div>

  <!-- Buscar -->
  <button class="mob-nav-btn" id="mobBtn-search" aria-label="Buscar">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="7"/>
      <line x1="21" y1="21" x2="16" y2="16"/>
    </svg>
    Buscar
  </button>
</nav>

<!-- ═══ BOTTOM SHEET DRAWER (MODAL DE HERRAMIENTAS) ═══ -->
<div id="mobNavBackdrop" class="bottom-sheet-backdrop"></div>
<div id="mobNavSheet" class="bottom-sheet-drawer" aria-modal="true" role="dialog" aria-labelledby="mobSheetTitle">
  <div id="mobNavSheetHandler" class="bottom-sheet-handler"></div>
  <div id="mobNavSheetContent" class="bottom-sheet-content">
    <div class="bottom-sheet-header">
      <h3 id="mobSheetTitle" class="bottom-sheet-title">Toolkit Musical</h3>
      <span class="bottom-sheet-subtitle">Elige una herramienta para comenzar</span>
    </div>

    <!-- CATEGORÍA: CREAR -->
    <div class="bottom-sheet-category category-crear">
      <h4 class="bottom-sheet-category-title">Crear</h4>
      <div class="bottom-sheet-grid">
        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('progresiones')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.91 5.89L20 10.74l-4.57 4.19L16.5 22 12 18.5 7.5 22l1.07-7.07L4 10.74l6.09-1.85z"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Generador Progresiones</span>
          <span class="bottom-sheet-item-badge">PRO</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('backing')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Banda Kuerda</span>
          <span class="bottom-sheet-item-badge">PRO</span>
        </button>

      </div>
    </div>

    <!-- CATEGORÍA: ANALIZAR -->
    <div class="bottom-sheet-category category-analizar">
      <h4 class="bottom-sheet-category-title">Analizar</h4>
      <div class="bottom-sheet-grid">
        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('audio-analyzer')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Analizador Canciones</span>
          <span class="bottom-sheet-item-badge">PRO</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('keydetector')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="4"/><path d="M16 18V2l6 4"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Detector Tonalidad</span>
          <span class="bottom-sheet-item-badge">PRO</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('chordfinder')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          </div>
          <span class="bottom-sheet-item-label">ID de Acordes</span>
          <span class="bottom-sheet-item-badge">PRO</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('transpositor')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9-9c1.657 0 3 4.03 3 9s-1.343 9-3 9m0-18c-1.657 0-3 4.03-3 9s1.343 9 3 9"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Transpositor</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('circulo')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Círculo Quintas</span>
        </button>
      </div>
    </div>

    <!-- CATEGORÍA: PRACTICAR -->
    <div class="bottom-sheet-category category-practicar">
      <h4 class="bottom-sheet-category-title">Practicar</h4>
      <div class="bottom-sheet-grid">
        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('tuner')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Afinador</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('metro')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Metrónomo</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('fretboard')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12"/><path d="M6 8h12"/><path d="M6 13h12"/><path d="M6 18h12"/><path d="M12 3v18"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Diapasón</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('recorder')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Grabadora</span>
        </button>
      </div>
    </div>

    <!-- CATEGORÍA: CONSULTAR -->
    <div class="bottom-sheet-category category-consultar">
      <h4 class="bottom-sheet-category-title">Consultar</h4>
      <div class="bottom-sheet-grid">
        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('acordes')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5V5a2 2 0 012-2h10.5a2 2 0 012 2v14.5a2 2 0 01-2 2H6a2 2 0 01-2-2z"/><path d="M8 7h6"/><path d="M8 11h6"/><path d="M8 15h6"/></svg>
          </div>
          <span class="bottom-sheet-item-label">Biblioteca Acordes</span>
        </button>

        <button class="bottom-sheet-item" onclick="krdNavigateFromSheet('escalas')">
          <div class="bottom-sheet-item-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
          </div>
          <span class="bottom-sheet-item-label">22 Escalas</span>
        </button>
      </div>
    </div>

  </div>
</div>

<div id="sn-tooltip" role="tooltip" aria-hidden="true">
  <div id="sn-tt-bar"></div>
  <div id="sn-tt-body">
    <span id="sn-tt-name"></span>
    <span id="sn-tt-group"></span>
  </div>
</div>




<!-- Perfil modal + nav cargado vía main.js -->

<!-- Quick Nav eliminado - ahora usa buscador universal (Ctrl+K) -->

<!-- Grabadora JS ahora en app.js -->

<!-- ════════════════════════════════════════════════════════════════
     PANEL DE FAVORITOS - migrado a src/inline/favorites-panel.js
     ════════════════════════════════════════════════════════════════ -->
<!-- favorites-panel.js: cargado via src/main.js (FASE H) -->

<!-- ═════════════════════════════════════════════════════════════════
     MI EVOLUCIÓN - Helper functions
     ═════════════════════════════════════════════════════════════════ -->
<script>
  // Initialize Lucide icons on progreso page
  function initLucideIcons() {
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
  }
  
  // Helper functions para el dashboard de progreso
  function continuePracticing() {
    const topTool = window.userEvolution?.getTopTool?.();
    if (topTool && window.goTo) {
      window.goTo(topTool.id);
    } else if (topTool) {
      window.location.href = '/?page=' + topTool.id;
    } else {
      window.goTo?.('fretboard') || (window.location.href = '/?page=fretboard');
    }
  }
  
  function scrollToArsenal() {
    window.krdScrollTo('#arsenalGrid');
  }
  
  function followInsight() {
    const action = document.getElementById('insightAction')?.dataset?.action;
    if (action && window.goTo) {
      window.goTo(action);
    }
  }
  
  function closeCelebration() {
    document.getElementById('celebrationModal')?.classList.remove('evo-celebration--active');
  }
  
  // Escuchar evento de nuevos badges
  window.addEventListener('badgeUnlocked', function(e) {
    const badges = e.detail?.badges || [];
    if (badges.length > 0) {
      showCelebration(badges[0]);
    }
  });
  
  function showCelebration(badge) {
    const modal = document.getElementById('celebrationModal');
    if (!modal) return;
    
    document.getElementById('celebrationName').textContent = badge.name;
    document.getElementById('celebrationDesc').textContent = badge.description;
    modal.classList.add('evo-celebration--active');
    
    // Re-initialize Lucide for the modal
    setTimeout(() => lucide?.createIcons(), 50);
    
    // Confetti effect
    createConfetti();
  }
  
  function createConfetti() {
    const colors = ['#f5c518', '#00d4b4', '#ff6b35', '#9b5de5'];
    for (let i = 0; i < 30; i++) {
      const confetti = document.createElement('div');
      confetti.className = 'evo-confetti';
      confetti.style.left = Math.random() * 100 + '%';
      confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
      confetti.style.animationDelay = Math.random() * 2 + 's';
      confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
      document.body.appendChild(confetti);
      setTimeout(() => confetti.remove(), 3000);
    }
  }
  
  // Detectar tema actual de Kuerda y aplicar al dashboard
  function syncDashboardTheme() {
    const body = document.body;
    const progresoPage = document.getElementById('page-progreso');
    if (!progresoPage) return;
    
    // Detectar tema: body.light-mode, data-theme, o prefers-color-scheme
    const isLightMode = body.classList.contains('light-mode') ||
                        body.getAttribute('data-theme') === 'light' ||
                        document.documentElement.getAttribute('data-theme') === 'light' ||
                        window.matchMedia('(prefers-color-scheme: light)').matches;
    
    const theme = isLightMode ? 'light' : 'dark';
    
    if (theme === 'light') {
      progresoPage.setAttribute('data-theme', 'light');
    } else {
      progresoPage.removeAttribute('data-theme');
    }
    
    console.log('[Mi Evolución] Theme synced:', theme);
  }
  
  // Initialize icons when page loads
  document.addEventListener('DOMContentLoaded', function() {
    // Sync theme
    syncDashboardTheme();
    
    // Initialize Lucide globally
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
    
    // Re-init when progreso page is shown
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.target.id === 'page-progreso') {
          if (mutation.target.classList.contains('visible')) {
            // Sync theme when page becomes visible
            syncDashboardTheme();
            setTimeout(() => {
              lucide?.createIcons();
            }, 100);
          }
        }
      });
    });
    
    const progresoPage = document.getElementById('page-progreso');
    if (progresoPage) {
      observer.observe(progresoPage, { attributes: true, attributeFilter: ['class'] });
    }
    
    // Watch for theme changes
    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', syncDashboardTheme);
    
    // Watch for body class changes (light-mode toggle)
    const bodyObserver = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          syncDashboardTheme();
        }
      });
    });
    
    bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['class', 'data-theme'] });
  });
</script>

<!-- ═══ MODAL: ACORDE EXPANDIDO ═══ -->
<div id="chordViewModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:1rem">
  <div style="background:var(--panel);border:1px solid var(--border2);border-radius:12px;width:min(380px,95vw);max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.6)">
    
    <!-- Header -->
    <div style="display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;border-bottom:1px solid var(--border)">
      <div style="display:flex;align-items:center;gap:.6rem">
        <div style="width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--accent));display:flex;align-items:center;justify-content:center">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.5"><rect x="4" y="2" width="16" height="20" rx="1" fill="none"/><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
        </div>
        <div>
          <div style="font-size:.6rem;color:var(--gold);letter-spacing:2px;font-weight:700">ACORDE</div>
          <div id="chordViewName" style="font-size:1.3rem;font-weight:700;color:var(--text);font-family:var(--font-heading)">E</div>
        </div>
      </div>
      <button onclick="closeChordViewModal()" style="background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;padding:.3rem;line-height:1;transition:color .2s" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--muted)'">✕</button>
    </div>
    
    <!-- Content -->
    <div style="padding:1.5rem">
      <!-- Navegación entre posiciones -->
      <div id="chordPositionNav" style="display:none;align-items:center;justify-content:center;gap:.8rem;margin-bottom:1rem;padding:.6rem;background:var(--bg);border-radius:8px;border:1px solid var(--border)">
        <button onclick="navigateChordPosition(-1)" style="width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--panel2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s" onmouseover="this.style.borderColor='var(--gold)';this.style.background='var(--gold)';this.style.color='#000'" onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--panel2)';this.style.color='var(--text)'">◀</button>
        <div style="text-align:center">
          <div id="chordPositionCounter" style="font-family:'DM Mono',monospace;font-size:.7rem;color:var(--gold);letter-spacing:1px">Posición 1 de 4</div>
          <div id="chordPositionDots" style="display:flex;gap:5px;justify-content:center;margin-top:6px">
            <span style="width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 4px var(--gold)"></span>
            <span style="width:8px;height:8px;border-radius:50%;background:var(--border);border:1px solid var(--muted)"></span>
            <span style="width:8px;height:8px;border-radius:50%;background:var(--border);border:1px solid var(--muted)"></span>
          </div>
        </div>
        <button onclick="navigateChordPosition(1)" style="width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--panel2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s" onmouseover="this.style.borderColor='var(--gold)';this.style.background='var(--gold)';this.style.color='#000'" onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--panel2)';this.style.color='var(--text)'">▶</button>
      </div>


      <!-- Diagrama expandido -->
      <div id="chordViewDiagram" style="display:flex;justify-content:center;margin-bottom:1.5rem"></div>

      <!-- Descripción -->
      <div id="chordViewDesc" style="font-size:.85rem;color:var(--muted);text-align:center;line-height:1.6;margin-bottom:1.5rem;padding:.8rem;background:var(--bg);border-radius:8px;border:1px solid var(--border)">
        Potente, pilar del rock
      </div>
      
      <!-- Acciones -->
      <div style="display:flex;gap:.6rem">
        <button id="chordViewFavBtn" onclick="toggleChordViewFav()" style="flex:1;padding:.8rem;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;cursor:pointer;font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:1px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem" onmouseover="this.style.borderColor='var(--gold)'" onmouseout="this.style.borderColor='var(--border)'">
          <span id="chordViewFavIcon">☆</span> Guardar
        </button>
        <button onclick="playChordView()" style="flex:1;padding:.8rem;background:linear-gradient(135deg,var(--teal),rgba(0,212,180,0.7));border:none;color:#000;border-radius:8px;cursor:pointer;font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:1px;font-weight:700;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg> Escuchar
        </button>
      </div>
    </div>
  </div>
</div>

<script>
// Sistema de vista expandida de acordes con navegación entre posiciones
var _currentChordView = null;
var _currentChordPositions = null;
var _currentPositionIndex = 0;


function openChordViewModal(chName, strings, startFret, fingers, desc, borderColor) {
  var modal = document.getElementById('chordViewModal');
  if (!modal) return;

  // Buscar si el acorde tiene múltiples posiciones
  var chordWithPositions = typeof findChordWithPositions === 'function' ? findChordWithPositions(chName) : null;

  if (chordWithPositions && chordWithPositions.positions && chordWithPositions.positions.length > 1) {
    // Acorde con múltiples posiciones
    _currentChordPositions = chordWithPositions.positions;
    _currentPositionIndex = 0;

    // Mostrar navegación
    var navEl = document.getElementById('chordPositionNav');
    if (navEl) navEl.style.display = 'flex';

    // Actualizar interfaz
    updatePositionUI(chName, borderColor);
  } else {
    // Acorde simple (sin múltiples posiciones)
    _currentChordPositions = null;
    _currentPositionIndex = 0;

    // Ocultar navegación
    var navEl = document.getElementById('chordPositionNav');
    if (navEl) navEl.style.display = 'none';

    // Guardar estado simple
    _currentChordView = { n: chName, s: strings, fr: startFret, f: fingers, d: desc };

    // Actualizar nombre
    document.getElementById('chordViewName').textContent = chName;
    document.getElementById('chordViewName').style.color = borderColor || 'var(--gold)';

    // Generar diagrama
    var diagramHTML = makeChordSVGExpanded(chName, strings, startFret, fingers, borderColor);
    document.getElementById('chordViewDiagram').innerHTML = diagramHTML;

    // Actualizar descripción
    document.getElementById('chordViewDesc').textContent = desc || '';
  }

  // Actualizar botón de favoritos
  updateChordViewFavBtn(chName);

  // Mostrar modal
  modal.style.display = 'flex';
  document.body.style.overflow = 'hidden';
}

// Actualizar UI cuando hay posiciones múltiples
function updatePositionUI(chName, borderColor) {
  if (!_currentChordPositions || _currentPositionIndex >= _currentChordPositions.length) return;

  var pos = _currentChordPositions[_currentPositionIndex];
  _currentChordView = {
    n: chName,
    s: pos.s,
    fr: pos.fr,
    f: pos.f,
    d: pos.d
  };

  // Actualizar nombre
  document.getElementById('chordViewName').textContent = chName;
  document.getElementById('chordViewName').style.color = borderColor || 'var(--gold)';

  // Generar diagrama
  var diagramHTML = makeChordSVGExpanded(chName, pos.s, pos.fr, pos.f, borderColor);
  document.getElementById('chordViewDiagram').innerHTML = diagramHTML;

  // Actualizar descripción
  document.getElementById('chordViewDesc').textContent = pos.d || '';

  // Actualizar contador
  var counterEl = document.getElementById('chordPositionCounter');
  if (counterEl) {
    counterEl.textContent = 'Posición ' + (_currentPositionIndex + 1) + ' de ' + _currentChordPositions.length;
  }

  // Actualizar dots
  var dotsEl = document.getElementById('chordPositionDots');
  if (dotsEl) {
    dotsEl.innerHTML = '';
    for (var i = 0; i < _currentChordPositions.length; i++) {
      var dot = document.createElement('span');
      if (i === _currentPositionIndex) {
        dot.style.cssText = 'width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 4px var(--gold);transition:all .2s';
      } else {
        dot.style.cssText = 'width:8px;height:8px;border-radius:50%;background:var(--border);border:1px solid var(--muted);transition:all .2s';
      }
      dotsEl.appendChild(dot);
    }
  }

}

// Navegar entre posiciones
function navigateChordPosition(direction) {
  if (!_currentChordPositions) return;

  var newIndex = _currentPositionIndex + direction;
  if (newIndex < 0) newIndex = _currentChordPositions.length - 1;
  if (newIndex >= _currentChordPositions.length) newIndex = 0;

  _currentPositionIndex = newIndex;
  updatePositionUI(_currentChordView.n, document.getElementById('chordViewName').style.color);
}

function closeChordViewModal() {
  var modal = document.getElementById('chordViewModal');
  if (modal) modal.style.display = 'none';
  document.body.style.overflow = '';
  _currentChordView = null;
}

function updateChordViewFavBtn(chName) {
  var isFav = isFavorite('acordes', chName);
  document.getElementById('chordViewFavIcon').textContent = isFav ? '⭐' : '☆';
  document.getElementById('chordViewFavBtn').style.borderColor = isFav ? 'var(--gold)' : 'var(--border)';
}

function toggleChordViewFav() {
  if (!_currentChordView) return;
  chordFavToggle(document.querySelector('[data-chord="' + _currentChordView.n + '"]') || { dataset: { chord: _currentChordView.n } });
  updateChordViewFavBtn(_currentChordView.n);
}

function playChordView() {
  if (!_currentChordView || typeof AudioEngine === 'undefined') return;
  // Tocar el acorde si el motor de audio está disponible
  try {
    AudioEngine.playChord(_currentChordView.s);
  } catch(e) {
    console.log('Audio no disponible');
  }
}

// Generar SVG expandido del acorde (versión más grande)
function makeChordSVGExpanded(name, strings, startFret, fingers, borderColor) {
  var W = 280, H = 340, topPad = 80, lp = 35, fH = 42, ss = 35, nf = 4;
  var s6 = strings.slice();
  var isDark = !document.body.classList.contains('light-mode');
  var nameColor = isDark ? '#ede9e0' : '#1a1a1a';
  var fretColor = isDark ? '#7a7a8c' : '#505060';
  var nutColor = '#f5c518';
  var fretLine = isDark ? '#444' : '#bbb';
  var stringLine = isDark ? '#555' : '#ccc';
  var openCircle = isDark ? '#888' : '#555';
  var stringNum = isDark ? '#666878' : '#888';
  var dotColor = borderColor || '#ff4d1c';
  
  var svg = '<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" style="filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3))">';
  
  // Nombre del acorde
  svg += '<text x="' + (W/2) + '" y="30" text-anchor="middle" font-family="\'Plus Jakarta Sans\', sans-serif" font-size="22" font-weight="700" fill="' + nameColor + '">' + name + '</text>';
  
  // Números de cuerda
  for(var s=0; s<6; s++) {
    var stringLabel = (6-s);
    svg += '<text x="' + (lp+s*ss) + '" y="55" text-anchor="middle" font-family="DM Mono,monospace" font-size="11" fill="' + stringNum + '">' + stringLabel + '</text>';
  }
  
  // Fret indicator - solo mostrar si es traste 2 o mayor
  var fretNum = parseInt(startFret, 10) || 0;
  if(fretNum > 1) {
    svg += '<text x="' + (lp-10) + '" y="' + (topPad+fH/2+8) + '" text-anchor="end" font-family="DM Mono,monospace" font-size="18" font-weight="700" fill="var(--gold)">' + fretNum + '</text>';
  }
  
  var no = startFret === 1 ? 3 : 0;
  
  // Nut
  if(startFret === 1) {
    svg += '<rect x="' + lp + '" y="' + topPad + '" width="' + (5*ss) + '" height="5" fill="' + nutColor + '" rx="2"/>';
  }
  
  // Trastes
  for(var f=0; f<=nf; f++) {
    svg += '<line x1="' + lp + '" y1="' + (topPad+no+f*fH) + '" x2="' + (lp+5*ss) + '" y2="' + (topPad+no+f*fH) + '" stroke="' + fretLine + '" stroke-width="1"/>';
  }
  
  // Cuerdas
  for(var s=0; s<6; s++) {
    svg += '<line x1="' + (lp+s*ss) + '" y1="' + (topPad+no) + '" x2="' + (lp+s*ss) + '" y2="' + (topPad+no+nf*fH) + '" stroke="' + stringLine + '" stroke-width="1"/>';
  }
  
  // Mute/Open markers y dots
  s6.forEach(function(val, si){
    var x = lp + si*ss, ym = topPad - 18, yc = topPad - 12;
    if(val === -1) {
      svg += '<text x="' + x + '" y="' + ym + '" text-anchor="middle" font-size="16" fill="#ff4d1c" font-weight="bold">×</text>';
    } else if(val === 0) {
      svg += '<circle cx="' + x + '" cy="' + yc + '" r="6" fill="none" stroke="' + openCircle + '" stroke-width="2"/>';
    }
    if(val > 0) {
      var fp = val - startFret + 1;
      if(fp >= 1 && fp <= nf) {
        var cy = topPad + no + (fp - 0.5) * fH;
        var fi = fingers ? fingers[si] : '';
        var fillColor = fi === 'R' ? '#f5c518' : dotColor;
        svg += '<circle cx="' + x + '" cy="' + cy + '" r="12" fill="' + fillColor + '" stroke="' + fillColor + '" stroke-width="2"/>';
        if(fi && fi !== 'R' && fi !== '') {
          svg += '<text x="' + x + '" y="' + (cy+5) + '" text-anchor="middle" font-size="12" fill="#000" font-family="Arial,sans-serif" font-weight="bold">' + fi + '</text>';
        }
      }
    }
  });
  
  svg += '</svg>';
  return svg;
}

// Cerrar modal al hacer clic fuera
document.getElementById('chordViewModal')?.addEventListener('click', function(e) {
  if(e.target === this) closeChordViewModal();
});

// Cerrar con Escape
document.addEventListener('keydown', function(e) {
  if(e.key === 'Escape') closeChordViewModal();
});

// ── SCROLL INFINITO TÁCTIL: Pills con loop nativo ──
(function() {
  var track = document.querySelector('.pills-track');
  var container = document.querySelector('.hero-tool-pills');
  if (!track || !container) return;

  var originalPills = Array.from(track.children);
  var pillCount = originalPills.length;

  // Crear 3 sets totales (original + 2 clones) para scroll infinito
  for (var i = 0; i < 2; i++) {
    originalPills.forEach(function(pill) {
      var clone = pill.cloneNode(true);
      clone.classList.add('htp-pill-clone');
      clone.removeAttribute('data-reveal-item');
      track.appendChild(clone);
    });
  }

  var SETS = 3;
  var setWidth = 0;
  var isWrapping = false;

  function calculateSetWidth() {
    track.offsetHeight; // forzar reflow
    if (track.children.length >= pillCount * SETS && track.children[pillCount] && track.children[0]) {
      var first = track.children[0].getBoundingClientRect();
      var secondSet = track.children[pillCount].getBoundingClientRect();
      setWidth = Math.round(secondSet.left - first.left);
    }
  }

  function initInfiniteScroll() {
    if (window.innerWidth > 768) return;
    // Reintentar hasta que el layout calcule un ancho válido
    if (setWidth <= 0) {
      calculateSetWidth();
    }
    if (setWidth > 0) {
      container.scrollLeft = setWidth;
    } else {
      // Fallback: reintentar en 500ms
      setTimeout(initInfiniteScroll, 500);
      return;
    }
    container.addEventListener('scroll', handleScroll);
  }

  function handleScroll() {
    if (isWrapping || window.innerWidth > 768) return;
    if (setWidth <= 0) return;

    var threshold = 50;

    if (container.scrollLeft >= setWidth * 2 - threshold) {
      isWrapping = true;
      container.scrollLeft -= setWidth;
      requestAnimationFrame(function() { isWrapping = false; });
    }
    else if (container.scrollLeft <= threshold) {
      isWrapping = true;
      container.scrollLeft += setWidth;
      requestAnimationFrame(function() { isWrapping = false; });
    }
  }

  // Inicializar después de que CSS y layout estén listos
  setTimeout(function() {
    initInfiniteScroll();
  }, 2100);

  window.addEventListener('resize', function() {
    calculateSetWidth();
    if (window.innerWidth <= 768 && setWidth > 0) {
      container.scrollLeft = setWidth;
    }
  });
})();
</script>
<!-- ── Ambient 3D Fallback (standalone init) ── -->

<!-- ── WASM Engine Bridge ── -->

<!-- ════════════════════════════════════════════════════════════
     GLOBAL AMBIENT BACKGROUND — Controlado por router
     ════════════════════════════════════════════════════════════ -->
<div class="ambient-bg" id="globalAmbientBg">
  <div class="ambient-bg__orbs"></div>
  <div class="ambient-bg__grid"></div>
</div>

</body>
</html>






