<!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">13 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">La protección divina sobre tu reputación en línea</div>
        <p>En la actualidad, nuestra reputación no solo se construye cara a cara, sino también a través de nuestra huella digital. Dios está interesado en proteger tu buen nombre también en el entorno virtual, dándote la sabiduría para saber qué compartir y cómo responder ante los ataques o malentendidos en redes sociales.</p>
        <p>No caigas en la trampa de las discusiones estériles o de la exposición innecesaria que pueda ser malinterpretada. Confía en que el Señor es quien cuida de tu imagen cuando actúas con prudencia. Si has sido víctima de difamación digital, entrega esa carga al Padre; Él sacará a la luz la verdad y te vindicará ante quienes te observan. Tu identidad está segura en Sus manos.</p>
      </section>

      <section class="block prayer content-highlight">
        <h2>Oración</h2>
        <p>Señor, protege mi nombre y mi testimonio en el mundo digital. Dame sabiduría para comunicarme y gracia para reflejar Tu amor en todo lugar. Amén.</p>
      </section>

      <section class="block verse content-highlight">
        <h2>Versículo</h2>
        <p>Vale más la buena fama que las muchas riquezas, y más que la plata y el oro, la buena estimación.</p>
        <div class="verse-cite">Proverbios 22:1 (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 protección divina sobre tu reputación en línea\n\nEn la actualidad, nuestra reputación no solo se construye cara a cara, sino también a través de nuestra huella digital. Dios está interesado en proteger tu buen nombre también en el entorno virtual, dándote la sabiduría para saber qué compartir y cómo responder ante los ataques o malentendidos en redes sociales.\n\nNo caigas en la trampa de las discusiones estériles o de la exposición innecesaria que pueda ser malinterpretada. Confía en que el Señor es quien cuida de tu imagen cuando actúas con prudencia. Si has sido víctima de difamación digital, entrega esa carga al Padre; Él sacará a la luz la verdad y te vindicará ante quienes te observan. Tu identidad está segura en Sus manos.\n\nOración:\nSeñor, protege mi nombre y mi testimonio en el mundo digital. Dame sabiduría para comunicarme y gracia para reflejar Tu amor en todo lugar. Amén.\n\nVale más la buena fama que las muchas riquezas, y más que la plata y el oro, la buena estimación.\nProverbios 22:1 (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>