{"id":182,"date":"2026-05-29T00:19:17","date_gmt":"2026-05-29T00:19:17","guid":{"rendered":"https:\/\/egrabservices.com\/new\/?page_id=182"},"modified":"2026-05-29T00:45:37","modified_gmt":"2026-05-29T00:45:37","slug":"blog","status":"publish","type":"page","link":"https:\/\/egrabservices.com\/new\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"182\" class=\"elementor elementor-182\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6fa937 e-con-full e-flex e-con e-parent\" data-id=\"e6fa937\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ce6a9b elementor-widget elementor-widget-html\" data-id=\"6ce6a9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  EGRAB H.R. Partners \u2014 BLOG ARCHIVE \u00b7 v1\r\n  ===================================================\r\n  Pegar dentro de un widget HTML \u00fanico en la p\u00e1gina \/new\/blog\/\r\n  (o donde quieras que viva el archive). Self-contained.\r\n\r\n  Estructura:\r\n    1. Hero (abstracto unificado)\r\n    2. Filters bar (search + categor\u00edas)\r\n    3. Posts grid (fetch a \/wp-json\/wp\/v2\/posts?_embed)\r\n    4. Load more (paginaci\u00f3n por X-WP-TotalPages)\r\n    5. Estados: skeleton \/ empty \/ no-match \/ error\r\n-->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600&display=swap');\r\n\r\n.eg-blog {\r\n  --primary: #39C5F3;\r\n  --secondary: #1C6DB2;\r\n  --dark: #2B2D42;\r\n  --text: #6E6E6E;\r\n  --accent: #2D2D2D;\r\n  --bg-light: #F9F9F9;\r\n  --max-w: 1240px;\r\n  --radius: 16px;\r\n  font-family: 'Work Sans', sans-serif;\r\n  color: var(--text);\r\n  line-height: 1.6;\r\n}\r\n.eg-blog *, .eg-blog *::before, .eg-blog *::after { box-sizing: border-box; }\r\n.eg-blog img { max-width: 100%; height: auto; display: block; }\r\n.eg-blog a { color: inherit; text-decoration: none; }\r\n\r\n\/* ============ REVEAL ============ *\/\r\n.eg-blog .eg-reveal {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: opacity .7s ease, transform .7s ease;\r\n}\r\n.eg-blog .eg-reveal.is-in { opacity: 1; transform: translateY(0); }\r\n\r\n\/* ============ BUTTONS ============ *\/\r\n.eg-blog .eg-blog__btn {\r\n  display: inline-flex !important;\r\n  align-items: center !important;\r\n  gap: 10px !important;\r\n  padding: 14px 28px !important;\r\n  background: var(--primary) !important;\r\n  background-color: var(--primary) !important;\r\n  color: #fff !important;\r\n  font-family: 'Raleway', sans-serif !important;\r\n  font-size: 14px !important;\r\n  font-weight: 700 !important;\r\n  letter-spacing: 1.5px !important;\r\n  text-transform: uppercase !important;\r\n  border-radius: 999px !important;\r\n  border: none !important;\r\n  cursor: pointer !important;\r\n  transition: filter .25s ease, transform .25s ease !important;\r\n  text-decoration: none !important;\r\n}\r\n.eg-blog .eg-blog__btn:hover {\r\n  filter: brightness(1.08) !important;\r\n  transform: translateY(-2px) !important;\r\n  color: #fff !important;\r\n}\r\n.eg-blog .eg-blog__btn svg { width: 16px !important; height: 16px !important; color: #fff !important; }\r\n.eg-blog .eg-blog__btn--ghost {\r\n  background: transparent !important;\r\n  background-color: transparent !important;\r\n  color: var(--secondary) !important;\r\n  border: 2px solid var(--secondary) !important;\r\n}\r\n.eg-blog .eg-blog__btn--ghost:hover {\r\n  background: var(--secondary) !important;\r\n  background-color: var(--secondary) !important;\r\n  color: #fff !important;\r\n}\r\n.eg-blog .eg-blog__btn--ghost svg { color: currentColor !important; }\r\n\r\n\/* ============ LOADING \/ ERROR ============ *\/\r\n.eg-blog__loading {\r\n  text-align: center;\r\n  padding: 80px 28px;\r\n}\r\n.eg-blog__loading-spinner {\r\n  width: 48px;\r\n  height: 48px;\r\n  margin: 0 auto 22px;\r\n  border-radius: 50%;\r\n  border: 3px solid rgba(57,197,243,.2);\r\n  border-top-color: var(--primary);\r\n  animation: eg-spin .9s linear infinite;\r\n}\r\n@keyframes eg-spin { to { transform: rotate(360deg); } }\r\n.eg-blog__loading p { font-size: 15px; color: var(--text); }\r\n.eg-blog__hidden { display: none !important; }\r\n\r\n\/* ============ 1. HERO ============ *\/\r\n.eg-blog__hero {\r\n  position: relative;\r\n  min-height: clamp(420px, 58vh, 540px);\r\n  background:\r\n    radial-gradient(ellipse 60% 55% at 78% 18%, rgba(57,197,243,.22), transparent 60%),\r\n    radial-gradient(ellipse 55% 60% at 18% 88%, rgba(28,109,178,.35), transparent 65%),\r\n    linear-gradient(135deg, #2B2D42 0%, #1a1c2e 55%, #2B2D42 100%);\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden;\r\n}\r\n.eg-blog__hero::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 580px;\r\n  height: 580px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(57,197,243,.55), transparent 70%);\r\n  filter: blur(60px);\r\n  top: -190px;\r\n  right: -130px;\r\n  pointer-events: none;\r\n  animation: egHeroOrb1 18s ease-in-out infinite;\r\n  z-index: 0;\r\n}\r\n.eg-blog__hero::after {\r\n  content: '';\r\n  position: absolute;\r\n  width: 480px;\r\n  height: 480px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(28,109,178,.5), transparent 70%);\r\n  filter: blur(50px);\r\n  bottom: -160px;\r\n  left: -110px;\r\n  pointer-events: none;\r\n  animation: egHeroOrb2 22s ease-in-out infinite;\r\n  z-index: 0;\r\n}\r\n@keyframes egHeroOrb1 {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  50% { transform: translate(-30px, 40px) scale(1.06); }\r\n}\r\n@keyframes egHeroOrb2 {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  50% { transform: translate(35px, -30px) scale(1.08); }\r\n}\r\n.eg-blog__hero-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n  width: 100%;\r\n  max-width: var(--max-w);\r\n  margin: 0 auto;\r\n  padding: 110px 28px 90px;\r\n  text-align: center;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n.eg-blog__breadcrumb {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 7px 16px;\r\n  background: rgba(255,255,255,.1);\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 999px;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 12.5px;\r\n  font-weight: 600;\r\n  color: #fff;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  backdrop-filter: blur(8px);\r\n  margin-bottom: 22px;\r\n}\r\n.eg-blog__breadcrumb a { color: rgba(255,255,255,.7); transition: color .2s ease; }\r\n.eg-blog__breadcrumb a:hover { color: var(--primary); }\r\n.eg-blog__breadcrumb svg { width: 11px; height: 11px; opacity: .5; }\r\n.eg-blog__hero-kicker {\r\n  display: block;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--primary);\r\n  text-transform: uppercase;\r\n  letter-spacing: 2.5px;\r\n  margin-bottom: 14px;\r\n}\r\n.eg-blog .eg-blog__hero h1 {\r\n  font-family: 'Raleway', sans-serif !important;\r\n  color: #fff !important;\r\n  font-size: clamp(36px, 5.5vw, 64px) !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.1 !important;\r\n  letter-spacing: -.5px !important;\r\n  text-transform: capitalize !important;\r\n  margin: 0 auto 22px !important;\r\n  max-width: 760px;\r\n  text-align: center !important;\r\n}\r\n.eg-blog__hero h1 strong {\r\n  background: linear-gradient(135deg, var(--primary), #88dcf7);\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n  color: transparent;\r\n  font-weight: 800;\r\n}\r\n.eg-blog__hero-sub {\r\n  color: rgba(255,255,255,.88);\r\n  font-size: clamp(16px, 1.5vw, 19px);\r\n  line-height: 1.65;\r\n  max-width: 640px;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n\/* ============ 2. LISTING (sidebar + main) ============ *\/\r\n.eg-blog__listing {\r\n  padding: clamp(60px, 8vw, 100px) 0;\r\n  background: var(--bg-light);\r\n}\r\n.eg-blog__listing-inner {\r\n  max-width: var(--max-w);\r\n  margin: 0 auto;\r\n  padding: 0 28px;\r\n  display: grid;\r\n  grid-template-columns: 260px 1fr;\r\n  gap: 56px;\r\n  align-items: flex-start;\r\n}\r\n\r\n\/* Sidebar *\/\r\n.eg-blog__sidebar { position: sticky; top: 100px; }\r\n.eg-blog__sidebar-title {\r\n  font-family: 'Raleway', sans-serif !important;\r\n  font-size: 13px !important;\r\n  font-weight: 700 !important;\r\n  text-transform: uppercase !important;\r\n  letter-spacing: 2px !important;\r\n  color: var(--primary) !important;\r\n  margin: 0 0 16px !important;\r\n  padding-bottom: 14px;\r\n  border-bottom: 2px solid rgba(57,197,243,.2);\r\n}\r\n.eg-blog__date-list {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.eg-blog__date-item { margin-bottom: 2px; }\r\n.eg-blog__date-link {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  padding: 10px 14px;\r\n  font-family: 'Work Sans', sans-serif;\r\n  font-size: 14.5px;\r\n  font-weight: 500;\r\n  color: var(--accent);\r\n  background: transparent;\r\n  border: none;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  transition: background .18s ease, color .18s ease, padding .18s ease;\r\n  text-align: left;\r\n}\r\n.eg-blog__date-link:hover {\r\n  background: rgba(57,197,243,.08);\r\n  color: var(--secondary);\r\n  padding-left: 18px;\r\n}\r\n.eg-blog__date-link.is-active {\r\n  background: var(--secondary);\r\n  color: #fff;\r\n  font-weight: 600;\r\n}\r\n.eg-blog__date-link.is-active:hover {\r\n  background: var(--secondary);\r\n  color: #fff;\r\n  padding-left: 14px;\r\n}\r\n.eg-blog__date-count {\r\n  font-size: 12.5px;\r\n  opacity: .55;\r\n  font-weight: 600;\r\n  font-family: 'Raleway', sans-serif;\r\n}\r\n.eg-blog__date-link.is-active .eg-blog__date-count { opacity: .85; }\r\n.eg-blog__date-divider {\r\n  height: 1px;\r\n  background: rgba(43,45,66,.08);\r\n  margin: 8px 0;\r\n}\r\n\r\n\/* Main column *\/\r\n.eg-blog__main { min-width: 0; }\r\n.eg-blog__counter {\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: var(--text);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  margin-bottom: 28px;\r\n}\r\n.eg-blog__counter strong { color: var(--secondary); }\r\n.eg-blog__grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 28px;\r\n}\r\n\r\n\/* ============ CARD ============ *\/\r\n.eg-blog__card {\r\n  background: #fff;\r\n  border-radius: var(--radius);\r\n  overflow: hidden;\r\n  box-shadow: 0 12px 32px rgba(43,45,66,.06);\r\n  transition: transform .3s ease, box-shadow .3s ease;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.eg-blog__card:hover {\r\n  transform: translateY(-6px);\r\n  box-shadow: 0 24px 48px rgba(43,45,66,.12);\r\n}\r\n.eg-blog__card-img {\r\n  position: relative;\r\n  aspect-ratio: 16 \/ 10;\r\n  overflow: hidden;\r\n  background: linear-gradient(135deg, rgba(28,109,178,.18), rgba(57,197,243,.18));\r\n}\r\n.eg-blog__card-img img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: transform .5s ease;\r\n}\r\n.eg-blog__card:hover .eg-blog__card-img img { transform: scale(1.06); }\r\n.eg-blog__card-img--empty {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: rgba(28,109,178,.5);\r\n}\r\n.eg-blog__card-img--empty svg { width: 56px; height: 56px; }\r\n.eg-blog__card-badge {\r\n  position: absolute;\r\n  top: 14px;\r\n  left: 14px;\r\n  padding: 5px 12px;\r\n  background: rgba(255,255,255,.92);\r\n  backdrop-filter: blur(8px);\r\n  border-radius: 999px;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.2px;\r\n  color: var(--secondary);\r\n}\r\n.eg-blog__card-body {\r\n  padding: 24px 26px 28px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n}\r\n.eg-blog__card-meta {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  font-size: 12.5px;\r\n  color: var(--text);\r\n  margin-bottom: 14px;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-weight: 500;\r\n  letter-spacing: .3px;\r\n}\r\n.eg-blog__card-meta-dot {\r\n  width: 3px;\r\n  height: 3px;\r\n  border-radius: 50%;\r\n  background: rgba(110,110,110,.45);\r\n}\r\n.eg-blog .eg-blog__card h3 {\r\n  font-family: 'Raleway', sans-serif !important;\r\n  font-size: 19px !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.35 !important;\r\n  color: var(--accent) !important;\r\n  margin: 0 0 12px !important;\r\n  letter-spacing: -.2px !important;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n.eg-blog .eg-blog__card h3 a { color: inherit; transition: color .2s ease; }\r\n.eg-blog .eg-blog__card h3 a:hover { color: var(--secondary) !important; }\r\n.eg-blog__card-excerpt {\r\n  font-size: 14.5px;\r\n  color: var(--text);\r\n  line-height: 1.6;\r\n  margin-bottom: 18px;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  flex: 1;\r\n}\r\n.eg-blog__card-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: var(--secondary);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  transition: gap .2s ease;\r\n  align-self: flex-start;\r\n}\r\n.eg-blog__card-link:hover { gap: 12px; color: var(--secondary); }\r\n.eg-blog__card-link svg { width: 14px; height: 14px; transition: transform .2s ease; }\r\n\r\n\/* ============ SKELETON ============ *\/\r\n.eg-blog__skel-card {\r\n  background: #fff;\r\n  border-radius: var(--radius);\r\n  overflow: hidden;\r\n  box-shadow: 0 12px 32px rgba(43,45,66,.06);\r\n}\r\n.eg-blog__skel-img {\r\n  aspect-ratio: 16 \/ 10;\r\n  background: linear-gradient(90deg, #eef0f3 0%, #f5f6f8 50%, #eef0f3 100%);\r\n  background-size: 200% 100%;\r\n  animation: eg-shimmer 1.4s linear infinite;\r\n}\r\n.eg-blog__skel-body { padding: 22px 24px 28px; }\r\n.eg-blog__skel-line {\r\n  height: 14px;\r\n  border-radius: 4px;\r\n  background: linear-gradient(90deg, #eef0f3 0%, #f5f6f8 50%, #eef0f3 100%);\r\n  background-size: 200% 100%;\r\n  animation: eg-shimmer 1.4s linear infinite;\r\n  margin-bottom: 10px;\r\n}\r\n.eg-blog__skel-line:nth-child(1) { width: 35%; height: 11px; }\r\n.eg-blog__skel-line:nth-child(2) { width: 92%; height: 18px; margin-top: 14px; }\r\n.eg-blog__skel-line:nth-child(3) { width: 78%; height: 18px; }\r\n.eg-blog__skel-line:nth-child(4) { width: 88%; margin-top: 14px; }\r\n.eg-blog__skel-line:nth-child(5) { width: 65%; }\r\n@keyframes eg-shimmer {\r\n  0% { background-position: 200% 0; }\r\n  100% { background-position: -200% 0; }\r\n}\r\n\r\n\/* ============ STATES ============ *\/\r\n.eg-blog__state {\r\n  grid-column: 1 \/ -1;\r\n  text-align: center;\r\n  padding: 80px 28px;\r\n  background: #fff;\r\n  border-radius: var(--radius);\r\n  box-shadow: 0 12px 32px rgba(43,45,66,.06);\r\n}\r\n.eg-blog__state-icon {\r\n  width: 72px;\r\n  height: 72px;\r\n  margin: 0 auto 22px;\r\n  border-radius: 50%;\r\n  background: rgba(57,197,243,.12);\r\n  color: var(--secondary);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.eg-blog__state-icon svg { width: 34px; height: 34px; }\r\n.eg-blog__state h3 {\r\n  font-family: 'Raleway', sans-serif !important;\r\n  font-size: 22px !important;\r\n  font-weight: 700 !important;\r\n  color: var(--accent) !important;\r\n  margin: 0 0 10px !important;\r\n}\r\n.eg-blog__state p {\r\n  font-size: 15px;\r\n  color: var(--text);\r\n  max-width: 460px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ============ RESPONSIVE ============ *\/\r\n@media (max-width: 1000px) {\r\n  .eg-blog__listing-inner {\r\n    grid-template-columns: 1fr;\r\n    gap: 36px;\r\n  }\r\n  .eg-blog__sidebar { position: static; }\r\n  .eg-blog__sidebar-title { margin-bottom: 14px !important; padding-bottom: 10px; }\r\n  .eg-blog__date-list {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n  .eg-blog__date-item { margin: 0; }\r\n  .eg-blog__date-link {\r\n    padding: 8px 16px !important;\r\n    background: #fff;\r\n    border: 1px solid rgba(43,45,66,.1);\r\n    border-radius: 999px;\r\n    width: auto;\r\n    font-size: 13.5px;\r\n    gap: 8px;\r\n  }\r\n  .eg-blog__date-link:hover { padding-left: 16px !important; border-color: var(--primary); }\r\n  .eg-blog__date-link.is-active { border-color: var(--secondary); padding-left: 16px !important; }\r\n  .eg-blog__date-divider { display: none; }\r\n}\r\n@media (max-width: 720px) {\r\n  .eg-blog__hero-inner { padding: 90px 18px 64px; }\r\n  .eg-blog__listing-inner { padding: 0 18px; }\r\n  .eg-blog__grid { grid-template-columns: 1fr; gap: 22px; }\r\n  .eg-blog__card-body { padding: 22px 22px 24px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"eg-blog\">\r\n\r\n  <!-- ============== 1. HERO ============== -->\r\n  <section class=\"eg-blog__hero\" aria-labelledby=\"blog-title\">\r\n    <div class=\"eg-blog__hero-inner\">\r\n      <nav class=\"eg-blog__breadcrumb eg-reveal\" aria-label=\"Breadcrumb\">\r\n        <a href=\"\/new\/\">Home<\/a>\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n        <span>Blog<\/span>\r\n      <\/nav>\r\n      <span class=\"eg-blog__hero-kicker eg-reveal\">Insights &amp; Resources<\/span>\r\n      <h1 id=\"blog-title\" class=\"eg-reveal\">Latest <strong>HR Knowledge<\/strong><\/h1>\r\n      <p class=\"eg-blog__hero-sub eg-reveal\">Practical guides, compliance updates and leadership ideas to help your business grow with confidence.<\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============== 2. LISTING (sidebar + main) ============== -->\r\n  <section class=\"eg-blog__listing\">\r\n    <div class=\"eg-blog__listing-inner\">\r\n\r\n      <!-- SIDEBAR -->\r\n      <aside class=\"eg-blog__sidebar eg-reveal\" aria-label=\"Browse by date\">\r\n        <h3 class=\"eg-blog__sidebar-title\">Browse by Date<\/h3>\r\n        <ul class=\"eg-blog__date-list\" data-egrab-dates>\r\n          <li class=\"eg-blog__date-item\">\r\n            <button type=\"button\" class=\"eg-blog__date-link is-active\" data-month=\"all\">\r\n              <span>All Articles<\/span>\r\n              <span class=\"eg-blog__date-count\" data-egrab-all-count>\u2014<\/span>\r\n            <\/button>\r\n          <\/li>\r\n          <!-- meses se generan via JS -->\r\n        <\/ul>\r\n      <\/aside>\r\n\r\n      <!-- MAIN -->\r\n      <div class=\"eg-blog__main\">\r\n\r\n        <div class=\"eg-blog__counter\" data-egrab-counter aria-live=\"polite\">Loading articles...<\/div>\r\n\r\n        <!-- SKELETON (visible mientras carga) -->\r\n        <div class=\"eg-blog__grid\" data-egrab-skeleton aria-hidden=\"true\">\r\n          <div class=\"eg-blog__skel-card\"><div class=\"eg-blog__skel-img\"><\/div><div class=\"eg-blog__skel-body\"><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><\/div><\/div>\r\n          <div class=\"eg-blog__skel-card\"><div class=\"eg-blog__skel-img\"><\/div><div class=\"eg-blog__skel-body\"><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><\/div><\/div>\r\n          <div class=\"eg-blog__skel-card\"><div class=\"eg-blog__skel-img\"><\/div><div class=\"eg-blog__skel-body\"><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><\/div><\/div>\r\n          <div class=\"eg-blog__skel-card\"><div class=\"eg-blog__skel-img\"><\/div><div class=\"eg-blog__skel-body\"><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><div class=\"eg-blog__skel-line\"><\/div><\/div><\/div>\r\n        <\/div>\r\n\r\n        <!-- GRID REAL -->\r\n        <div class=\"eg-blog__grid eg-blog__hidden\" data-egrab-grid><\/div>\r\n\r\n        <!-- EMPTY (no hay posts publicados) -->\r\n        <div class=\"eg-blog__state eg-blog__hidden\" data-egrab-empty>\r\n          <div class=\"eg-blog__state-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16v16H4z\"\/><path d=\"M8 9h8\"\/><path d=\"M8 13h8\"\/><path d=\"M8 17h5\"\/><\/svg>\r\n          <\/div>\r\n          <h3>No articles yet<\/h3>\r\n          <p>We're working on new content. Check back soon for HR insights, compliance updates and leadership ideas.<\/p>\r\n        <\/div>\r\n\r\n        <!-- ERROR -->\r\n        <div class=\"eg-blog__state eg-blog__hidden\" data-egrab-error>\r\n          <div class=\"eg-blog__state-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\r\n          <\/div>\r\n          <h3>Couldn't load articles<\/h3>\r\n          <p>We had trouble loading the blog. Please refresh the page or try again later.<\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  \/\/ ====== CONFIG ======\r\n  function getRestBase() {\r\n    var link = document.querySelector('link[rel=\"https:\/\/api.w.org\/\"]');\r\n    if (link && link.href) return link.href.replace(\/\\\/+$\/, '') + '\/wp\/v2';\r\n    return '\/wp-json\/wp\/v2';\r\n  }\r\n  var REST_BASE = getRestBase();\r\n\r\n  \/\/ ====== STATE ======\r\n  var allPosts = [];\r\n  var state = { month: 'all' };\r\n\r\n  \/\/ ====== DOM REFS ======\r\n  var skeletonEl = document.querySelector('[data-egrab-skeleton]');\r\n  var gridEl = document.querySelector('[data-egrab-grid]');\r\n  var counterEl = document.querySelector('[data-egrab-counter]');\r\n  var datesEl = document.querySelector('[data-egrab-dates]');\r\n  var allCountEl = document.querySelector('[data-egrab-all-count]');\r\n  var emptyEl = document.querySelector('[data-egrab-empty]');\r\n  var errorEl = document.querySelector('[data-egrab-error]');\r\n\r\n  \/\/ ====== HELPERS ======\r\n  function escapeHtml(s) {\r\n    if (s == null) return '';\r\n    return String(s).replace(\/[&<>\"']\/g, function (c) {\r\n      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[c];\r\n    });\r\n  }\r\n  function stripHtml(s) {\r\n    var d = document.createElement('div');\r\n    d.innerHTML = s || '';\r\n    return (d.textContent || d.innerText || '').trim();\r\n  }\r\n  function formatDate(dateStr) {\r\n    try {\r\n      var d = new Date(dateStr);\r\n      return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });\r\n    } catch (e) { return ''; }\r\n  }\r\n  function readTime(html) {\r\n    var text = stripHtml(html);\r\n    var words = text.split(\/\\s+\/).filter(Boolean).length;\r\n    var min = Math.max(1, Math.round(words \/ 200));\r\n    return min + ' min read';\r\n  }\r\n  function monthKey(dateStr) {\r\n    var d = new Date(dateStr);\r\n    return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0');\r\n  }\r\n  function monthLabel(dateStr) {\r\n    var d = new Date(dateStr);\r\n    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long' });\r\n  }\r\n  function hide(el) { if (el) el.classList.add('eg-blog__hidden'); }\r\n  function show(el) { if (el) el.classList.remove('eg-blog__hidden'); }\r\n\r\n  \/\/ ====== GROUP BY MONTH ======\r\n  function buildMonths(posts) {\r\n    var groups = {};\r\n    posts.forEach(function (p) {\r\n      var k = monthKey(p.date);\r\n      if (!groups[k]) groups[k] = { key: k, label: monthLabel(p.date), count: 0 };\r\n      groups[k].count += 1;\r\n    });\r\n    return Object.keys(groups)\r\n      .sort(function (a, b) { return b.localeCompare(a); })\r\n      .map(function (k) { return groups[k]; });\r\n  }\r\n\r\n  \/\/ ====== RENDER SIDEBAR ======\r\n  function renderDates() {\r\n    var months = buildMonths(allPosts);\r\n    if (allCountEl) allCountEl.textContent = '(' + allPosts.length + ')';\r\n    var html = '';\r\n    if (months.length) html += '<li class=\"eg-blog__date-divider\" aria-hidden=\"true\"><\/li>';\r\n    months.forEach(function (m) {\r\n      html += '<li class=\"eg-blog__date-item\">'\r\n        + '<button type=\"button\" class=\"eg-blog__date-link\" data-month=\"' + escapeHtml(m.key) + '\">'\r\n        + '<span>' + escapeHtml(m.label) + '<\/span>'\r\n        + '<span class=\"eg-blog__date-count\">(' + m.count + ')<\/span>'\r\n        + '<\/button>'\r\n        + '<\/li>';\r\n    });\r\n    \/\/ Insertar despues del \"All Articles\" sin pisarlo\r\n    datesEl.querySelectorAll('.eg-blog__date-item:not(:first-child), .eg-blog__date-divider').forEach(function (n) { n.remove(); });\r\n    datesEl.insertAdjacentHTML('beforeend', html);\r\n\r\n    datesEl.querySelectorAll('.eg-blog__date-link').forEach(function (btn) {\r\n      btn.addEventListener('click', function () {\r\n        datesEl.querySelectorAll('.eg-blog__date-link').forEach(function (b) { b.classList.remove('is-active'); });\r\n        btn.classList.add('is-active');\r\n        state.month = btn.getAttribute('data-month');\r\n        updateView();\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ ====== RENDER GRID ======\r\n  function renderPosts(posts) {\r\n    gridEl.innerHTML = '';\r\n    posts.forEach(function (p) { gridEl.insertAdjacentHTML('beforeend', cardHtml(p)); });\r\n    gridEl.querySelectorAll('.eg-blog__card.eg-reveal:not(.is-in)').forEach(function (el, i) {\r\n      el.style.transitionDelay = (Math.min(i, 4) * 60) + 'ms';\r\n      requestAnimationFrame(function () { el.classList.add('is-in'); });\r\n    });\r\n  }\r\n\r\n  function cardHtml(post) {\r\n    var title = (post.title && post.title.rendered) || 'Untitled';\r\n    var excerpt = stripHtml((post.excerpt && post.excerpt.rendered) || '');\r\n    if (excerpt.length > 160) excerpt = excerpt.slice(0, 157).replace(\/\\s+\\S*$\/, '') + '...';\r\n    var date = formatDate(post.date);\r\n    var rt = readTime((post.content && post.content.rendered) || '');\r\n    var link = post.link || '#';\r\n\r\n    var imgUrl = '';\r\n    var imgAlt = '';\r\n    if (post._embedded && post._embedded['wp:featuredmedia']) {\r\n      var m = post._embedded['wp:featuredmedia'][0];\r\n      if (m && !m.code) {\r\n        if (m.media_details && m.media_details.sizes) {\r\n          var sizes = m.media_details.sizes;\r\n          var pick = sizes.medium_large || sizes.large || sizes.medium || sizes.full;\r\n          if (pick && pick.source_url) imgUrl = pick.source_url;\r\n        }\r\n        if (!imgUrl) imgUrl = m.source_url || '';\r\n        imgAlt = m.alt_text || title;\r\n      }\r\n    }\r\n\r\n    var catName = '';\r\n    if (post._embedded && post._embedded['wp:term']) {\r\n      var terms = post._embedded['wp:term'][0] || [];\r\n      if (terms.length) catName = terms[0].name || '';\r\n    }\r\n\r\n    var imgBlock = imgUrl\r\n      ? '<div class=\"eg-blog__card-img\"><img decoding=\"async\" src=\"' + escapeHtml(imgUrl) + '\" alt=\"' + escapeHtml(imgAlt) + '\" loading=\"lazy\">'\r\n      : '<div class=\"eg-blog__card-img eg-blog__card-img--empty\">'\r\n        + '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16v16H4z\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-5-5L5 21\"\/><\/svg>';\r\n    if (catName) imgBlock += '<span class=\"eg-blog__card-badge\">' + escapeHtml(catName) + '<\/span>';\r\n    imgBlock += '<\/div>';\r\n\r\n    return '<article class=\"eg-blog__card eg-reveal\">'\r\n      + '<a href=\"' + escapeHtml(link) + '\" aria-label=\"' + escapeHtml(stripHtml(title)) + '\">' + imgBlock + '<\/a>'\r\n      + '<div class=\"eg-blog__card-body\">'\r\n      +   '<div class=\"eg-blog__card-meta\">'\r\n      +     '<span>' + escapeHtml(date) + '<\/span>'\r\n      +     '<span class=\"eg-blog__card-meta-dot\"><\/span>'\r\n      +     '<span>' + escapeHtml(rt) + '<\/span>'\r\n      +   '<\/div>'\r\n      +   '<h3><a href=\"' + escapeHtml(link) + '\">' + title + '<\/a><\/h3>'\r\n      +   (excerpt ? '<p class=\"eg-blog__card-excerpt\">' + escapeHtml(excerpt) + '<\/p>' : '')\r\n      +   '<a class=\"eg-blog__card-link\" href=\"' + escapeHtml(link) + '\">'\r\n      +     'Read Article'\r\n      +     '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>'\r\n      +   '<\/a>'\r\n      + '<\/div>'\r\n      + '<\/article>';\r\n  }\r\n\r\n  function updateCounter(total, monthLbl) {\r\n    var word = total === 1 ? 'article' : 'articles';\r\n    if (state.month !== 'all' && monthLbl) {\r\n      counterEl.innerHTML = '<strong>' + total + '<\/strong> ' + word + ' from <strong>' + escapeHtml(monthLbl) + '<\/strong>';\r\n    } else {\r\n      counterEl.innerHTML = '<strong>' + total + '<\/strong> ' + word + ' published';\r\n    }\r\n  }\r\n\r\n  \/\/ ====== FILTER + UPDATE ======\r\n  function updateView() {\r\n    var filtered;\r\n    var monthLbl = '';\r\n    if (state.month === 'all') {\r\n      filtered = allPosts.slice();\r\n    } else {\r\n      filtered = allPosts.filter(function (p) { return monthKey(p.date) === state.month; });\r\n      if (filtered.length) monthLbl = monthLabel(filtered[0].date);\r\n    }\r\n    if (!allPosts.length) {\r\n      show(emptyEl); hide(gridEl);\r\n      updateCounter(0);\r\n      return;\r\n    }\r\n    hide(emptyEl);\r\n    show(gridEl);\r\n    renderPosts(filtered);\r\n    updateCounter(filtered.length, monthLbl);\r\n  }\r\n\r\n  \/\/ ====== FETCH (todo de una) ======\r\n  function fetchAllPosts() {\r\n    show(skeletonEl);\r\n    hide(gridEl); hide(emptyEl); hide(errorEl);\r\n    fetch(REST_BASE + '\/posts?_embed&per_page=100&status=publish&orderby=date&order=desc')\r\n      .then(function (r) { return r.json(); })\r\n      .then(function (posts) {\r\n        hide(skeletonEl);\r\n        if (!Array.isArray(posts)) posts = [];\r\n        allPosts = posts;\r\n        renderDates();\r\n        updateView();\r\n      })\r\n      .catch(function (err) {\r\n        console.error('EGRAB Blog fetch failed:', err);\r\n        hide(skeletonEl);\r\n        show(errorEl);\r\n        hide(gridEl);\r\n        counterEl.textContent = '';\r\n      });\r\n  }\r\n\r\n  \/\/ ====== ALL ARTICLES click ======\r\n  var allBtn = datesEl.querySelector('.eg-blog__date-link[data-month=\"all\"]');\r\n  if (allBtn) {\r\n    allBtn.addEventListener('click', function () {\r\n      datesEl.querySelectorAll('.eg-blog__date-link').forEach(function (b) { b.classList.remove('is-active'); });\r\n      allBtn.classList.add('is-active');\r\n      state.month = 'all';\r\n      updateView();\r\n    });\r\n  }\r\n\r\n  \/\/ ====== REVEAL ======\r\n  function runReveal() {\r\n    var els = document.querySelectorAll('.eg-blog .eg-reveal:not(.is-in)');\r\n    if (!('IntersectionObserver' in window)) {\r\n      els.forEach(function (el) { el.classList.add('is-in'); });\r\n      return;\r\n    }\r\n    var io = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (entry) {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-in');\r\n          io.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n    els.forEach(function (el, i) {\r\n      el.style.transitionDelay = (Math.min(i, 5) * 80) + 'ms';\r\n      io.observe(el);\r\n    });\r\n  }\r\n\r\n  \/\/ ====== INIT ======\r\n  fetchAllPosts();\r\n  runReveal();\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Blog Insights &amp; Resources Latest HR Knowledge Practical guides, compliance updates and leadership ideas to help your business grow with confidence. Browse by Date All Articles \u2014 Loading articles&#8230; No articles yet We&#8217;re working on new content. Check back soon for HR insights, compliance updates and leadership ideas. Couldn&#8217;t load articles We had trouble [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-182","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/pages\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":10,"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/pages\/182\/revisions"}],"predecessor-version":[{"id":3329,"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/pages\/182\/revisions\/3329"}],"wp:attachment":[{"href":"https:\/\/egrabservices.com\/new\/wp-json\/wp\/v2\/media?parent=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}