/* Helpify · capa móvil (solo reglas que no pueden ir inline: media queries) */
.hp-menu { display: none; }
.hp-dlbar { display: none; }
@media (max-width: 900px) {
  .hp-links { display: none !important; }
  .hp-logo { height: 44px !important; }
  .hp-menu { display: block; position: relative; }
  .hp-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 9999px; border: 2px solid #181A4A; font-size: 15px; font-weight: 600; color: #181A4A; user-select: none; }
  .hp-menu > summary::-webkit-details-marker { display: none; }
  .hp-menu[open] > summary { background: #181A4A; color: #EFEEEA; }
  .hp-menu > div { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; background: #FFFFFF; border-radius: 24px; padding: 10px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 32px rgba(2,6,12,0.18); z-index: 60; }
  .hp-menu > div a { display: block; padding: 12px 16px; border-radius: 14px; font-size: 16px; font-weight: 600; color: #181A4A; }
  .hp-menu > div a:active { background: #EFEEEA; }
  .hp-dlbar { display: flex; }
  body { background: #181A4A; padding-bottom: 84px; }
  .hp-wa { right: 16px !important; bottom: 92px !important; }
  .helpify-flota { display: none !important; }
}

/* Tarjetas tipo notificación de la app que flotan junto a las ilustraciones */
@keyframes helpifyTarjeta { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hp-tarjeta { animation: helpifyTarjeta 6s ease-in-out infinite; }
.hp-tarjeta:nth-of-type(2n) { animation-duration: 7s; animation-delay: -2.5s; }
@media (max-width: 640px) {
  .hp-tarjeta-extra { display: none !important; }
  .hp-tarjeta-arriba { top: 18px !important; bottom: auto !important; }
  .hp-tarjeta { max-width: 43% !important; padding: 8px 10px 8px 8px !important; gap: 8px !important; }
}
@media (prefers-reduced-motion: reduce) { .hp-tarjeta { animation: none; } }