<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Guitarra 3 &#8211; AMP en Línea</title>
	<atom:link href="https://www.ampenlinea.com/lesson-category/guitarra-3/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ampenlinea.com</link>
	<description></description>
	<lastBuildDate>Thu, 18 Sep 2025 00:17:21 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.ampenlinea.com/wp-content/uploads/2020/07/cropped-LOGOamp-solo_enlinea-M5-32x32.png</url>
	<title>Guitarra 3 &#8211; AMP en Línea</title>
	<link>https://www.ampenlinea.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>AMA Guitarra N3 &#8211; SE &#8211; EXAMEN PRACTICO</title>
		<link>https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-n3-ex/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Mon, 17 Feb 2025 16:45:34 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56887</guid>

					<description><![CDATA[&#160; Metrónomo × TPA AMP Bajo 4-1-6 / Canción #1 &#8211; Mi dulce chica AMP Bajo 4-1-12 / Introducción: Slap “ELT” (Escríbelo, léelo, tócalo) AMP Bajo 4-2-6 / Introducción al entrenamiento auditivo AMP Bajo 4-2-11 / Extracto: U can’t touch this AMP Bajo 4-2-11-2 / Extracto: Under pressure AMP Bajo 4-2-11-3 / Extracto: Song 2 &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-n3-ex/"> <span class="screen-reader-text">AMA Guitarra N3 &#8211; SE &#8211; EXAMEN PRACTICO</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56887" class="elementor elementor-56887" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-2572bc9 e-flex e-con-boxed e-con e-parent" data-id="2572bc9" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-4dcc9fa e-con-full e-grid e-con e-child" data-id="4dcc9fa" data-element_type="container">
				<div class="elementor-element elementor-element-ea1acf0 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="ea1acf0" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-b466782 elementor-widget elementor-widget-html" data-id="b466782" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
 <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/1020327896?h=3864c6fe77">
      AMP Bajo 4-1-6 / Canción #1 - Mi dulce chica
    </option>
    <option value="https://player.vimeo.com/video/1023311185?h=89d3977173">
      AMP Bajo 4-1-12 / Introducción: Slap “ELT” (Escríbelo, léelo, tócalo)
    </option>
    <option value="https://player.vimeo.com/video/1020327985?h=1df40579c8">
      AMP Bajo 4-2-6 / Introducción al entrenamiento auditivo
    </option>
    <option value="https://player.vimeo.com/video/1020328218">
      AMP Bajo 4-2-11 / Extracto: U can’t touch this
    </option>
    <option value="https://player.vimeo.com/video/1020328259">
      AMP Bajo 4-2-11-2 / Extracto: Under pressure
    </option>
    <option value="https://player.vimeo.com/video/1020328320">
      AMP Bajo 4-2-11-3 / Extracto: Song 2
    </option>
    <option value="https://player.vimeo.com/video/1020328596">
      AMP Bajo 4-2-11-4 / Extracto: Feel Good Inc
    </option>
    <option value="https://player.vimeo.com/video/1020328676">
      AMP Bajo 4-3-11 / Extracto: Creep
    </option>
    <option value="https://player.vimeo.com/video/1033931048?h=c03af3f151">
      AMP Bajo 4-2-12 / El bajista integral
    </option>
    <option value="https://player.vimeo.com/video/1020329095?h=921c7e21e8">
      AMP Bajo 4-4-9 / Canción #2 - Coincidencias
    </option>
    <option value="https://player.vimeo.com/video/1034560433?h=2ccd1fa081">
      AMP Bajo 4-4-9 / Canción #2 - Coincidencias (sin bajo)
    </option>
    <option value="https://player.vimeo.com/video/1020329399?h=78d5c71d59">
      AMP Bajo 4-5-5 / Canción #3 - Ocaso con luna
    </option>
    <option value="https://player.vimeo.com/video/1020329676?h=92a1e4edfe">
      AMP Bajo 4-5-5 / Canción #3 - Ocaso con luna (sin bajo)
    </option>
    <option value="https://player.vimeo.com/video/1020329470?h=01d2838a11">
      AMP Bajo 4-5-8 / Canción #4 - Encanto nocturno
    </option>
    <option value="https://player.vimeo.com/video/1020329747">
      AMP Bajo 4-5-9 / Video: Come together
    </option>
    <option value="https://player.vimeo.com/video/1020329747?h=27d5ca6cea">
      AMP Bajo 4-6-2 / Concierto final - Someone
    </option>
    <option value="https://player.vimeo.com/video/1034564532?h=c721b76599">
      AMP Bajo / Backing track en “G” Mayor
    </option>
    <option value="https://player.vimeo.com/video/1034566556?h=fb78441389">
      AMP Bajo / Backing track en “D” Mayor
    </option>
    <option value="https://player.vimeo.com/video/1034603364?h=8ee129111a">
      AMP Bajo / Pad en G Mayor
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-7ef1b84 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="7ef1b84" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-02d2459 elementor-widget elementor-widget-html" data-id="02d2459" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Guitarra-4-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-b4abbb9 elementor-widget elementor-widget-template" data-id="b4abbb9" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA Guitarra N3 &#8211; SE &#8211; EXAMEN PRACTICO</title>
		<link>https://www.ampenlinea.com/lessons/ama-guitarra-n3-se-examen-practico/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 18:17:49 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56818</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Guitarra 3-1-7 / Video &#8211; Shake it off AMP Guitarra 3-1-9 / JamCenter &#8211; Knocking on heaven&#8217;s door AMP Guitarra 3-2-9 / JamCenter &#8211; What’s up AMP Guitarra 3-2-11 / JamCenter &#8211; Lamento boliviano AMP Guitarra 3-3-3 / Backing track en G Mayor AMP Guitarra &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/lessons/ama-guitarra-n3-se-examen-practico/"> <span class="screen-reader-text">AMA Guitarra N3 &#8211; SE &#8211; EXAMEN PRACTICO</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56818" class="elementor elementor-56818" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-c76587c e-con-full e-grid e-con e-child" data-id="c76587c" data-element_type="container">
				<div class="elementor-element elementor-element-83a611a elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="83a611a" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-14d2c76 elementor-widget elementor-widget-html" data-id="14d2c76" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/999601478?h=ba66d2bdb0">
      AMP Guitarra 3-1-7 / Video - Shake it off
    </option>
    <option value="https://player.vimeo.com/video/869205386?h=baea825e21">
      AMP Guitarra 3-1-9 / JamCenter - Knocking on heaven's door
    </option>
    <option value="https://player.vimeo.com/video/869224179?h=bc74a7be1d">
      AMP Guitarra 3-2-9 / JamCenter - What’s up
    </option>
    <option value="https://player.vimeo.com/video/869220191?h=47f71041ee">
      AMP Guitarra 3-2-11 / JamCenter - Lamento boliviano
    </option>
    <option value="https://player.vimeo.com/video/1032493837?h=c8079256c2">
      AMP Guitarra 3-3-3 / Backing track en G Mayor
    </option>
    <option value="https://player.vimeo.com/video/999608598?h=a1272a8681">
      AMP Guitarra 3-3-4 / Canción - Power chords
    </option>
    <option value="https://player.vimeo.com/video/869210201?h=bbc09f4a3b">
      AMP Guitarra 3-3-7 / JamCenter - Zombie
    </option>
    <option value="https://player.vimeo.com/video/999610581?h=dcf59e9839">
      AMP Guitarra 3-3-9 / Extracto - All the small things
    </option>
    <option value="https://player.vimeo.com/video/923416350?h=c2f29a5645">
      AMP Guitarra 3-3-11 / JamCenter - All the small things
    </option>
    <option value="https://player.vimeo.com/video/999611512?h=9426b1b2e5">
      AMP Guitarra 3-4-6 / Video Back in black
    </option>
    <option value="https://player.vimeo.com/video/999612059?h=abee578e85">
      AMP Guitarra 3-4-8 / Extracto Stand by me
    </option>
    <option value="https://player.vimeo.com/video/999612130?h=37e60025af">
      AMP Guitarra 3-5-3 / Extracto Everybody hurt
    </option>
    <option value="https://player.vimeo.com/video/999612181?h=5bb1d216bc">
      AMP Guitarra 3-5-4 / Video Perfect
    </option>
    <option value="https://player.vimeo.com/video/923402318?h=b9487e9c60">
      AMP Guitarra 3-5-6 / JamCenter - Camisa negra
    </option>
    <option value="https://player.vimeo.com/video/999612823?h=2d35e6e96a">
      AMP Guitarra 3-6-2 / Concierto final - Mi dulce chica
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-9146009 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="9146009" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-3b19dde e-flex e-con-boxed e-con e-parent" data-id="3b19dde" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-b2a867a elementor-widget elementor-widget-html" data-id="b2a867a" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Guitarra-3-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
		<div class="elementor-element elementor-element-dcf16ca e-con-full e-flex e-con e-child" data-id="dcf16ca" data-element_type="container">
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA GT 3-6-2 &#8211; Concierto final de guitarra (REPASO 3)</title>
		<link>https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-3-6-2-3/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:34:49 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56806</guid>

					<description><![CDATA[Análisis del concierto Actividad Practicar el concierto respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 120 bpm.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56806" class="elementor elementor-56806" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-75c8fb3 e-flex e-con-boxed e-con e-parent" data-id="75c8fb3" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-5af3078 elementor-widget elementor-widget-shortcode" data-id="5af3078" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"> <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio y Metrónomo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      background-color: #fafafa;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #fafafa;
      color: #333;
      border-bottom: 1px solid #ccc;
    }

    .toolbar .icons button {
      background: none;
      border: none;
      color: #333;
      font-size: 22px;
      cursor: pointer;
      margin-left: 15px;
    }

  .toolbar .icons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 20px;
      width: 90%;
      max-width: 480px;
      border-radius: 8px;
      position: relative;
    }

    .modal .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    .modal iframe {
      width: 100%;
      height: 475px;
      border: none;
      border-radius: 4px;
    }

    .modal .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal .audio-controls audio {
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="logo">Herramientas AMP<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="icons">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/brand-bandlab.svg" alt="Abrir Modales" onclick="abrirModal('audioModal')">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/metronome.svg" alt="Abrir Metrónomo" onclick="abrirModal('metronomeModal')">
    
    </div>
  </div>

  <!-- MODAL AUDIO -->
  <div id="audioModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('audioModal')">&times;</span>
      <h3>Selecciona un audio</h3>
      <div class="audio-controls">
        <select id="audioSelector" onchange="cambiarAudio(this.value)">
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3">GPP Rock Shuffle 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-B-Four-on-the-floor-80-bpm.mp3">GPP Four on the floor 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3411-Disco-80-bpm.mp3">GPP Disco 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3212-Hard-Rock-80-bpm.mp3">GPP Hard Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-219-8th-Note-Rock-80-bpm.mp3">GPP 8th Note Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-A-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock A 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-D-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-5512-Basic-RB-85-bpm.mp3">GPP Basic R&B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-415-Four-on-the-floor-85-bpm.mp3">GPP Four on the floor 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3112-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock A 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-338-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock B 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3116-Disco-100-bpm.mp3">GPP Disco 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-347-Bossa-Nova-100-bpm.mp3">GPP Bossa Nova 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-329-Soca-100-bpm.mp3">GPP 329 Soca 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-253-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-235-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-159-Hard-Rock-100-bpm.mp3">GPP Hard Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-156-16th-Note-Syncopated-Kick-100-bpm.mp3">GPP 16th Note Syncopated Kick 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-147-Four-on-the-floor-100-bpm.mp3">GPP Four on the floor 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-146-Half-time-Shuffle-100-bpm.mp3">GPP Half time Shuffle 100 bpm</option>

        </select>

        <audio id="audioPlayer" controls>
          <source src="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3" type="audio/mp3">
        </audio>

        <label for="velocidadAudio">Velocidad: <span id="velocidadValor">1.00x</span></label>
        <input type="range" id="velocidadAudio" min="0.5" max="2" step="0.05" value="1" oninput="ajustarVelocidad(this.value)">
      </div>
    </div>
  </div>

  <!-- MODAL METRONOMO -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('metronomeModal')">&times;</span>
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light"
        title="Metrónomo Online">
      </iframe>
    </div>
  </div>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const velocidadValor = document.getElementById('velocidadValor');

    function cambiarAudio(src) {
      audioPlayer.src = src;
      audioPlayer.playbackRate = parseFloat(document.getElementById('velocidadAudio').value);
      audioPlayer.play();
    }

    function ajustarVelocidad(speed) {
      velocidadValor.textContent = parseFloat(speed).toFixed(2) + 'x';
      audioPlayer.playbackRate = parseFloat(speed);
    }

    function abrirModal(id) {
      document.getElementById(id).style.display = 'flex';
    }

    function cerrarModal(id) {
      document.getElementById(id).style.display = 'none';
    }

    window.addEventListener('click', (e) => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) modal.style.display = 'none';
      });
    });
  </script>

</body>
</html>
</div>
				</div>
				</div>
		<!-- dce invisible element dabd27e --><style>
  /* Botón */
  #btnShowFretboard {
    padding: 12px 20px;
    margin: 10px;
    font-size: 16px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  /* Modal básico */
  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.85);
    overflow-y: auto;
    padding: 30px 10px;
    box-sizing: border-box;
  }
  .modal-content {
    background-color: #2f2f2f;
    margin: auto;
    padding: 20px;
    border-radius: 12px;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
  }
  .close-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  /* &#x1f3b8; Diapasón */
  .guitar-fretboard {
    display: grid;
    grid-template-columns: repeat(23, 48px);
    grid-template-rows: repeat(6, 42px);
    background: linear-gradient(90deg, #8b5e3c, #a07248);
    border-radius: 8px;
    position: relative;
    overflow-x: auto;
  }
  .fret {
    border-right: 1px solid #666;
    position: relative;
    cursor: pointer;
  }
  .string-line {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: #eee;
    transform: translateY(-50%);
  }
  .fret[data-string="6"] .string-line { height: 1.5px; }
  .fret[data-string="5"] .string-line { height: 2.0px; }
  .fret[data-string="4"] .string-line { height: 2.5px; }
  .fret[data-string="3"] .string-line { height: 3.0px; }
  .fret[data-string="2"] .string-line { height: 3.5px; }
  .fret[data-string="1"] .string-line { height: 4px; }
  .marker {
    width: 16px;
    height: 16px;
    background: crimson;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .fret-numbers {
    display: grid;
    grid-template-columns: repeat(23, 48px);
    margin-top: 8px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 14px;
    text-align: center;
  }
</style><style>
  #btnShowSheet {
    padding: 12px 20px;
    font-size: 18px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
  }

  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  .sheet-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  #sheetImage {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  #drawCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
  }
</style><div class="elementor-element elementor-element-dbe8f20 e-con-full e-flex e-con e-child" data-id="dbe8f20" data-element_type="container">
				<div class="elementor-element elementor-element-5b5a3ab elementor-widget elementor-widget-video" data-id="5b5a3ab" data-element_type="widget" data-settings="{&quot;video_type&quot;:&quot;vimeo&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
					<div class="elementor-wrapper elementor-open-inline">
			<iframe class="elementor-video-iframe" allowfullscreen allow="clipboard-write" title="Reproductor de vídeo vimeo" src="https://player.vimeo.com/video/1005608885?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1&amp;h=4f1ebab183#t="></iframe>		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-85e6040 e-con-full e-flex e-con e-child" data-id="85e6040" data-element_type="container">
				<div class="elementor-element elementor-element-b7d720d elementor-widget__width-initial elementor-widget elementor-widget-html" data-id="b7d720d" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			
<!-- &#x1f7e8; SUBTÍTULO 1 + PÁRRAFO -->
<section class="bloque-leccion">
  <h2>Análisis del concierto</h2>
   <p></p>



<img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/08/gt-3-6-2.png" alt="Concierto" class="imagen-responsiva">

<br>

</section>

<!--&#x1f7e8; Actividad + PÁRRAFO -->
<section class="bloque-leccion">
  
  <h1>Actividad</h1>
<p>Practicar el concierto respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 120 bpm.</p>

</section>

<!-- &#x1f3a8; ESTILO PERSONALIZADO -->
<style>
  .header-leccion {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .titulo-leccion {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #b30808;
    margin-bottom: 30px;
  }

  .bloque-leccion {
    margin: 30px 0;
  }

  .bloque-leccion h3 {
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
  }

  .bloque-leccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }

  .imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
.bloque-leccion {
  user-select: none;           /* Desactiva selección en navegadores modernos */
  -webkit-user-select: none;   /* Chrome/Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}


</style>

<script>
  // Bloquea clic derecho
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  });

  // Bloquea teclas como Ctrl+C, Ctrl+U, Ctrl+S, Ctrl+Shift+I (inspeccionar)
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && ['c', 'u', 's'].includes(e.key.toLowerCase())) ||
        (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i')) {
      e.preventDefault();
    }
  });
</script>

		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-999a5f5 e-con-full e-flex e-con e-child" data-id="999a5f5" data-element_type="container">
				<div class="elementor-element elementor-element-e0d8119 elementor-widget elementor-widget-shortcode" data-id="e0d8119" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"><p>Debes iniciar sesión para ver este contenido.</p>
</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA Guitarra N3 &#8211; SE &#8211; Practica de las preguntas del examen</title>
		<link>https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-n3-se-3/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:32:04 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56805</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Guitarra 3-1-7 / Video &#8211; Shake it off AMP Guitarra 3-1-9 / JamCenter &#8211; Knocking on heaven&#8217;s door AMP Guitarra 3-2-9 / JamCenter &#8211; What’s up AMP Guitarra 3-2-11 / JamCenter &#8211; Lamento boliviano AMP Guitarra 3-3-3 / Backing track en G Mayor AMP Guitarra &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-n3-se-3/"> <span class="screen-reader-text">AMA Guitarra N3 &#8211; SE &#8211; Practica de las preguntas del examen</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56805" class="elementor elementor-56805" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-5e1aae3 e-con-full e-grid e-con e-child" data-id="5e1aae3" data-element_type="container">
				<div class="elementor-element elementor-element-992a8de elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="992a8de" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-5a42873 elementor-widget elementor-widget-html" data-id="5a42873" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/999601478?h=ba66d2bdb0">
      AMP Guitarra 3-1-7 / Video - Shake it off
    </option>
    <option value="https://player.vimeo.com/video/869205386?h=baea825e21">
      AMP Guitarra 3-1-9 / JamCenter - Knocking on heaven's door
    </option>
    <option value="https://player.vimeo.com/video/869224179?h=bc74a7be1d">
      AMP Guitarra 3-2-9 / JamCenter - What’s up
    </option>
    <option value="https://player.vimeo.com/video/869220191?h=47f71041ee">
      AMP Guitarra 3-2-11 / JamCenter - Lamento boliviano
    </option>
    <option value="https://player.vimeo.com/video/1032493837?h=c8079256c2">
      AMP Guitarra 3-3-3 / Backing track en G Mayor
    </option>
    <option value="https://player.vimeo.com/video/999608598?h=a1272a8681">
      AMP Guitarra 3-3-4 / Canción - Power chords
    </option>
    <option value="https://player.vimeo.com/video/869210201?h=bbc09f4a3b">
      AMP Guitarra 3-3-7 / JamCenter - Zombie
    </option>
    <option value="https://player.vimeo.com/video/999610581?h=dcf59e9839">
      AMP Guitarra 3-3-9 / Extracto - All the small things
    </option>
    <option value="https://player.vimeo.com/video/923416350?h=c2f29a5645">
      AMP Guitarra 3-3-11 / JamCenter - All the small things
    </option>
    <option value="https://player.vimeo.com/video/999611512?h=9426b1b2e5">
      AMP Guitarra 3-4-6 / Video Back in black
    </option>
    <option value="https://player.vimeo.com/video/999612059?h=abee578e85">
      AMP Guitarra 3-4-8 / Extracto Stand by me
    </option>
    <option value="https://player.vimeo.com/video/999612130?h=37e60025af">
      AMP Guitarra 3-5-3 / Extracto Everybody hurt
    </option>
    <option value="https://player.vimeo.com/video/999612181?h=5bb1d216bc">
      AMP Guitarra 3-5-4 / Video Perfect
    </option>
    <option value="https://player.vimeo.com/video/923402318?h=b9487e9c60">
      AMP Guitarra 3-5-6 / JamCenter - Camisa negra
    </option>
    <option value="https://player.vimeo.com/video/999612823?h=2d35e6e96a">
      AMP Guitarra 3-6-2 / Concierto final - Mi dulce chica
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-b404aee elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="b404aee" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-dda6a64 e-flex e-con-boxed e-con e-parent" data-id="dda6a64" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-1e92b31 elementor-widget elementor-widget-html" data-id="1e92b31" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Guitarra-3-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
		<div class="elementor-element elementor-element-050eb98 e-con-full e-flex e-con e-child" data-id="050eb98" data-element_type="container">
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA GT 3-4-7 &#8211; Sistema de localización “CDR” / Conexión de los patrones 1 y 2 (REPASO)</title>
		<link>https://www.ampenlinea.com/lessons/ama-gt-3-4-7-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:28:59 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56799</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Guitarra 3-1-7 / Video &#8211; Shake it off AMP Guitarra 3-1-9 / JamCenter &#8211; Knocking on heaven&#8217;s door AMP Guitarra 3-2-9 / JamCenter &#8211; What’s up AMP Guitarra 3-2-11 / JamCenter &#8211; Lamento boliviano AMP Guitarra 3-3-3 / Backing track en G Mayor AMP Guitarra &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/lessons/ama-gt-3-4-7-2/"> <span class="screen-reader-text">AMA GT 3-4-7 &#8211; Sistema de localización “CDR” / Conexión de los patrones 1 y 2 (REPASO)</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56799" class="elementor elementor-56799" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-0d9de28 e-con-full e-grid e-con e-child" data-id="0d9de28" data-element_type="container">
				<div class="elementor-element elementor-element-abdc099 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="abdc099" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-34af232 elementor-widget elementor-widget-html" data-id="34af232" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/999601478?h=ba66d2bdb0">
      AMP Guitarra 3-1-7 / Video - Shake it off
    </option>
    <option value="https://player.vimeo.com/video/869205386?h=baea825e21">
      AMP Guitarra 3-1-9 / JamCenter - Knocking on heaven's door
    </option>
    <option value="https://player.vimeo.com/video/869224179?h=bc74a7be1d">
      AMP Guitarra 3-2-9 / JamCenter - What’s up
    </option>
    <option value="https://player.vimeo.com/video/869220191?h=47f71041ee">
      AMP Guitarra 3-2-11 / JamCenter - Lamento boliviano
    </option>
    <option value="https://player.vimeo.com/video/1032493837?h=c8079256c2">
      AMP Guitarra 3-3-3 / Backing track en G Mayor
    </option>
    <option value="https://player.vimeo.com/video/999608598?h=a1272a8681">
      AMP Guitarra 3-3-4 / Canción - Power chords
    </option>
    <option value="https://player.vimeo.com/video/869210201?h=bbc09f4a3b">
      AMP Guitarra 3-3-7 / JamCenter - Zombie
    </option>
    <option value="https://player.vimeo.com/video/999610581?h=dcf59e9839">
      AMP Guitarra 3-3-9 / Extracto - All the small things
    </option>
    <option value="https://player.vimeo.com/video/923416350?h=c2f29a5645">
      AMP Guitarra 3-3-11 / JamCenter - All the small things
    </option>
    <option value="https://player.vimeo.com/video/999611512?h=9426b1b2e5">
      AMP Guitarra 3-4-6 / Video Back in black
    </option>
    <option value="https://player.vimeo.com/video/999612059?h=abee578e85">
      AMP Guitarra 3-4-8 / Extracto Stand by me
    </option>
    <option value="https://player.vimeo.com/video/999612130?h=37e60025af">
      AMP Guitarra 3-5-3 / Extracto Everybody hurt
    </option>
    <option value="https://player.vimeo.com/video/999612181?h=5bb1d216bc">
      AMP Guitarra 3-5-4 / Video Perfect
    </option>
    <option value="https://player.vimeo.com/video/923402318?h=b9487e9c60">
      AMP Guitarra 3-5-6 / JamCenter - Camisa negra
    </option>
    <option value="https://player.vimeo.com/video/999612823?h=2d35e6e96a">
      AMP Guitarra 3-6-2 / Concierto final - Mi dulce chica
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-bb101a4 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="bb101a4" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-af82498 e-flex e-con-boxed e-con e-parent" data-id="af82498" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-32532c9 elementor-widget elementor-widget-html" data-id="32532c9" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/02/Guitarra-3-4-7.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
		<div class="elementor-element elementor-element-3f000f4 e-con-full e-flex e-con e-child" data-id="3f000f4" data-element_type="container">
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA GT 3-6-2 &#8211; Concierto final de guitarra (REPASO 2)</title>
		<link>https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-3-6-2-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:26:19 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56787</guid>

					<description><![CDATA[Análisis del concierto Actividad Practicar el concierto respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 120 bpm.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56787" class="elementor elementor-56787" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-585d57d e-flex e-con-boxed e-con e-parent" data-id="585d57d" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-cc9dd34 elementor-widget elementor-widget-shortcode" data-id="cc9dd34" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"> <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio y Metrónomo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      background-color: #fafafa;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #fafafa;
      color: #333;
      border-bottom: 1px solid #ccc;
    }

    .toolbar .icons button {
      background: none;
      border: none;
      color: #333;
      font-size: 22px;
      cursor: pointer;
      margin-left: 15px;
    }

  .toolbar .icons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 20px;
      width: 90%;
      max-width: 480px;
      border-radius: 8px;
      position: relative;
    }

    .modal .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    .modal iframe {
      width: 100%;
      height: 475px;
      border: none;
      border-radius: 4px;
    }

    .modal .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal .audio-controls audio {
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="logo">Herramientas AMP<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="icons">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/brand-bandlab.svg" alt="Abrir Modales" onclick="abrirModal('audioModal')">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/metronome.svg" alt="Abrir Metrónomo" onclick="abrirModal('metronomeModal')">
    
    </div>
  </div>

  <!-- MODAL AUDIO -->
  <div id="audioModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('audioModal')">&times;</span>
      <h3>Selecciona un audio</h3>
      <div class="audio-controls">
        <select id="audioSelector" onchange="cambiarAudio(this.value)">
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3">GPP Rock Shuffle 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-B-Four-on-the-floor-80-bpm.mp3">GPP Four on the floor 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3411-Disco-80-bpm.mp3">GPP Disco 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3212-Hard-Rock-80-bpm.mp3">GPP Hard Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-219-8th-Note-Rock-80-bpm.mp3">GPP 8th Note Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-A-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock A 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-D-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-5512-Basic-RB-85-bpm.mp3">GPP Basic R&B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-415-Four-on-the-floor-85-bpm.mp3">GPP Four on the floor 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3112-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock A 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-338-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock B 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3116-Disco-100-bpm.mp3">GPP Disco 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-347-Bossa-Nova-100-bpm.mp3">GPP Bossa Nova 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-329-Soca-100-bpm.mp3">GPP 329 Soca 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-253-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-235-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-159-Hard-Rock-100-bpm.mp3">GPP Hard Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-156-16th-Note-Syncopated-Kick-100-bpm.mp3">GPP 16th Note Syncopated Kick 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-147-Four-on-the-floor-100-bpm.mp3">GPP Four on the floor 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-146-Half-time-Shuffle-100-bpm.mp3">GPP Half time Shuffle 100 bpm</option>

        </select>

        <audio id="audioPlayer" controls>
          <source src="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3" type="audio/mp3">
        </audio>

        <label for="velocidadAudio">Velocidad: <span id="velocidadValor">1.00x</span></label>
        <input type="range" id="velocidadAudio" min="0.5" max="2" step="0.05" value="1" oninput="ajustarVelocidad(this.value)">
      </div>
    </div>
  </div>

  <!-- MODAL METRONOMO -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('metronomeModal')">&times;</span>
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light"
        title="Metrónomo Online">
      </iframe>
    </div>
  </div>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const velocidadValor = document.getElementById('velocidadValor');

    function cambiarAudio(src) {
      audioPlayer.src = src;
      audioPlayer.playbackRate = parseFloat(document.getElementById('velocidadAudio').value);
      audioPlayer.play();
    }

    function ajustarVelocidad(speed) {
      velocidadValor.textContent = parseFloat(speed).toFixed(2) + 'x';
      audioPlayer.playbackRate = parseFloat(speed);
    }

    function abrirModal(id) {
      document.getElementById(id).style.display = 'flex';
    }

    function cerrarModal(id) {
      document.getElementById(id).style.display = 'none';
    }

    window.addEventListener('click', (e) => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) modal.style.display = 'none';
      });
    });
  </script>

</body>
</html>
</div>
				</div>
				</div>
		<!-- dce invisible element abc2727 --><style>
  /* Botón */
  #btnShowFretboard {
    padding: 12px 20px;
    margin: 10px;
    font-size: 16px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  /* Modal básico */
  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.85);
    overflow-y: auto;
    padding: 30px 10px;
    box-sizing: border-box;
  }
  .modal-content {
    background-color: #2f2f2f;
    margin: auto;
    padding: 20px;
    border-radius: 12px;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
  }
  .close-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  /* &#x1f3b8; Diapasón */
  .guitar-fretboard {
    display: grid;
    grid-template-columns: repeat(23, 48px);
    grid-template-rows: repeat(6, 42px);
    background: linear-gradient(90deg, #8b5e3c, #a07248);
    border-radius: 8px;
    position: relative;
    overflow-x: auto;
  }
  .fret {
    border-right: 1px solid #666;
    position: relative;
    cursor: pointer;
  }
  .string-line {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: #eee;
    transform: translateY(-50%);
  }
  .fret[data-string="6"] .string-line { height: 1.5px; }
  .fret[data-string="5"] .string-line { height: 2.0px; }
  .fret[data-string="4"] .string-line { height: 2.5px; }
  .fret[data-string="3"] .string-line { height: 3.0px; }
  .fret[data-string="2"] .string-line { height: 3.5px; }
  .fret[data-string="1"] .string-line { height: 4px; }
  .marker {
    width: 16px;
    height: 16px;
    background: crimson;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .fret-numbers {
    display: grid;
    grid-template-columns: repeat(23, 48px);
    margin-top: 8px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 14px;
    text-align: center;
  }
</style><style>
  #btnShowSheet {
    padding: 12px 20px;
    font-size: 18px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
  }

  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  .sheet-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  #sheetImage {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  #drawCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
  }
</style><div class="elementor-element elementor-element-12dd052 e-con-full e-flex e-con e-child" data-id="12dd052" data-element_type="container">
				<div class="elementor-element elementor-element-28445b5 elementor-widget elementor-widget-video" data-id="28445b5" data-element_type="widget" data-settings="{&quot;video_type&quot;:&quot;vimeo&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
					<div class="elementor-wrapper elementor-open-inline">
			<iframe class="elementor-video-iframe" allowfullscreen allow="clipboard-write" title="Reproductor de vídeo vimeo" src="https://player.vimeo.com/video/1005608885?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1&amp;h=4f1ebab183#t="></iframe>		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-80e14d7 e-con-full e-flex e-con e-child" data-id="80e14d7" data-element_type="container">
				<div class="elementor-element elementor-element-b0218a3 elementor-widget__width-initial elementor-widget elementor-widget-html" data-id="b0218a3" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			
<!-- &#x1f7e8; SUBTÍTULO 1 + PÁRRAFO -->
<section class="bloque-leccion">
  <h2>Análisis del concierto</h2>
   <p></p>



<img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/08/gt-3-6-2.png" alt="Concierto" class="imagen-responsiva">

<br>

</section>

<!--&#x1f7e8; Actividad + PÁRRAFO -->
<section class="bloque-leccion">
  
  <h1>Actividad</h1>
<p>Practicar el concierto respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 120 bpm.</p>

</section>

<!-- &#x1f3a8; ESTILO PERSONALIZADO -->
<style>
  .header-leccion {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .titulo-leccion {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #b30808;
    margin-bottom: 30px;
  }

  .bloque-leccion {
    margin: 30px 0;
  }

  .bloque-leccion h3 {
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
  }

  .bloque-leccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }

  .imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
.bloque-leccion {
  user-select: none;           /* Desactiva selección en navegadores modernos */
  -webkit-user-select: none;   /* Chrome/Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}


</style>

<script>
  // Bloquea clic derecho
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  });

  // Bloquea teclas como Ctrl+C, Ctrl+U, Ctrl+S, Ctrl+Shift+I (inspeccionar)
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && ['c', 'u', 's'].includes(e.key.toLowerCase())) ||
        (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i')) {
      e.preventDefault();
    }
  });
</script>

		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-32462a0 e-con-full e-flex e-con e-child" data-id="32462a0" data-element_type="container">
				<div class="elementor-element elementor-element-7e6d5bf elementor-widget elementor-widget-shortcode" data-id="7e6d5bf" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"><p>Debes iniciar sesión para ver este contenido.</p>
</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA GT 3-2-3 &#8211; Técnica PAC  NPS cuerdas al aire (REPASO 3)</title>
		<link>https://www.ampenlinea.com/lessons/ama-gt-3-2-3-4/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:19:19 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56786</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Guitarra 3-1-7 / Video &#8211; Shake it off AMP Guitarra 3-1-9 / JamCenter &#8211; Knocking on heaven&#8217;s door AMP Guitarra 3-2-9 / JamCenter &#8211; What’s up AMP Guitarra 3-2-11 / JamCenter &#8211; Lamento boliviano AMP Guitarra 3-3-3 / Backing track en G Mayor AMP Guitarra &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/lessons/ama-gt-3-2-3-4/"> <span class="screen-reader-text">AMA GT 3-2-3 &#8211; Técnica PAC  NPS cuerdas al aire (REPASO 3)</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56786" class="elementor elementor-56786" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-35b75a4 e-con-full e-grid e-con e-child" data-id="35b75a4" data-element_type="container">
				<div class="elementor-element elementor-element-b4e0899 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="b4e0899" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-2b57275 elementor-widget elementor-widget-html" data-id="2b57275" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/999601478?h=ba66d2bdb0">
      AMP Guitarra 3-1-7 / Video - Shake it off
    </option>
    <option value="https://player.vimeo.com/video/869205386?h=baea825e21">
      AMP Guitarra 3-1-9 / JamCenter - Knocking on heaven's door
    </option>
    <option value="https://player.vimeo.com/video/869224179?h=bc74a7be1d">
      AMP Guitarra 3-2-9 / JamCenter - What’s up
    </option>
    <option value="https://player.vimeo.com/video/869220191?h=47f71041ee">
      AMP Guitarra 3-2-11 / JamCenter - Lamento boliviano
    </option>
    <option value="https://player.vimeo.com/video/1032493837?h=c8079256c2">
      AMP Guitarra 3-3-3 / Backing track en G Mayor
    </option>
    <option value="https://player.vimeo.com/video/999608598?h=a1272a8681">
      AMP Guitarra 3-3-4 / Canción - Power chords
    </option>
    <option value="https://player.vimeo.com/video/869210201?h=bbc09f4a3b">
      AMP Guitarra 3-3-7 / JamCenter - Zombie
    </option>
    <option value="https://player.vimeo.com/video/999610581?h=dcf59e9839">
      AMP Guitarra 3-3-9 / Extracto - All the small things
    </option>
    <option value="https://player.vimeo.com/video/923416350?h=c2f29a5645">
      AMP Guitarra 3-3-11 / JamCenter - All the small things
    </option>
    <option value="https://player.vimeo.com/video/999611512?h=9426b1b2e5">
      AMP Guitarra 3-4-6 / Video Back in black
    </option>
    <option value="https://player.vimeo.com/video/999612059?h=abee578e85">
      AMP Guitarra 3-4-8 / Extracto Stand by me
    </option>
    <option value="https://player.vimeo.com/video/999612130?h=37e60025af">
      AMP Guitarra 3-5-3 / Extracto Everybody hurt
    </option>
    <option value="https://player.vimeo.com/video/999612181?h=5bb1d216bc">
      AMP Guitarra 3-5-4 / Video Perfect
    </option>
    <option value="https://player.vimeo.com/video/923402318?h=b9487e9c60">
      AMP Guitarra 3-5-6 / JamCenter - Camisa negra
    </option>
    <option value="https://player.vimeo.com/video/999612823?h=2d35e6e96a">
      AMP Guitarra 3-6-2 / Concierto final - Mi dulce chica
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-b8a48c4 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="b8a48c4" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-8c755e2 e-flex e-con-boxed e-con e-parent" data-id="8c755e2" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-631d159 elementor-widget elementor-widget-html" data-id="631d159" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Guitarra-3-2-3.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
		<div class="elementor-element elementor-element-01ae5bd e-con-full e-flex e-con e-child" data-id="01ae5bd" data-element_type="container">
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA GT 3-6-1 – Análisis del concierto final (REPASO)</title>
		<link>https://www.ampenlinea.com/lessons/ama-gt-3-6-1-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:10:11 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56774</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Guitarra 3-6-2 / Concierto final &#8211; Mi dulce chica &#215; Prueba Audio JS &#8211; GPP + 1.0x Modal con Pantalla Completa Pantalla Completa]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56774" class="elementor elementor-56774" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-ebb7119 e-con-full e-grid e-con e-child" data-id="ebb7119" data-element_type="container">
				<div class="elementor-element elementor-element-3bb945e elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="3bb945e" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-b63f0ec elementor-widget elementor-widget-html" data-id="b63f0ec" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
   
    <option value="https://player.vimeo.com/video/999612823?h=2d35e6e96a">
      AMP Guitarra 3-6-2 / Concierto final - Mi dulce chica
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-d27e12b elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="d27e12b" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-40bdf3f e-flex e-con-boxed e-con e-parent" data-id="40bdf3f" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-ccdcfdc elementor-widget elementor-widget-html" data-id="ccdcfdc" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/02/Guitarra-3-6-1.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
		<div class="elementor-element elementor-element-9b183e2 e-con-full e-flex e-con e-child" data-id="9b183e2" data-element_type="container">
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA GT 3-6-2 &#8211; Concierto final de guitarra (REPASO)</title>
		<link>https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-3-6-2-5/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:05:02 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56775</guid>

					<description><![CDATA[Concierto final Actividad Practicar el concierto respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 120 bpm.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56775" class="elementor elementor-56775" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-cc98e9c e-flex e-con-boxed e-con e-parent" data-id="cc98e9c" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-32f8b3a elementor-widget elementor-widget-shortcode" data-id="32f8b3a" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"> <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio y Metrónomo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      background-color: #fafafa;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #fafafa;
      color: #333;
      border-bottom: 1px solid #ccc;
    }

    .toolbar .icons button {
      background: none;
      border: none;
      color: #333;
      font-size: 22px;
      cursor: pointer;
      margin-left: 15px;
    }

  .toolbar .icons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 20px;
      width: 90%;
      max-width: 480px;
      border-radius: 8px;
      position: relative;
    }

    .modal .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    .modal iframe {
      width: 100%;
      height: 475px;
      border: none;
      border-radius: 4px;
    }

    .modal .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal .audio-controls audio {
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="logo">Herramientas AMP<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="icons">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/brand-bandlab.svg" alt="Abrir Modales" onclick="abrirModal('audioModal')">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/metronome.svg" alt="Abrir Metrónomo" onclick="abrirModal('metronomeModal')">
    
    </div>
  </div>

  <!-- MODAL AUDIO -->
  <div id="audioModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('audioModal')">&times;</span>
      <h3>Selecciona un audio</h3>
      <div class="audio-controls">
        <select id="audioSelector" onchange="cambiarAudio(this.value)">
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3">GPP Rock Shuffle 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-B-Four-on-the-floor-80-bpm.mp3">GPP Four on the floor 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3411-Disco-80-bpm.mp3">GPP Disco 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3212-Hard-Rock-80-bpm.mp3">GPP Hard Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-219-8th-Note-Rock-80-bpm.mp3">GPP 8th Note Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-A-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock A 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-D-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-5512-Basic-RB-85-bpm.mp3">GPP Basic R&B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-415-Four-on-the-floor-85-bpm.mp3">GPP Four on the floor 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3112-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock A 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-338-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock B 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3116-Disco-100-bpm.mp3">GPP Disco 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-347-Bossa-Nova-100-bpm.mp3">GPP Bossa Nova 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-329-Soca-100-bpm.mp3">GPP 329 Soca 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-253-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-235-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-159-Hard-Rock-100-bpm.mp3">GPP Hard Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-156-16th-Note-Syncopated-Kick-100-bpm.mp3">GPP 16th Note Syncopated Kick 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-147-Four-on-the-floor-100-bpm.mp3">GPP Four on the floor 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-146-Half-time-Shuffle-100-bpm.mp3">GPP Half time Shuffle 100 bpm</option>

        </select>

        <audio id="audioPlayer" controls>
          <source src="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3" type="audio/mp3">
        </audio>

        <label for="velocidadAudio">Velocidad: <span id="velocidadValor">1.00x</span></label>
        <input type="range" id="velocidadAudio" min="0.5" max="2" step="0.05" value="1" oninput="ajustarVelocidad(this.value)">
      </div>
    </div>
  </div>

  <!-- MODAL METRONOMO -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('metronomeModal')">&times;</span>
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light"
        title="Metrónomo Online">
      </iframe>
    </div>
  </div>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const velocidadValor = document.getElementById('velocidadValor');

    function cambiarAudio(src) {
      audioPlayer.src = src;
      audioPlayer.playbackRate = parseFloat(document.getElementById('velocidadAudio').value);
      audioPlayer.play();
    }

    function ajustarVelocidad(speed) {
      velocidadValor.textContent = parseFloat(speed).toFixed(2) + 'x';
      audioPlayer.playbackRate = parseFloat(speed);
    }

    function abrirModal(id) {
      document.getElementById(id).style.display = 'flex';
    }

    function cerrarModal(id) {
      document.getElementById(id).style.display = 'none';
    }

    window.addEventListener('click', (e) => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) modal.style.display = 'none';
      });
    });
  </script>

</body>
</html>
</div>
				</div>
				</div>
		<!-- dce invisible element 791f050 --><style>
  /* Botón */
  #btnShowFretboard {
    padding: 12px 20px;
    margin: 10px;
    font-size: 16px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  /* Modal básico */
  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.85);
    overflow-y: auto;
    padding: 30px 10px;
    box-sizing: border-box;
  }
  .modal-content {
    background-color: #2f2f2f;
    margin: auto;
    padding: 20px;
    border-radius: 12px;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
  }
  .close-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  /* &#x1f3b8; Diapasón */
  .guitar-fretboard {
    display: grid;
    grid-template-columns: repeat(23, 48px);
    grid-template-rows: repeat(6, 42px);
    background: linear-gradient(90deg, #8b5e3c, #a07248);
    border-radius: 8px;
    position: relative;
    overflow-x: auto;
  }
  .fret {
    border-right: 1px solid #666;
    position: relative;
    cursor: pointer;
  }
  .string-line {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: #eee;
    transform: translateY(-50%);
  }
  .fret[data-string="6"] .string-line { height: 1.5px; }
  .fret[data-string="5"] .string-line { height: 2.0px; }
  .fret[data-string="4"] .string-line { height: 2.5px; }
  .fret[data-string="3"] .string-line { height: 3.0px; }
  .fret[data-string="2"] .string-line { height: 3.5px; }
  .fret[data-string="1"] .string-line { height: 4px; }
  .marker {
    width: 16px;
    height: 16px;
    background: crimson;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .fret-numbers {
    display: grid;
    grid-template-columns: repeat(23, 48px);
    margin-top: 8px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 14px;
    text-align: center;
  }
</style><style>
  #btnShowSheet {
    padding: 12px 20px;
    font-size: 18px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
  }

  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  .sheet-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  #sheetImage {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  #drawCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
  }
</style><div class="elementor-element elementor-element-94e8da9 e-con-full e-flex e-con e-child" data-id="94e8da9" data-element_type="container">
				<div class="elementor-element elementor-element-53cb1a5 elementor-widget elementor-widget-video" data-id="53cb1a5" data-element_type="widget" data-settings="{&quot;video_type&quot;:&quot;vimeo&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
					<div class="elementor-wrapper elementor-open-inline">
			<iframe class="elementor-video-iframe" allowfullscreen allow="clipboard-write" title="Reproductor de vídeo vimeo" src="https://player.vimeo.com/video/1005608885?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1&amp;h=4f1ebab183#t="></iframe>		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-7070336 e-con-full e-flex e-con e-child" data-id="7070336" data-element_type="container">
				<div class="elementor-element elementor-element-7ee418d elementor-widget__width-initial elementor-widget elementor-widget-html" data-id="7ee418d" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			
<!-- &#x1f7e8; SUBTÍTULO 1 + PÁRRAFO -->
<section class="bloque-leccion">
  <h2>Concierto final</h2>
 



<img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/09/gt-3-6-2.png" alt="Concierto" class="imagen-responsiva">



</section>

<!--&#x1f7e8; Actividad + PÁRRAFO -->
<section class="bloque-leccion">
  
  <h1>Actividad</h1>
<p>Practicar el concierto respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 120 bpm.</p>

</section>

<!-- &#x1f3a8; ESTILO PERSONALIZADO -->
<style>
  .header-leccion {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .titulo-leccion {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #b30808;
    margin-bottom: 30px;
  }

  .bloque-leccion {
    margin: 30px 0;
  }

  .bloque-leccion h3 {
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
  }

  .bloque-leccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }

  .imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
.bloque-leccion {
  user-select: none;           /* Desactiva selección en navegadores modernos */
  -webkit-user-select: none;   /* Chrome/Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}


</style>

<script>
  // Bloquea clic derecho
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  });

  // Bloquea teclas como Ctrl+C, Ctrl+U, Ctrl+S, Ctrl+Shift+I (inspeccionar)
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && ['c', 'u', 's'].includes(e.key.toLowerCase())) ||
        (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i')) {
      e.preventDefault();
    }
  });
</script>

		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-3c2783d e-con-full e-flex e-con e-child" data-id="3c2783d" data-element_type="container">
				<div class="elementor-element elementor-element-899f899 elementor-widget elementor-widget-shortcode" data-id="899f899" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"><p>Debes iniciar sesión para ver este contenido.</p>
</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA Guitarra N3 – SE – Sistema de Evaluación (REPASO)</title>
		<link>https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-n3-se-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Sun, 16 Feb 2025 17:01:00 +0000</pubDate>
				<category><![CDATA[AMA Guitarra N3]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=56768</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Guitarra 3-1-7 / Video &#8211; Shake it off AMP Guitarra 3-1-9 / JamCenter &#8211; Knocking on heaven&#8217;s door AMP Guitarra 3-2-9 / JamCenter &#8211; What’s up AMP Guitarra 3-2-11 / JamCenter &#8211; Lamento boliviano AMP Guitarra 3-3-3 / Backing track en G Mayor AMP Guitarra &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/courses/ama-guitarra-n3/lessons/ama-gt-n3-se-2/"> <span class="screen-reader-text">AMA Guitarra N3 – SE – Sistema de Evaluación (REPASO)</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="56768" class="elementor elementor-56768" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-88b4c8b e-con-full e-grid e-con e-child" data-id="88b4c8b" data-element_type="container">
				<div class="elementor-element elementor-element-ee0d491 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="ee0d491" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-02dc36c elementor-widget elementor-widget-html" data-id="02dc36c" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/999601478?h=ba66d2bdb0">
      AMP Guitarra 3-1-7 / Video - Shake it off
    </option>
    <option value="https://player.vimeo.com/video/869205386?h=baea825e21">
      AMP Guitarra 3-1-9 / JamCenter - Knocking on heaven's door
    </option>
    <option value="https://player.vimeo.com/video/869224179?h=bc74a7be1d">
      AMP Guitarra 3-2-9 / JamCenter - What’s up
    </option>
    <option value="https://player.vimeo.com/video/869220191?h=47f71041ee">
      AMP Guitarra 3-2-11 / JamCenter - Lamento boliviano
    </option>
    <option value="https://player.vimeo.com/video/1032493837?h=c8079256c2">
      AMP Guitarra 3-3-3 / Backing track en G Mayor
    </option>
    <option value="https://player.vimeo.com/video/999608598?h=a1272a8681">
      AMP Guitarra 3-3-4 / Canción - Power chords
    </option>
    <option value="https://player.vimeo.com/video/869210201?h=bbc09f4a3b">
      AMP Guitarra 3-3-7 / JamCenter - Zombie
    </option>
    <option value="https://player.vimeo.com/video/999610581?h=dcf59e9839">
      AMP Guitarra 3-3-9 / Extracto - All the small things
    </option>
    <option value="https://player.vimeo.com/video/923416350?h=c2f29a5645">
      AMP Guitarra 3-3-11 / JamCenter - All the small things
    </option>
    <option value="https://player.vimeo.com/video/999611512?h=9426b1b2e5">
      AMP Guitarra 3-4-6 / Video Back in black
    </option>
    <option value="https://player.vimeo.com/video/999612059?h=abee578e85">
      AMP Guitarra 3-4-8 / Extracto Stand by me
    </option>
    <option value="https://player.vimeo.com/video/999612130?h=37e60025af">
      AMP Guitarra 3-5-3 / Extracto Everybody hurt
    </option>
    <option value="https://player.vimeo.com/video/999612181?h=5bb1d216bc">
      AMP Guitarra 3-5-4 / Video Perfect
    </option>
    <option value="https://player.vimeo.com/video/923402318?h=b9487e9c60">
      AMP Guitarra 3-5-6 / JamCenter - Camisa negra
    </option>
    <option value="https://player.vimeo.com/video/999612823?h=2d35e6e96a">
      AMP Guitarra 3-6-2 / Concierto final - Mi dulce chica
    </option>
</select>


  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-58f4df6 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="58f4df6" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-6a1d0bf e-flex e-con-boxed e-con e-parent" data-id="6a1d0bf" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-c36a5cc elementor-widget elementor-widget-html" data-id="c36a5cc" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Guitarra-3-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
		<div class="elementor-element elementor-element-4b9c7dc e-con-full e-flex e-con e-child" data-id="4b9c7dc" data-element_type="container">
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
