VMAD · Plan para el lunes 20 abril

Preparado la madrugada del 20/abril. Objetivo: terminar la personalización del template del Single Episode con widget custom de Bienvenida/Meditación/Oración. Tiempo total estimado: 45-60 min.

Fase 1 — Desactivar Episode Timeline nativo 2 min

Ir a Apariencia → Personalizar → Audio → Single
Hacer scroll hasta encontrar "Show Timeline"
Cambiar de Yes a No
Pulsar Publicar (arriba)
Cerrar Customizer

Resultado esperado: al visitar un Episode, ya no aparece la tabla "Episode timeline" con las marcas de Introduction/Exploring/etc. Queda espacio libre.

Fase 2 — Abrir el Single Template en Elementor 3 min

Ir al Episode de prueba ("How to design a website with Figma Tool")
Pulsar "Editar con Elementor"
Confirmar arriba que dice post audio (eso significa que estás editando el Single Template de audio)
Localizar la zona donde ANTES estaba el Episode timeline — ahora debería estar vacía o con el texto "Episode transcript" solo

Fase 3 — Añadir widget HTML con las 3 tarjetas de audio 10 min

En el panel lateral izquierdo, buscar el widget "HTML" (está en la sección "Básico" o "General")
Arrastrarlo al lugar donde estaba el Episode Timeline
Pegar en el campo "Código HTML" el bloque completo de abajo
Guardar

Código HTML a pegar:

<style>
.vmad-audio-tree { background: #FAF5EB; border-radius: 8px; padding: 24px; border: 0.5px solid rgba(61,40,23,0.12); font-family: 'Inter', sans-serif; max-width: 760px; margin: 24px auto; }
.vmad-audio-label { font-size: 11px; font-weight: 500; color: #8A6E4E; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 14px; text-align: center; font-style: italic; }
.vmad-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #F5EFE4; border-radius: 6px; margin-bottom: 8px; border: 0.5px solid transparent; transition: border-color 0.15s; cursor: pointer; }
.vmad-card:hover { border-color: #D56A3F; }
.vmad-play { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1.5px solid #B8441F; color: #B8441F; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.vmad-play:hover { background: #B8441F; color: #F5EFE4; }
.vmad-play svg { width: 11px; height: 11px; }
.vmad-info { flex: 1; min-width: 0; }
.vmad-name { font-size: 14px; font-weight: 500; color: #3D2817; margin: 0 0 3px; font-family: 'Lora', Georgia, serif; }
.vmad-detail { font-size: 11px; color: #8A6E4E; font-variant-numeric: tabular-nums; margin: 0; }
audio.vmad-hidden { display: none; }
</style>

<div class="vmad-audio-tree">
  <p class="vmad-audio-label">— escucha por secciones —</p>

  <div class="vmad-card" onclick="vmadPlay('vmad-audio-day', 0)">
    <button class="vmad-play" aria-label="Reproducir Bienvenida">
      <svg viewBox="0 0 10 10" fill="currentColor"><path d="M2 1 L9 5 L2 9 Z"/></svg>
    </button>
    <div class="vmad-info">
      <p class="vmad-name">Bienvenida · El versículo del día</p>
      <p class="vmad-detail">Empieza en 0:00 · dura 0:42</p>
    </div>
  </div>

  <div class="vmad-card" onclick="vmadPlay('vmad-audio-day', 42)">
    <button class="vmad-play" aria-label="Reproducir Meditación">
      <svg viewBox="0 0 10 10" fill="currentColor"><path d="M2 1 L9 5 L2 9 Z"/></svg>
    </button>
    <div class="vmad-info">
      <p class="vmad-name">Meditación · La reflexión</p>
      <p class="vmad-detail">Empieza en 0:42 · dura 3:45</p>
    </div>
  </div>

  <div class="vmad-card" onclick="vmadPlay('vmad-audio-day', 267)">
    <button class="vmad-play" aria-label="Reproducir Oración">
      <svg viewBox="0 0 10 10" fill="currentColor"><path d="M2 1 L9 5 L2 9 Z"/></svg>
    </button>
    <div class="vmad-info">
      <p class="vmad-name">Oración · Al Padre</p>
      <p class="vmad-detail">Empieza en 4:27 · dura 1:05</p>
    </div>
  </div>

  <audio id="vmad-audio-day" class="vmad-hidden" preload="metadata">
    <source src="URL_DEL_MP3" type="audio/mpeg">
  </audio>
</div>

<script>
function vmadPlay(id, seconds) {
  var audio = document.getElementById(id);
  if (!audio) return;
  audio.currentTime = seconds;
  audio.play();
}
</script>

Importante — URL dinámica:
Donde dice URL_DEL_MP3 en el código, tienes que reemplazarlo por una URL dinámica de Elementor Pro que lea el campo ovau_audio_url de cada Episode. Así, al editar un Episode distinto, cada uno carga su propio MP3.

Pero para la primera prueba, simplemente pega tu URL de Bunny directa:
https://vmad-audios.b-cdn.net/abril-2026/dia-01-prueba.mp3

Una vez funcione con URL fija, ya lo volvemos dinámico.

Fase 4 — Probar que funciona 5 min

Pulsar "Guardar" o "Actualizar" en Elementor
Ir al Episode en el frontend (pestaña nueva del navegador)
Debe verse la tarjeta con las 3 secciones: Bienvenida, Meditación, Oración
Pulsar cada tarjeta — debe reproducir el audio saltando a diferentes segundos
Si todo funciona → ✓

Fase 5 — Hacer la URL dinámica (opcional pero recomendado) 10 min

Para que cada Episode cargue su propio MP3 sin editar el HTML manualmente:

En Elementor, el widget HTML NO soporta campos dinámicos directamente en el código
Alternativa: usar el widget Shortcode + un shortcode custom
Crear un shortcode en functions.php del tema hijo (o usar plugin "Code Snippets") que genere el HTML con la URL de ovau_audio_url
Reemplazar el widget HTML por widget Shortcode con [vmad_audio_tree]

Alternativa más simple (recomendada al inicio): dejar el widget HTML con URL fija por ahora. Cuando tengamos los 15 días reales de abril, copiamos el template de cada Episode y ajustamos la URL manualmente. Son 15 copias y pegados, 10 minutos de trabajo.

🌳 VMAD · Plan para el lunes 20 abril