/* WhatsApp · botón flotante + popover con QR.
   Compartido por las 4 páginas (landing, gracias, bloqueo, acceso). */
/* ============================================================
   WhatsApp: botón flotante + popover con QR al pasar el ratón
   (mismo componente que el resto de fundesmo.com)
   ============================================================ */
.floating-wa { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); z-index: 60; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), opacity 600ms var(--ease-out); opacity: 0; transform: translateY(20px); pointer-events: none; }
.floating-wa.is-ready { opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-wa:hover { transform: translateY(0) scale(1.1); box-shadow: 0 6px 24px rgba(37, 211, 102, .45); }
.floating-wa svg { width: 28px; height: 28px; }
@media (max-width: 768px) {
  .floating-wa { right: 16px; bottom: 16px; }
  /* Ya NO se fuerza visible en movil: esta regla pisaba la logica y el
     boton salia desde el primer momento, compitiendo con el formulario.
     Ahora manda .is-ready, igual que en escritorio. */
}
/* ============================================================
   WhatsApp QR popover (hover on any WA link/icon)
   ============================================================ */
.wa-qr-popover { position: fixed; pointer-events: none; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 9998; background: #fff; border-radius: var(--radius-lg); border-top: 3px solid #25D366; box-shadow: 0 12px 36px rgba(7, 34, 58, 0.22), 0 2px 8px rgba(0,0,0,0.06); padding: 18px 18px 16px; width: 224px; }
.wa-qr-popover.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wa-qr-popover::before { content: ""; position: absolute; right: 22px; bottom: -8px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); box-shadow: 4px 4px 8px rgba(7, 34, 58, 0.08); }
.wa-qr-popover.is-top::before { bottom: auto; top: -8px; box-shadow: -4px -4px 8px rgba(7, 34, 58, 0.08); }
.wa-qr__header { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.wa-qr__header svg { width: 18px; height: 18px; color: #25D366; flex: 0 0 auto; }
.wa-qr__header strong { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #075E54; }
.wa-qr__code { position: relative; width: 188px; height: 188px; margin: 0 auto 12px; background: #fff; border: 2px solid #25D366; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.wa-qr__code:hover { transform: scale(1.04); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35); }
.wa-qr__code img { width: 100%; height: 100%; display: block; border-radius: 4px; }
.wa-qr__code::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 8px; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(0,0,0,0.15); }
.wa-qr__code::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.wa-qr__scan { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13.5px; color: #075E54; text-align: center; margin: 0 0 3px; line-height: 1.35; }
.wa-qr__hint { font-family: var(--font-body); font-size: 11.5px; color: #25D366; font-weight: 600; text-align: center; margin: 0; line-height: 1.4; }
@media (max-width: 768px) { .wa-qr-popover { display: none; } }
/* ============================================================
   Floating WhatsApp — green + halo pulse (iteración 2)
   ============================================================ */
.floating-wa { background: #25D366; }
.floating-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; pointer-events: none; animation: waHalo 5s var(--ease-out) infinite; }
@keyframes waHalo {
  0%, 70% { transform: scale(1); opacity: 0; }
  75% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
.floating-wa:hover { background: #25D366; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); }


/* ---------- Ajustes para la landing de la presentacion ----------
   1. Discreto: 52 px y sin sombra dura. No debe competir con el formulario.
   2. En movil se levanta por encima de la barra fija inferior, que ocupa
      80 px; si no, se solapan.
   3. Respeta el area segura del iPhone. */
.floating-wa{width:52px;height:52px;right:16px;bottom:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.floating-wa svg{width:26px;height:26px}
@media(max-width:768px){
  .floating-wa{bottom:calc(96px + env(safe-area-inset-bottom));right:14px;
    width:48px;height:48px}
  .floating-wa svg{width:24px;height:24px}
}
/* Si alguien pide no animar, aparece sin desplazamiento */
@media(prefers-reduced-motion:reduce){.floating-wa{transition:opacity 200ms}}