<!DOCTYPE html>
<html lang="es" data-beasties-container>

<head>
  <meta charset="utf-8">
  <title>PianoTrail - Tu entrenador visual de piano pop</title>
  
  <!-- SEO Meta Tags -->
  <meta name="description" content="Aprende piano pop con ejercicios interactivos, partituras dinámicas y audio en tiempo real. Sistema de trails progresivos desde iniciación hasta nivel avanzado.">
  <meta name="keywords" content="piano, aprender piano, piano pop, piano jazz, acordes, escalas, progresiones, educación musical">
  <meta name="author" content="PianoTrail">
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://pianotrail.com/">
  <meta property="og:title" content="PianoTrail - Tu entrenador visual de piano pop">
  <meta property="og:description" content="Aprende piano pop con ejercicios interactivos, partituras dinámicas y audio en tiempo real.">
  <meta property="og:image" content="https://pianotrail.com/assets/landing/screenshots/en/chordgym1.png">
  
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://pianotrail.com/">
  <meta property="twitter:title" content="PianoTrail - Tu entrenador visual de piano pop">
  <meta property="twitter:description" content="Aprende piano pop con ejercicios interactivos, partituras dinámicas y audio en tiempo real.">
  <meta property="twitter:image" content="https://pianotrail.com/assets/landing/screenshots/en/chordgym1.png">

  <base href="/">

  <meta name="color-scheme" content="light dark">
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <!-- Favicons -->
  <link rel="icon" type="image/png" sizes="32x32" href="assets/icon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/icon/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/icon/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="assets/icon/favicon.png">

  <!-- PWA Manifest (Android) -->
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#3880ff">

  <!-- add to homescreen for ios -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!--
    Google Analytics 4 (GA4) — snippet base.
    Cobertura: páginas SEO prerenderizadas (scales, chords, progressions, escalas, acordes, progresiones).
    Para la SPA Angular, provideAnalytics() en main.ts ya inyecta gtag.js cuando el app arranca y reusa
    el dataLayer global, por lo que esta carga doble no produce duplicados de eventos (GA4 dedupe por client_id).

    El placeholder G-EMKQ6TTXW3 se sustituye en los scripts de prerender (scales, chords, progressions)
    por el measurementId real según --target (stage/prod). En dev local (Angular dev server) el placeholder
    se queda y el snippet entonces NO carga nada (guard explícito abajo).
  -->
  <script>
    (function () {
      var mid = 'G-EMKQ6TTXW3';
      // En dev local el placeholder no se sustituye → no cargamos GA4.
      if (!mid || mid.indexOf('__') === 0) return;
      // Cargar gtag.js
      var s = document.createElement('script');
      s.async = true;
      s.src = 'https://www.googletagmanager.com/gtag/js?id=' + mid;
      document.head.appendChild(s);
      window.dataLayer = window.dataLayer || [];
      function gtag(){ window.dataLayer.push(arguments); }
      window.gtag = gtag;
      gtag('js', new Date());
      gtag('config', mid);
    })();
  </script>

  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "PianoTrail",
    "url": "https://pianotrail.com",
    "description": "Visual piano trainer for modern pop and jazz piano. Interactive exercises with rhythmic patterns, chord progressions, scales and dynamic scores.",
    "applicationCategory": "EducationalApplication",
    "operatingSystem": "Web",
    "inLanguage": ["es", "en"],
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "EUR",
      "description": "14-day free trial, then Pioneer Edition from 4.99 EUR/month"
    },
    "author": {
      "@type": "Organization",
      "name": "PianoTrail",
      "url": "https://pianotrail.com"
    },
    "screenshot": "https://pianotrail.com/assets/landing/screenshots/en/chordgym1.png"
  }
  </script>
<style>:root{--ion-color-primary:#0054e9;--ion-color-primary-rgb:0, 84, 233;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255, 255, 255;--ion-color-primary-shade:#004acd;--ion-color-primary-tint:#1a65eb;--ion-color-secondary:#0163aa;--ion-color-secondary-rgb:1, 99, 170;--ion-color-secondary-contrast:#fff;--ion-color-secondary-contrast-rgb:255, 255, 255;--ion-color-secondary-shade:#015796;--ion-color-secondary-tint:#1a73b3;--ion-color-tertiary:#6030ff;--ion-color-tertiary-rgb:96, 48, 255;--ion-color-tertiary-contrast:#fff;--ion-color-tertiary-contrast-rgb:255, 255, 255;--ion-color-tertiary-shade:#542ae0;--ion-color-tertiary-tint:#7045ff;--ion-color-success:#2dd55b;--ion-color-success-rgb:45, 213, 91;--ion-color-success-contrast:#000;--ion-color-success-contrast-rgb:0, 0, 0;--ion-color-success-shade:#28bb50;--ion-color-success-tint:#42d96b;--ion-color-warning:#ffc409;--ion-color-warning-rgb:255, 196, 9;--ion-color-warning-contrast:#000;--ion-color-warning-contrast-rgb:0, 0, 0;--ion-color-warning-shade:#e0ac08;--ion-color-warning-tint:#ffca22;--ion-color-danger:#c5000f;--ion-color-danger-rgb:197, 0, 15;--ion-color-danger-contrast:#fff;--ion-color-danger-contrast-rgb:255, 255, 255;--ion-color-danger-shade:#ad000d;--ion-color-danger-tint:#cb1a27;--ion-color-light:#f4f5f8;--ion-color-light-rgb:244, 245, 248;--ion-color-light-contrast:#000;--ion-color-light-contrast-rgb:0, 0, 0;--ion-color-light-shade:#d7d8da;--ion-color-light-tint:#f5f6f9;--ion-color-medium:#636469;--ion-color-medium-rgb:99, 100, 105;--ion-color-medium-contrast:#fff;--ion-color-medium-contrast-rgb:255, 255, 255;--ion-color-medium-shade:#57585c;--ion-color-medium-tint:#737478;--ion-color-dark:#222428;--ion-color-dark-rgb:34, 36, 40;--ion-color-dark-contrast:#fff;--ion-color-dark-contrast-rgb:255, 255, 255;--ion-color-dark-shade:#1e2023;--ion-color-dark-tint:#383a3e}html{--ion-dynamic-font:-apple-system-body;--ion-font-family:var(--ion-default-font)}body{background:var(--ion-background-color);color:var(--ion-text-color)}@supports (padding-top: 20px){html{--ion-safe-area-top:var(--ion-statusbar-padding)}}@supports (padding-top: env(safe-area-inset-top)){html{--ion-safe-area-top:var(--safe-area-inset-top, env(safe-area-inset-top));--ion-safe-area-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom));--ion-safe-area-left:var(--safe-area-inset-left, env(safe-area-inset-left));--ion-safe-area-right:var(--safe-area-inset-right, env(safe-area-inset-right))}}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;padding:0;position:fixed;width:100%;max-width:100%;height:100%;max-height:100%;transform:translateZ(0);text-rendering:optimizeLegibility;overflow:hidden;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;overscroll-behavior-y:none;-webkit-text-size-adjust:none;text-size-adjust:none}html{font-family:var(--ion-font-family)}@supports (-webkit-touch-callout: none){html{font:var(--ion-dynamic-font, 16px var(--ion-font-family))}}@media(prefers-color-scheme:dark){:root{--ion-color-primary:#4d8dff;--ion-color-primary-rgb:77, 141, 255;--ion-color-primary-contrast:#000;--ion-color-primary-contrast-rgb:0, 0, 0;--ion-color-primary-shade:#447ce0;--ion-color-primary-tint:#5f98ff;--ion-color-secondary:#46b1ff;--ion-color-secondary-rgb:70, 177, 255;--ion-color-secondary-contrast:#000;--ion-color-secondary-contrast-rgb:0, 0, 0;--ion-color-secondary-shade:#3e9ce0;--ion-color-secondary-tint:#59b9ff;--ion-color-tertiary:#8482fb;--ion-color-tertiary-rgb:132, 130, 251;--ion-color-tertiary-contrast:#000;--ion-color-tertiary-contrast-rgb:0, 0, 0;--ion-color-tertiary-shade:#7472dd;--ion-color-tertiary-tint:#908ffb;--ion-color-success:#2dd55b;--ion-color-success-rgb:45, 213, 91;--ion-color-success-contrast:#000;--ion-color-success-contrast-rgb:0, 0, 0;--ion-color-success-shade:#28bb50;--ion-color-success-tint:#42d96b;--ion-color-warning:#ffce31;--ion-color-warning-rgb:255, 206, 49;--ion-color-warning-contrast:#000;--ion-color-warning-contrast-rgb:0, 0, 0;--ion-color-warning-shade:#e0b52b;--ion-color-warning-tint:#ffd346;--ion-color-danger:#f24c58;--ion-color-danger-rgb:242, 76, 88;--ion-color-danger-contrast:#000;--ion-color-danger-contrast-rgb:0, 0, 0;--ion-color-danger-shade:#d5434d;--ion-color-danger-tint:#f35e69;--ion-color-light:#222428;--ion-color-light-rgb:34, 36, 40;--ion-color-light-contrast:#fff;--ion-color-light-contrast-rgb:255, 255, 255;--ion-color-light-shade:#1e2023;--ion-color-light-tint:#383a3e;--ion-color-medium:#989aa2;--ion-color-medium-rgb:152, 154, 162;--ion-color-medium-contrast:#000;--ion-color-medium-contrast-rgb:0, 0, 0;--ion-color-medium-shade:#86888f;--ion-color-medium-tint:#a2a4ab;--ion-color-dark:#f4f5f8;--ion-color-dark-rgb:244, 245, 248;--ion-color-dark-contrast:#000;--ion-color-dark-contrast-rgb:0, 0, 0;--ion-color-dark-shade:#d7d8da;--ion-color-dark-tint:#f5f6f9}}:root{--apj-density:.9;--ion-toolbar-height:calc(56px * var(--apj-density));--ion-footer-height:calc(56px * var(--apj-density));--ion-header-height:calc(56px * var(--apj-density));--apj-smart-toolbar-height:calc(52px * var(--apj-density));--apj-spacing-xs:calc(4px * var(--apj-density));--apj-spacing-sm:calc(8px * var(--apj-density));--apj-spacing-md:calc(16px * var(--apj-density));--apj-spacing-lg:calc(24px * var(--apj-density));--apj-spacing-xl:calc(32px * var(--apj-density));--apj-font-size-xs:calc(.75rem * var(--apj-density));--apj-font-size-sm:calc(.875rem * var(--apj-density));--apj-font-size-md:calc(1rem * var(--apj-density));--apj-font-size-lg:calc(1.125rem * var(--apj-density));--apj-font-size-xl:calc(1.25rem * var(--apj-density));--apj-font-size-2xl:calc(1.5rem * var(--apj-density));--apj-font-size-3xl:calc(1.875rem * var(--apj-density));--apj-border-radius-sm:calc(4px * var(--apj-density));--apj-border-radius-md:calc(8px * var(--apj-density));--apj-border-radius-lg:calc(12px * var(--apj-density));--apj-border-radius-xl:calc(16px * var(--apj-density))}@media(min-width:768px){:root{--apj-density:.85}}@media(min-width:1024px){:root{--apj-density:.8}}@media(min-width:1400px){:root{--apj-density:.75}}@media(min-width:1920px){:root{--apj-density:.7}}@media(max-width:480px){:root{--apj-density:.95}}:root{--apj-border:var(--ion-color-step-200, #cbd5e1);--apj-border-strong:var(--ion-color-step-600, #475569);--apj-card-background:var(--ion-background-color, #ffffff);--apj-text-main:var(--ion-text-color, #111827);--apj-text-secondary:var(--ion-color-step-600, #64748b);--apj-text-muted:var(--ion-color-step-500, #6b7280);--apj-text-on-accent:#ffffff;--apj-success-strong:#15803d;--apj-rh-bg:#dbeafe;--apj-rh-fg:#1d4ed8;--apj-lh-bg:#fee2e2;--apj-lh-fg:#dc2626;--apj-both-bg:#fef9c3;--apj-both-fg:#a16207}html{font-size:16px}@media(min-width:1400px){html{font-size:14px}}@media(min-width:1920px){html{font-size:13px}}html,body{background:var(--apj-background-main, var(--ion-background-color, #f4f5fa))}@media(min-width:1440px){:root{font-size:1.0625rem}}@media(min-width:1920px){:root{font-size:1.125rem}}:root{--ion-color-primary:#007aff;--ion-color-primary-rgb:0,122,255;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#006ae0;--ion-color-primary-tint:#1a87ff;--ion-color-secondary:#5ac8fa;--ion-color-secondary-rgb:90,200,250;--ion-color-secondary-contrast:#000000;--ion-color-secondary-contrast-rgb:0,0,0;--ion-color-secondary-shade:#4fb2dc;--ion-color-secondary-tint:#6bcfff;--ion-color-tertiary:#5856d6;--ion-color-tertiary-rgb:88,86,214;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255,255,255;--ion-color-tertiary-shade:#4d4bbd;--ion-color-tertiary-tint:#6967da;--ion-color-success:#34c759;--ion-color-success-rgb:52,199,89;--ion-color-success-contrast:#ffffff;--ion-color-success-contrast-rgb:255,255,255;--ion-color-success-shade:#2fae4f;--ion-color-success-tint:#49cb6a;--ion-color-warning:#ffcc00;--ion-color-warning-rgb:255,204,0;--ion-color-warning-contrast:#000000;--ion-color-warning-contrast-rgb:0,0,0;--ion-color-warning-shade:#e0b400;--ion-color-warning-tint:#ffd11a;--ion-color-danger:#ff3b30;--ion-color-danger-rgb:255,59,48;--ion-color-danger-contrast:#ffffff;--ion-color-danger-contrast-rgb:255,255,255;--ion-color-danger-shade:#e0342a;--ion-color-danger-tint:#ff4f44;--ion-color-dark:#1c1c1e;--ion-color-dark-rgb:28,28,30;--ion-color-dark-contrast:#ffffff;--ion-color-dark-contrast-rgb:255,255,255;--ion-color-dark-shade:#19191a;--ion-color-dark-tint:#333335;--ion-color-medium:#8e8e93;--ion-color-medium-rgb:142,142,147;--ion-color-medium-contrast:#ffffff;--ion-color-medium-contrast-rgb:255,255,255;--ion-color-medium-shade:#7d7d81;--ion-color-medium-tint:#9999a0;--ion-color-light:#f2f2f7;--ion-color-light-rgb:242,242,247;--ion-color-light-contrast:#000000;--ion-color-light-contrast-rgb:0,0,0;--ion-color-light-shade:#d5d5da;--ion-color-light-tint:#f3f3f8;--ion-color-header-default-background:#1e293b;--ion-color-header-default-color:#ffffff;--ion-color-admin-background:#cad3db;--ion-color-admin-background-rgb:202,211,219;--ion-color-admin-background-contrast:#000000;--ion-color-admin-background-contrast-rgb:0,0,0;--ion-color-admin-background-shade:#b1b9c0;--ion-color-admin-background-tint:#ced7de;--apj-card-background:#fff;--apj-section-background:#f8fafc;--apj-banner-gradient:linear-gradient(90deg, #007aff 0%, #5ac8fa 100%);--apj-text-main:#1c1c1e;--apj-text-secondary:#8e8e93;--apj-background-main:#f4f5fa;--apj-surface-1:#ffffff;--apj-surface-2:#f7f9fc;--apj-surface-3:#edf1f7;--apj-border-strong:#d5d9e2;--apj-surface-inverse:#0f1419;--apj-wordmark-leadsheet:#69adff;--apj-wordmark-scales:#4ade80;--apj-wordmark-chords:#eedc65;--apj-wordmark-patterns:#ff8fa3;--apj-wordmark-progressions:#b7a0ff;--apj-music-paper-background:#ffffff;--apj-music-paper-surface:#f7f9fc;--apj-music-paper-ink:#1c1c1e;--apj-music-paper-ink-muted:#64748b;--apj-music-paper-border:#d5d9e2;--apj-music-note-rh-surface:#056572;--apj-music-note-lh-surface:#6d28d9;--apj-music-note-on-color:#ffffff;--apj-piano-highlight-rh:var(--apj-music-note-rh-surface);--apj-piano-highlight-lh:var(--apj-music-note-lh-surface);--apj-font-body:var(--apj-font-size-md, 1rem);--apj-font-caption:var(--apj-font-size-sm, .875rem);--apj-font-chip:var(--apj-font-size-sm, .875rem);--apj-font-section-title:var(--apj-font-size-lg, 1.125rem);--apj-font-display-title:var(--apj-font-size-xl, 1.25rem);--apj-filters-background:var(--ion-color-success, #34c759);--apj-filters-text:#fff;--apj-state-success-bg:#d1fae5;--apj-state-success-text:#065f46;--apj-state-error-bg:#fee2e2;--apj-state-error-text:#991b1b;--apj-state-warning-bg:#fef3c7;--apj-state-warning-text:#92400e;--apj-state-info-bg:#dbeafe;--apj-state-info-text:#1e40af;--apj-level-iniciacion:#22c55e;--apj-level-basico:#2563eb;--apj-level-intermedio:#f59e0b;--apj-level-avanzado:#ef4444;--apj-level-experto:#a21caf;--apj-level-master:#0f172a;--apj-action-positive:#10b981;--apj-action-negative:#ef4444;--apj-action-neutral:#6b7280;--apj-action-primary:#3b82f6;--apj-hero-bg:#0f1419;--apj-hero-text:#f8fafc;--apj-hero-accent:#e05555;--apj-home-hero-gradient-light:linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);--apj-home-card-gradient-light:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);--apj-home-badge-gradient-light:linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);--apj-home-accent-blue:#3b82f6;--apj-home-accent-blue-light:#60a5fa;--apj-minicard-header-bg:linear-gradient(135deg, rgba(219, 234, 254, .9) 0%, rgba(191, 219, 254, .75) 100%);--apj-minicard-header-border:rgba(147, 197, 253, .6);--apj-minicard-header-shadow:0 1px 4px rgba(59, 130, 246, .25);--apj-minicard-bg:linear-gradient(135deg, rgba(239, 246, 255, .95) 0%, rgba(219, 234, 254, .85) 100%);--apj-minicard-shadow:0 0 0 1px rgba(147, 197, 253, .5), 0 2px 6px rgba(59, 130, 246, .18);--apj-minicard-shadow-hover:0 0 0 1px rgba(147, 197, 253, .6), 0 4px 10px rgba(59, 130, 246, .22);--apj-minicard-pattern-border:rgba(148, 163, 184, .35);--apj-stage-map-tab-bg:linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);--apj-stage-map-tab-shadow:0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}</style><link rel="stylesheet" href="styles.f79ca2c6f4e19044.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.f79ca2c6f4e19044.css"></noscript></head>

<body>
  <app-root></app-root>
<script src="runtime.1bc3f7b0af1d798e.js" type="module"></script><script src="polyfills.096620fb501fdaf9.js" type="module"></script><script src="main.b67363794a10122c.js" type="module"></script></body>

</html>
