/* MIG-0199 · Botón flotante de WhatsApp. Se superpone sin tocar nada más. */
.pf-wa{
  position:fixed; z-index:900;
  right:max(18px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; gap:10px;
  font-family:'Figtree','Nunito',system-ui,sans-serif;
}

/* ── Avatar (el PNG oficial, completo y sin deformar) ───────────────── */
.pf-wa-avatar{
  position:relative; z-index:1; /* siempre por encima de la sombra de la tarjeta */
  flex:0 0 auto; display:block; width:88px; padding:0; border:0; background:none; cursor:pointer;
  line-height:0; border-radius:50%; -webkit-tap-highlight-color:transparent;
  animation:pf-wa-flotar 5.5s ease-in-out 2s infinite;
  transition:transform .25s ease;
}
.pf-wa-avatar img{ width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(10,31,102,.22)); }
.pf-wa-avatar:hover{ transform:translateY(-3px) scale(1.04); }
.pf-wa-avatar:focus-visible{ outline:3px solid #0A1F66; outline-offset:4px; }

/* Movimiento suave con pausa: solo se mueve en la mitad del ciclo. */
@keyframes pf-wa-flotar{
  0%, 45%, 100%{ transform:translateY(0) scale(1); }
  55%{ transform:translateY(-5px) scale(1.015); }
  70%{ transform:translateY(-1px) scale(1); }
  80%{ transform:translateY(-3px) scale(1.01); }
  90%{ transform:translateY(0) scale(1); }
}

/* ── Tarjeta ────────────────────────────────────────────────────────── */
.pf-wa-tarjeta{
  position:relative; width:min(320px, calc(100vw - 32px)); padding:18px 20px 18px;
  background:#fff; border-radius:22px; box-shadow:0 18px 44px -18px rgba(10,31,102,.38), 0 2px 8px rgba(10,31,102,.06);
  animation:pf-wa-entrar .22s ease-out both;
}
.pf-wa-tarjeta[hidden]{ display:none; }
@keyframes pf-wa-entrar{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }

.pf-wa-cerrar{
  position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; border:0; border-radius:50%; background:#F4F6FB; color:#6B76A0; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.pf-wa-cerrar:hover{ background:#E8ECF7; color:#0A1F66; }
.pf-wa-cerrar:focus-visible{ outline:3px solid #0A1F66; outline-offset:2px; }

.pf-wa-hola{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 10px; padding:5px 12px;
  border-radius:99px; background:#F1F5FE; font-size:13px; font-weight:800; color:#0A1F66; line-height:1.2;
}
.pf-wa-punto{ width:8px; height:8px; border-radius:50%; background:#25D366; box-shadow:0 0 0 3px rgba(37,211,102,.18); }
.pf-wa-titulo{ margin:0; font-size:20px; font-weight:900; line-height:1.25; color:#0A1F66; letter-spacing:-.01em; }
.pf-wa-sub{ margin:4px 0 0; font-size:14.5px; font-weight:600; line-height:1.4; color:#5C79B5; }

.pf-wa-cta{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px; min-height:46px; padding:0 16px;
  border-radius:99px; background:linear-gradient(180deg,#2BDE72 0%,#22C35E 100%); color:#fff;
  font-size:15px; font-weight:800; text-decoration:none; box-shadow:0 12px 22px -14px rgba(34,195,94,.95);
  transition:filter .15s ease, transform .15s ease;
}
.pf-wa-cta:hover, .pf-wa-cta:focus{ color:#fff; filter:brightness(1.05); transform:translateY(-1px); }
.pf-wa-cta:focus-visible{ outline:3px solid #0A1F66; outline-offset:3px; }
.pf-wa-icono{ flex:0 0 auto; }
.pf-wa-flecha{ font-weight:900; }

/* ── Tamaños ────────────────────────────────────────────────────────── */
@media (min-width:768px){
  .pf-wa{ right:max(22px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); gap:12px; }
  .pf-wa-avatar{ width:118px; }
}
@media (min-width:1100px){
  .pf-wa{ right:max(26px, env(safe-area-inset-right)); bottom:max(24px, env(safe-area-inset-bottom)); }
  .pf-wa-avatar{ width:142px; }
}

/* En móvil la tarjeta se apoya sobre el avatar para caber siempre en pantalla.
   Y el conjunto sube por encima de la barra inferior de navegación (58px),
   para no tapar «Inicio / Buscar / Mi cuenta». */
@media (max-width:767.98px){
  .pf-wa{ flex-direction:column; align-items:flex-end; gap:8px;
          bottom:calc(58px + env(safe-area-inset-bottom, 0px) + 12px); }
  .pf-wa-tarjeta{ padding:16px 18px; }
  .pf-wa-titulo{ font-size:18.5px; }
}

@media (prefers-reduced-motion:reduce){
  .pf-wa-avatar{ animation:none; transition:none; }
  .pf-wa-avatar:hover{ transform:none; }
  .pf-wa-tarjeta{ animation:none; }
  .pf-wa-cta{ transition:none; }
}