<!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">15 De Junio 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">El poder de la generosidad desinteresada</div>
        <p>La verdadera generosidad nace de un corazón que reconoce que todo lo que tiene le pertenece a Dios. Dar a los demás, especialmente a quienes no pueden devolvernos el favor, es una de las expresiones más puras del amor cristiano. Dios ama al dador alegre.</p>
        <p>Cuando somos generosos, rompemos el poder del materialismo sobre nuestra vida. Dios promete que el alma generosa será prosperada y que el que sacia a otros, también será saciado. Tu siembra de hoy es la garantía de tu cosecha de mañana.</p>
      </section>

      <section class="block prayer content-highlight">
        <h2>Oración</h2>
        <p>Señor, enséñame a dar con un corazón generoso. Que mis manos siempre estén abiertas para ayudar al necesitado y para honrarte con mis recursos. Amén.</p>
      </section>

      <section class="block verse content-highlight">
        <h2>Versículo</h2>
        <p>El generoso prosperará, y el que reanima a otros será reanimado.</p>
        <div class="verse-cite">Proverbios 11:25 (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\nEl poder de la generosidad desinteresada\n\nLa verdadera generosidad nace de un corazón que reconoce que todo lo que tiene le pertenece a Dios. Dar a los demás, especialmente a quienes no pueden devolvernos el favor, es una de las expresiones más puras del amor cristiano. Dios ama al dador alegre.\n\nCuando somos generosos, rompemos el poder del materialismo sobre nuestra vida. Dios promete que el alma generosa será prosperada y que el que sacia a otros, también será saciado. Tu siembra de hoy es la garantía de tu cosecha de mañana.\n\nOración:\nSeñor, enséñame a dar con un corazón generoso. Que mis manos siempre estén abiertas para ayudar al necesitado y para honrarte con mis recursos. Amén.\n\nEl generoso prosperará, y el que reanima a otros será reanimado.\nProverbios 11:25 (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>