/* Flyer promocional (vistas/_flyer.php + assets/flyer.js).
 * Lo usan el panel (_layout.php) y el perfil público de Zivi (perfil_publico.php). */
.flyer-fondo{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,18,30,.72);animation:flyer-entra .25s ease-out}
.flyer-fondo[hidden]{display:none}
.flyer-caja{position:relative;max-width:min(520px,100%);max-height:100%;padding-top:52px;outline:none}
.flyer-caja a{display:block;line-height:0}
.flyer-caja img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
/* La X va ENCIMA de la imagen, no sobre ella: en el teléfono tapaba el logo. */
.flyer-cerrar{position:absolute;top:0;right:0;width:40px;height:40px;border-radius:50%;border:0;
  background:#fff;color:#1a1d29;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;padding:0}
.flyer-cerrar:focus-visible{outline:3px solid #2f6bff;outline-offset:2px}
body.flyer-abierto{overflow:hidden}
@keyframes flyer-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.flyer-fondo{animation:none}}