<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Palabra de Dios | Avanza Por Más</title>
  <meta name="description" content="Reflexión, oración y versículo para hoy. Recibe palabras de aliento en tu móvil.">
  <meta name="theme-color" content="#d6b35e">

  <meta property="og:type" content="website">
  <meta property="og:title" content="Dios tiene una palabra para ti hoy">
  <meta property="og:description" content="Reflexión, oración y versículo para hoy. Tómate un minuto y recíbela.">
  <meta property="og:image" content="https://avanzapormas.com/frases/imagen-facebook.jpg">
  <meta property="og:url" content="https://avanzapormas.com/frases">
  <meta property="og:site_name" content="Avanza Por Más">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Dios tiene una palabra para ti hoy">
  <meta name="twitter:description" content="Reflexión, oración y versículo para hoy. Tómate un minuto y recíbela.">
  <meta name="twitter:image" content="https://avanzapormas.com/frases/imagen-facebook.jpg">

  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="page-bg"></div>

  <main class="page">
    <section class="card">
      <h1>Palabra de Dios</h1>
      <div class="today-date">17 De Abril De 2026</div>
      <p class="hero-line">Hoy será un gran día</p>

      <div class="top-actions">
        <button class="btn btn-push" id="pushBtnTop">🔔 Recibe Palabras de Aliento en tu Móvil</button>
      </div>

      <section class="block reflection reflection-featured">
        <h2>Reflexión de hoy</h2>
        <div class="reflection-title">La importancia de la perseverancia diaria</div>
        <p>Los grandes logros en el Reino de Dios no son fruto de un solo momento de fe, sino de la constancia de cada día. La perseverancia es la fe que se niega a rendirse ante la fatiga. Dios está puliendo tu carácter en la rutina diaria, preparándote para la gloria que ha de venir.</p>
        <p>No te canses de hacer lo correcto, aunque parezca que nadie lo nota. La fidelidad en lo poco es lo que abre las puertas de lo mucho. Cada oración que elevas y cada acto de obediencia suman en tu cuenta celestial. Mantén tu mirada en la meta final; la recompensa por tu perseverancia será mucho más grande de lo que imaginas hoy.</p>
      </section>

      <section class="block prayer content-highlight">
        <h2>Oración</h2>
        <p>Señor, dame la fuerza para perseverar. No permitiré que el desánimo me detenga. Confío en que veré Tu bondad en la tierra de los vivientes. Amén.</p>
      </section>

      <section class="block verse content-highlight">
        <h2>Versículo</h2>
        <p>No nos cansemos de hacer el bien. A su debido tiempo, cosecharemos numerosas bendiciones si no nos damos por vencidos.</p>
        <div class="verse-cite">Gálatas 6:9 (NTV)</div>
      </section>

      <div class="actions">
        <button class="btn btn-primary" id="shareBtn">
          <span class="btn-icon">📤</span>
          <span>Compartir esta palabra</span>
        </button>

        <a class="btn btn-secondary" href="">
          <span class="btn-icon">✨</span>
          <span>Otra palabra para hoy</span>
        </a>
      </div>

      <div class="share-fallback" id="shareFallback">
        <a id="waShare" target="_blank" rel="noopener noreferrer">WhatsApp</a>
        <a id="tgShare" target="_blank" rel="noopener noreferrer">Telegram</a>
        <a id="fbShare" target="_blank" rel="noopener noreferrer">Facebook</a>
        <a id="mailShare" target="_blank" rel="noopener noreferrer">Email</a>
      </div>

      <div class="bottom-activate">
        <button class="btn btn-push btn-push-wide" id="pushBtnBottom">🔔 Recibe Palabras de Aliento en tu Móvil</button>
      </div>

      <div class="apple-inline-cta" id="appleInlineCTABottom">
        <button class="btn btn-apple-guide" id="openAppleGuideBtnBottom">
          <span class="apple-logo" aria-hidden="true"></span>
          <span>Ver guía para iPhone / iPad</span>
        </button>
      </div>

      <section class="device-help" id="deviceHelp">
        <h3>Cómo activarlo en tu dispositivo</h3>

        <div class="device-box" id="helpIOS">
          <div class="device-title">iPhone / iPad</div>
          <div class="device-steps">
            <div class="step"><span class="step-icon">1</span><span>Si usas Apple, toca el botón <strong>Ver guía para iPhone / iPad</strong>.</span></div>
            <div class="step"><span class="step-icon">2</span><span>Allí verás el video, el botón copiar y las capturas.</span></div>
            <div class="step"><span class="step-icon">3</span><span>Luego vuelve y toca <strong>Recibe Palabras de Aliento en tu Móvil</strong>.</span></div>
          </div>
        </div>

        <div class="device-box" id="helpAndroid">
          <div class="device-title">Android</div>
          <div class="device-steps">
            <div class="step"><span class="step-icon">1</span><span>Toca el botón <strong>Recibe Palabras de Aliento en tu Móvil</strong>.</span></div>
            <div class="step"><span class="step-icon">2</span><span>Acepta el permiso de notificaciones.</span></div>
            <div class="step"><span class="step-icon">3</span><span>Luego abre el menú del navegador y elige <strong>Agregar a pantalla de inicio</strong>.</span></div>
            <div class="step"><span class="step-icon">4</span><span>Así tendrás un icono como si fuera una app.</span></div>
          </div>
        </div>

        <div class="device-box" id="helpEdge">
          <div class="device-title">Edge</div>
          <div class="device-steps">
            <div class="step"><span class="step-icon">1</span><span>Toca el botón de activar.</span></div>
            <div class="step"><span class="step-icon">2</span><span>Si Edge bloquea las notificaciones, toca el <strong>candado</strong> o el icono del sitio en la barra de direcciones.</span></div>
            <div class="step"><span class="step-icon">3</span><span>Permite <strong>Notificaciones</strong>.</span></div>
            <div class="step"><span class="step-icon">4</span><span>Recarga la página y vuelve a intentarlo.</span></div>
          </div>
        </div>

        <div class="device-box" id="helpDesktop">
          <div class="device-title">Escritorio / Chrome</div>
          <div class="device-steps">
            <div class="step"><span class="step-icon">1</span><span>Toca el botón de activar.</span></div>
            <div class="step"><span class="step-icon">2</span><span>Acepta el permiso de notificaciones.</span></div>
            <div class="step"><span class="step-icon">3</span><span>Si se bloquean, revisa el candado del navegador y permite notificaciones.</span></div>
          </div>
        </div>

        <div class="device-status" id="deviceStatus"></div>
      </section>

      <section class="priority-links top-priority">
        <h3>Accesos principales</h3>
        <div class="priority-grid">
          <a class="priority-item priority-whatsapp" href="https://whatsapp.com/channel/0029Va7EWLD42Dco1qXmvg04" target="_blank" rel="noopener noreferrer">
            <div class="icon icon-priority">💬</div>
            <strong>Canal de WhatsApp</strong>
            <span>Recibe palabras diarias en tu celular</span>
          </a>

          <a class="priority-item priority-youtube" href="https://www.youtube.com/@avanzapormascom/videos" target="_blank" rel="noopener noreferrer">
            <div class="icon icon-priority">▶️</div>
            <strong>Oraciones en Video</strong>
            <span>Mira los videos más recientes</span>
          </a>

          <a class="priority-item priority-donate" href="https://avanzapormas.com/donar" target="_blank" rel="noopener noreferrer">
            <div class="icon icon-priority">🌱</div>
            <strong>Donar / Sembrar</strong>
            <span>Apoya esta obra</span>
          </a>
        </div>
      </section>

      <section class="secondary-links">
        <h3>Explora más</h3>
        <div class="secondary-list">
          <a class="secondary-item" href="https://avanzapormas.com/" target="_blank" rel="noopener noreferrer">
            <div class="icon">🏠</div>
            <div class="secondary-copy">
              <strong>Inicio</strong>
              <span>Página principal</span>
            </div>
          </a>

          <a class="secondary-item" href="https://avanzapormas.com/libros" target="_blank" rel="noopener noreferrer">
            <div class="icon">📚</div>
            <div class="secondary-copy">
              <strong>Libros</strong>
              <span>Recursos y libros cristianos</span>
            </div>
          </a>

          <a class="secondary-item" href="https://groups.google.com/g/avanza-por-mas/about?pli=1" target="_blank" rel="noopener noreferrer">
            <div class="icon">📩</div>
            <div class="secondary-copy">
              <strong>Grupo Google</strong>
              <span>Recibe novedades</span>
            </div>
          </a>

          <a class="secondary-item" href="https://avanzapormas.com/tag/imagenes-cristianas/" target="_blank" rel="noopener noreferrer">
            <div class="icon">🖼️</div>
            <div class="secondary-copy">
              <strong>Imágenes Cristianas</strong>
              <span>Para compartir</span>
            </div>
          </a>
        </div>
      </section>

      <section class="secondary-links">
        <h3>Redes Sociales</h3>
        <div class="secondary-list">
          <a class="secondary-item" href="https://instagram.com/avanzapormas_oficial" target="_blank" rel="noopener noreferrer">
            <div class="icon">📸</div>
            <div class="secondary-copy">
              <strong>Instagram</strong>
              <span>@avanzapormas_oficial</span>
            </div>
          </a>

          <a class="secondary-item" href="https://facebook.com/avanzapormascom" target="_blank" rel="noopener noreferrer">
            <div class="icon">📘</div>
            <div class="secondary-copy">
              <strong>Facebook</strong>
              <span>/avanzapormascom</span>
            </div>
          </a>

          <a class="secondary-item" href="https://www.tiktok.com/@avanzapormas.com" target="_blank" rel="noopener noreferrer">
            <div class="icon">🎵</div>
            <div class="secondary-copy">
              <strong>TikTok</strong>
              <span>@avanzapormas.com</span>
            </div>
          </a>
        </div>
      </section>

      <div class="footer-note">
        Comparte esta palabra con alguien que necesite fe, paz y esperanza hoy.
      </div>
    </section>
  </main>

  <a class="whatsapp-float" id="waFloat" target="_blank" rel="noopener noreferrer">
    <span>💬</span>
    <span>Compartir por WhatsApp</span>
  </a>

  <div class="popup-overlay" id="helpPopup">
    <div class="popup-card">
      <button class="popup-close" id="closePopup">×</button>
      <h3>Activa esto en tu dispositivo</h3>
      <div class="popup-content" id="popupContent"></div>
    </div>
  </div>

  <div class="popup-overlay" id="appleGuidePopup">
    <div class="popup-card popup-card-apple">
      <button class="popup-close" id="closeAppleGuide">×</button>
      <h3>Guía para iPhone / iPad</h3>

      <div class="apple-guide-content">
        <div class="apple-copy-box">
          <div class="apple-copy-label">Enlace para copiar</div>
          <div class="apple-copy-row">
            <input type="text" id="appleCopyInput" value="https://avanzapormas.com/frases" readonly>
            <button class="btn-copy" id="copyAppleLinkBtn">Copiar</button>
          </div>
          <div class="apple-copy-status" id="copyAppleStatus"></div>
        </div>

        <div class="apple-video-box">
          <div class="apple-section-title">Video vertical explicativo</div>
          <div class="apple-video-embed">
            <iframe
              src="https://www.youtube.com/embed/h4y7MDH20TY"
              title="Cómo activar en iPhone"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen>
            </iframe>
          </div>
        </div>

        <div class="apple-steps-box">
          <div class="apple-section-title">Pasos</div>
          <div class="apple-step-list">
            <div class="apple-step-item"><span class="step-icon">1</span><span>Abre esta página en <strong>Safari</strong>.</span></div>
            <div class="apple-step-item"><span class="step-icon">2</span><span>Toca el botón <strong>Compartir</strong> de Safari.</span></div>
            <div class="apple-step-item"><span class="step-icon">3</span><span>Toca <strong>Agregar a pantalla de inicio</strong>.</span></div>
            <div class="apple-step-item"><span class="step-icon">4</span><span>Abre el icono instalado en tu iPhone o iPad.</span></div>
            <div class="apple-step-item"><span class="step-icon">5</span><span>Luego toca <strong>Recibe Palabras de Aliento en tu Móvil</strong>.</span></div>
          </div>
        </div>

        <div class="apple-screenshots-box">
          <div class="apple-section-title">Capturas de ayuda</div>
          <div class="apple-shot-grid">
            <div class="apple-shot">
              <img src="paso-compartir.jpg" alt="Paso compartir">
              <div class="apple-shot-caption">Botón Compartir</div>
            </div>
            <div class="apple-shot">
              <img src="paso-agregar-inicio.jpg" alt="Agregar a inicio">
              <div class="apple-shot-caption">Agregar a pantalla de inicio</div>
            </div>
            <div class="apple-shot">
              <img src="paso-aceptar.jpg" alt="Aceptar al final">
              <div class="apple-shot-caption">Abrir y aceptar al final</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    window.APP_CONFIG = {
      shareText: "Palabra de Dios\n\nLa importancia de la perseverancia diaria\n\nLos grandes logros en el Reino de Dios no son fruto de un solo momento de fe, sino de la constancia de cada día. La perseverancia es la fe que se niega a rendirse ante la fatiga. Dios está puliendo tu carácter en la rutina diaria, preparándote para la gloria que ha de venir.\n\nNo te canses de hacer lo correcto, aunque parezca que nadie lo nota. La fidelidad en lo poco es lo que abre las puertas de lo mucho. Cada oración que elevas y cada acto de obediencia suman en tu cuenta celestial. Mantén tu mirada en la meta final; la recompensa por tu perseverancia será mucho más grande de lo que imaginas hoy.\n\nOración:\nSeñor, dame la fuerza para perseverar. No permitiré que el desánimo me detenga. Confío en que veré Tu bondad en la tierra de los vivientes. Amén.\n\nNo nos cansemos de hacer el bien. A su debido tiempo, cosecharemos numerosas bendiciones si no nos damos por vencidos.\nGálatas 6:9 (NTV)\n\nLee más en https://avanzapormas.com/frases",
      shareUrl: "https://avanzapormas.com/frases",
      oneSignalAppId: "7b2765b1-08fe-4d01-8ea4-779d7adc74ba"
    };
  </script>

  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script src="app.js"></script>
  <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi página protegida</title>

  <style>
    body {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      -webkit-touch-callout: none;
    }

    img {
      pointer-events: none;
      -webkit-user-drag: none;
      user-drag: none;
    }

    ::selection {
      background: transparent;
      color: inherit;
    }

    ::-moz-selection {
      background: transparent;
      color: inherit;
    }
  </style>
</head>
<body>

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

    // Bloquear selección
    document.addEventListener('selectstart', function(e) {
      e.preventDefault();
    });

    // Bloquear copiar, cortar y pegar
    document.addEventListener('copy', function(e) {
      e.preventDefault();
    });

    document.addEventListener('cut', function(e) {
      e.preventDefault();
    });

    document.addEventListener('paste', function(e) {
      e.preventDefault();
    });

    // Bloquear arrastrar
    document.addEventListener('dragstart', function(e) {
      e.preventDefault();
    });

    // Bloquear teclas comunes
    document.addEventListener('keydown', function(e) {
      // Ctrl+C, Ctrl+X, Ctrl+U, Ctrl+S, Ctrl+A
      if (e.ctrlKey && ['c', 'x', 'u', 's', 'a'].includes(e.key.toLowerCase())) {
        e.preventDefault();
      }

      // Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+C
      if (
        e.ctrlKey &&
        e.shiftKey &&
        ['i', 'j', 'c'].includes(e.key.toLowerCase())
      ) {
        e.preventDefault();
      }

      // F12
      if (e.key === 'F12') {
        e.preventDefault();
      }
    });
  </script>

</body>
</html>
</body>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9504864280967064"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-9504864280967064"
     data-ad-slot="5475619383"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</html>