{"id":648,"date":"2026-05-20T15:21:14","date_gmt":"2026-05-20T15:21:14","guid":{"rendered":"https:\/\/wearepragma.es\/?page_id=648"},"modified":"2026-05-21T13:28:39","modified_gmt":"2026-05-21T13:28:39","slug":"648-2","status":"publish","type":"page","link":"https:\/\/wearepragma.es\/en\/648-2\/","title":{"rendered":"."},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"648\" class=\"elementor elementor-648\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80e15cb e-con-full e-flex e-con e-parent\" data-id=\"80e15cb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-912c1f1 elementor-widget elementor-widget-html\" data-id=\"912c1f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"pragma-hero-wrap\" aria-label=\"Hero principal PRAGMA\">\n  <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');\n\n    .pragma-hero-wrap,\n    .pragma-hero-wrap * {\n      box-sizing: border-box;\n    }\n\n    .pragma-hero-wrap {\n      --pragma-white: #ffffff;\n      --pragma-cream: #FEF9F5;\n      --pragma-gray: #EAEAEA;\n      --pragma-graphite: #2E2E2E;\n      --pragma-plum: #6F4E5E;\n      --pragma-plum-dark: #4A2638;\n      --pragma-blue: #83ADD3;\n      --pragma-cyan: #BFEAF5;\n      --pragma-lavender: #E8D7F0;\n      --pragma-peach: #FFE1CC;\n      --pragma-mint: #DDF3EA;\n      --pragma-shadow: 0 24px 70px rgba(46, 46, 46, 0.10);\n      --pragma-radius: 28px;\n\n      width: 100%;\n      position: relative;\n      overflow: hidden;\n      font-family: 'Montserrat', sans-serif;\n      background: #fbfdff;\n      color: var(--pragma-graphite);\n      isolation: isolate;\n    }\n\n    .pragma-gradient-mesh {\n      position: absolute;\n      inset: -22%;\n      z-index: 0;\n      overflow: hidden;\n      pointer-events: none;\n      background:\n        linear-gradient(120deg, rgba(255,255,255,0.95), rgba(254,249,245,0.78)),\n        radial-gradient(circle at 20% 30%, rgba(191, 234, 245, 0.65), transparent 34%),\n        radial-gradient(circle at 78% 16%, rgba(232, 215, 240, 0.68), transparent 32%),\n        radial-gradient(circle at 72% 78%, rgba(131, 173, 211, 0.48), transparent 34%),\n        radial-gradient(circle at 16% 82%, rgba(255, 225, 204, 0.62), transparent 32%);\n      filter: saturate(118%);\n      animation: pragmaMeshBreath 14s ease-in-out infinite alternate;\n    }\n\n    .pragma-gradient-mesh::before {\n      content: \"\";\n      position: absolute;\n      inset: -18%;\n      background:\n        conic-gradient(\n          from 120deg at 50% 50%,\n          rgba(131, 173, 211, 0.34),\n          rgba(232, 215, 240, 0.36),\n          rgba(255, 225, 204, 0.34),\n          rgba(221, 243, 234, 0.30),\n          rgba(191, 234, 245, 0.36),\n          rgba(111, 78, 94, 0.12),\n          rgba(131, 173, 211, 0.34)\n        );\n      opacity: 0.82;\n      filter: blur(64px);\n      transform-origin: center;\n      animation: pragmaMeshRotate 28s linear infinite;\n    }\n\n    .pragma-gradient-mesh::after {\n      content: \"\";\n      position: absolute;\n      inset: 16%;\n      background:\n        radial-gradient(circle at 36% 42%, rgba(255,255,255,0.86), transparent 28%),\n        radial-gradient(circle at 68% 52%, rgba(255,255,255,0.62), transparent 34%);\n      filter: blur(30px);\n      opacity: 0.8;\n      animation: pragmaLightDrift 11s ease-in-out infinite alternate;\n    }\n\n    .pragma-gradient-mesh span {\n      position: absolute;\n      display: block;\n      width: 38vw;\n      height: 38vw;\n      min-width: 360px;\n      min-height: 360px;\n      border-radius: 999px;\n      filter: blur(54px);\n      opacity: 0.62;\n      mix-blend-mode: multiply;\n      transform: translate3d(0,0,0);\n      will-change: transform, opacity;\n    }\n\n    .pragma-gradient-mesh .mesh-1 {\n      left: 0%;\n      top: 2%;\n      background: rgba(191, 234, 245, 0.72);\n      animation: pragmaOrbOne 18s ease-in-out infinite alternate;\n    }\n\n    .pragma-gradient-mesh .mesh-2 {\n      right: 4%;\n      top: 0%;\n      background: rgba(232, 215, 240, 0.72);\n      animation: pragmaOrbTwo 21s ease-in-out infinite alternate;\n    }\n\n    .pragma-gradient-mesh .mesh-3 {\n      right: 0%;\n      bottom: 0%;\n      background: rgba(131, 173, 211, 0.54);\n      animation: pragmaOrbThree 19s ease-in-out infinite alternate;\n    }\n\n    .pragma-gradient-mesh .mesh-4 {\n      left: 8%;\n      bottom: 2%;\n      background: rgba(255, 225, 204, 0.68);\n      animation: pragmaOrbFour 23s ease-in-out infinite alternate;\n    }\n\n    .pragma-gradient-mesh .mesh-5 {\n      left: 38%;\n      top: 38%;\n      width: 30vw;\n      height: 30vw;\n      min-width: 280px;\n      min-height: 280px;\n      background: rgba(221, 243, 234, 0.55);\n      animation: pragmaOrbFive 17s ease-in-out infinite alternate;\n    }\n\n    .pragma-hero-wrap::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background-image:\n        linear-gradient(rgba(46, 46, 46, 0.026) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(46, 46, 46, 0.026) 1px, transparent 1px),\n        radial-gradient(circle, rgba(131, 173, 211, 0.20) 1px, transparent 1.7px);\n      background-size: 52px 52px, 52px 52px, 22px 22px;\n      mask-image:\n        radial-gradient(circle at 76% 20%, black 0%, transparent 43%),\n        linear-gradient(to bottom, rgba(0,0,0,0.82), rgba(0,0,0,0.10));\n      pointer-events: none;\n      z-index: 1;\n      opacity: 0.75;\n      animation: pragmaGridMove 24s linear infinite;\n    }\n\n    .pragma-hero-wrap::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      background:\n        linear-gradient(90deg, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.34) 100%),\n        radial-gradient(circle at 50% 42%, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.00) 58%);\n      opacity: 0.92;\n    }\n\n    .pragma-hero {\n      width: min(1240px, calc(100% - 44px));\n      margin: 0 auto;\n      position: relative;\n      z-index: 3;\n      min-height: clamp(620px, 78vh, 840px);\n      display: grid;\n      grid-template-columns: minmax(0, 0.84fr) minmax(430px, 1.16fr);\n      gap: clamp(34px, 5vw, 78px);\n      align-items: center;\n      padding: clamp(58px, 7vw, 96px) 0 clamp(50px, 6vw, 86px);\n    }\n\n    .pragma-hero-left {\n      position: relative;\n      z-index: 4;\n      max-width: 650px;\n      min-width: 0;\n    }\n\n    .pragma-kicker {\n      display: inline-flex;\n      align-items: center;\n      gap: 11px;\n      margin: 0 0 22px;\n      font-size: 12px;\n      line-height: 1.2;\n      letter-spacing: 0.18em;\n      text-transform: uppercase;\n      font-weight: 800;\n      color: var(--pragma-plum);\n    }\n\n    .pragma-kicker::before {\n      content: \"\";\n      width: 38px;\n      height: 1px;\n      background: linear-gradient(90deg, var(--pragma-blue), var(--pragma-plum));\n      display: block;\n      flex: 0 0 auto;\n    }\n\n    .pragma-hero-title {\n      margin: 0;\n      max-width: 650px;\n      font-size: clamp(42px, 4.9vw, 74px);\n      line-height: 1.02;\n      letter-spacing: -0.065em;\n      font-weight: 800;\n      color: var(--pragma-graphite);\n      text-wrap: balance;\n    }\n\n    .pragma-title-accent {\n      display: block;\n      width: max-content;\n      max-width: 100%;\n      margin-top: 8px;\n      color: var(--pragma-plum);\n      position: relative;\n      font-size: 0.72em;\n      line-height: 1.05;\n      font-weight: 700;\n      letter-spacing: -0.055em;\n      white-space: nowrap;\n      background: linear-gradient(to top, rgba(131, 173, 211, 0.35) 0 28%, transparent 28% 100%);\n      padding: 0 0.03em;\n    }\n\n    .pragma-hero-text {\n      margin: 28px 0 0;\n      max-width: 590px;\n      font-size: clamp(16px, 1.25vw, 19px);\n      line-height: 1.72;\n      font-weight: 400;\n      color: rgba(46, 46, 46, 0.76);\n    }\n\n    .pragma-hero-actions {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 14px;\n      margin-top: 34px;\n    }\n\n    .pragma-btn {\n      appearance: none;\n      border: 1px solid transparent;\n      min-height: 54px;\n      padding: 0 24px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 14px;\n      text-decoration: none;\n      font-size: 12px;\n      line-height: 1;\n      font-weight: 800;\n      letter-spacing: 0.13em;\n      text-transform: uppercase;\n      border-radius: 0;\n      transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease;\n      cursor: pointer;\n      font-family: 'Montserrat', sans-serif;\n    }\n\n    .pragma-btn-primary {\n      background: var(--pragma-plum);\n      color: #fff;\n      box-shadow: 0 18px 38px rgba(111, 78, 94, 0.22);\n    }\n\n    .pragma-btn-secondary {\n      background: rgba(255, 255, 255, 0.52);\n      color: var(--pragma-plum);\n      border-color: rgba(111, 78, 94, 0.32);\n      backdrop-filter: blur(14px);\n    }\n\n    .pragma-btn:hover {\n      transform: translateY(-3px);\n    }\n\n    .pragma-btn-primary:hover {\n      background: var(--pragma-plum-dark);\n      color: #fff;\n      box-shadow: 0 22px 48px rgba(111, 78, 94, 0.30);\n    }\n\n    .pragma-btn-secondary:hover {\n      background: #fff;\n      border-color: var(--pragma-plum);\n      color: var(--pragma-plum);\n      box-shadow: 0 18px 34px rgba(46, 46, 46, 0.08);\n    }\n\n    .pragma-mini-proof {\n      margin-top: 34px;\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      max-width: 620px;\n      border-top: 1px solid rgba(46, 46, 46, 0.10);\n      border-bottom: 1px solid rgba(46, 46, 46, 0.10);\n    }\n\n    .pragma-proof-item {\n      padding: 18px 18px 18px 0;\n    }\n\n    .pragma-proof-item + .pragma-proof-item {\n      padding-left: 20px;\n      border-left: 1px solid rgba(46, 46, 46, 0.10);\n    }\n\n    .pragma-proof-num {\n      display: block;\n      font-size: clamp(22px, 2vw, 30px);\n      line-height: 1;\n      letter-spacing: -0.045em;\n      font-weight: 800;\n      color: var(--pragma-plum);\n    }\n\n    .pragma-proof-label {\n      display: block;\n      margin-top: 7px;\n      font-size: 11px;\n      line-height: 1.45;\n      font-weight: 600;\n      color: rgba(46, 46, 46, 0.62);\n    }\n\n    .pragma-hero-right {\n      position: relative;\n      z-index: 2;\n      min-height: 620px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 0;\n    }\n\n    .pragma-orbit {\n      position: absolute;\n      width: min(560px, 86%);\n      aspect-ratio: 1 \/ 1;\n      border: 1px solid rgba(131, 173, 211, 0.40);\n      border-radius: 50%;\n      animation: pragmaFloat 8s ease-in-out infinite;\n      opacity: 0.72;\n    }\n\n    .pragma-orbit::before,\n    .pragma-orbit::after {\n      content: \"\";\n      position: absolute;\n      width: 13px;\n      height: 13px;\n      border-radius: 50%;\n      background: var(--pragma-blue);\n      box-shadow: 0 0 0 8px rgba(131, 173, 211, 0.17);\n    }\n\n    .pragma-orbit::before {\n      top: 16%;\n      right: 8%;\n    }\n\n    .pragma-orbit::after {\n      left: 11%;\n      bottom: 19%;\n      background: var(--pragma-plum);\n      box-shadow: 0 0 0 8px rgba(111, 78, 94, 0.14);\n    }\n\n    .pragma-visual-stage {\n      width: min(620px, 100%);\n      min-height: 540px;\n      position: relative;\n      border-radius: var(--pragma-radius);\n    }\n\n    .pragma-visual-blob {\n      position: absolute;\n      right: 0;\n      bottom: 28px;\n      width: 78%;\n      height: 52%;\n      background:\n        radial-gradient(circle at 24% 18%, rgba(255,255,255,0.82), rgba(255,255,255,0) 32%),\n        linear-gradient(135deg, rgba(131, 173, 211, 0.82), rgba(131, 173, 211, 0.25) 60%, rgba(111, 78, 94, 0.12));\n      border-radius: 180px 180px 36px 180px;\n      filter: drop-shadow(0 28px 64px rgba(131, 173, 211, 0.22));\n      animation: pragmaBlob 8s ease-in-out infinite;\n    }\n\n    .pragma-dot-grid {\n      position: absolute;\n      top: 50px;\n      right: 10px;\n      width: 180px;\n      height: 140px;\n      opacity: 0.52;\n      background-image: radial-gradient(circle, rgba(131, 173, 211, 0.78) 1.6px, transparent 1.8px);\n      background-size: 15px 15px;\n      animation: pragmaDrift 11s ease-in-out infinite;\n    }\n\n    .pragma-card {\n      position: absolute;\n      background: rgba(255, 255, 255, 0.80);\n      border: 1px solid rgba(46, 46, 46, 0.08);\n      box-shadow: var(--pragma-shadow);\n      backdrop-filter: blur(18px);\n      -webkit-backdrop-filter: blur(18px);\n      border-radius: 18px;\n      color: var(--pragma-graphite);\n    }\n\n    .pragma-card-main {\n      top: 24px;\n      left: 34px;\n      width: min(400px, 72%);\n      min-height: 176px;\n      padding: 26px;\n      animation: pragmaCardIn 0.9s ease both, pragmaFloat 7.2s ease-in-out infinite 0.7s;\n    }\n\n    .pragma-card-title {\n      margin: 0 0 18px;\n      font-size: 13px;\n      line-height: 1.2;\n      font-weight: 800;\n      color: rgba(46, 46, 46, 0.82);\n    }\n\n    .pragma-card-row {\n      height: 8px;\n      border-radius: 999px;\n      background: rgba(46, 46, 46, 0.10);\n      overflow: hidden;\n      margin-bottom: 13px;\n    }\n\n    .pragma-card-row span {\n      display: block;\n      height: 100%;\n      width: 0%;\n      background: linear-gradient(90deg, var(--pragma-blue), var(--pragma-plum));\n      border-radius: inherit;\n      animation: pragmaLoadBar 2.2s ease forwards 0.55s;\n    }\n\n    .pragma-card-row:nth-child(3) span {\n      animation-delay: 0.85s;\n      max-width: 72%;\n    }\n\n    .pragma-card-row:nth-child(4) span {\n      animation-delay: 1.05s;\n      max-width: 54%;\n    }\n\n    .pragma-card-metric {\n      top: 158px;\n      right: 48px;\n      width: 250px;\n      padding: 22px;\n      animation: pragmaCardIn 0.9s ease both 0.22s, pragmaFloatAlt 7.5s ease-in-out infinite 1s;\n    }\n\n    .pragma-donut {\n      --p: 78;\n      width: 104px;\n      height: 104px;\n      margin: 0 auto 12px;\n      border-radius: 50%;\n      background:\n        radial-gradient(circle closest-side, #fff 67%, transparent 68%),\n        conic-gradient(var(--pragma-plum) calc(var(--p) * 1%), rgba(46, 46, 46, 0.08) 0);\n      position: relative;\n      animation: pragmaDonutPulse 3.2s ease-in-out infinite;\n    }\n\n    .pragma-donut::after {\n      content: \"78%\";\n      position: absolute;\n      inset: 0;\n      display: grid;\n      place-items: center;\n      font-size: 24px;\n      font-weight: 800;\n      letter-spacing: -0.04em;\n      color: var(--pragma-graphite);\n    }\n\n    .pragma-donut-label {\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      color: rgba(46, 46, 46, 0.64);\n    }\n\n    .pragma-card-audience {\n      left: 0;\n      bottom: 142px;\n      width: 252px;\n      padding: 22px;\n      display: grid;\n      grid-template-columns: 44px 1fr;\n      gap: 14px;\n      align-items: center;\n      animation: pragmaCardIn 0.9s ease both 0.36s, pragmaFloat 6.8s ease-in-out infinite 1.2s;\n    }\n\n    .pragma-audience-icon {\n      width: 44px;\n      height: 44px;\n      border-radius: 16px;\n      border: 1px solid rgba(111, 78, 94, 0.28);\n      display: grid;\n      place-items: center;\n      color: var(--pragma-plum);\n      background: rgba(111, 78, 94, 0.05);\n    }\n\n    .pragma-audience-icon svg {\n      width: 23px;\n      height: 23px;\n      stroke-width: 1.8;\n    }\n\n    .pragma-small-title {\n      font-size: 12px;\n      font-weight: 800;\n      margin: 0 0 5px;\n      color: var(--pragma-graphite);\n    }\n\n    .pragma-small-text {\n      font-size: 11px;\n      line-height: 1.45;\n      font-weight: 500;\n      color: rgba(46, 46, 46, 0.62);\n      margin: 0;\n    }\n\n    .pragma-card-chart {\n      right: 4px;\n      bottom: 88px;\n      width: min(335px, 62%);\n      padding: 22px 22px 18px;\n      animation: pragmaCardIn 0.9s ease both 0.5s, pragmaFloatAlt 8s ease-in-out infinite 1.4s;\n    }\n\n    .pragma-chart-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      margin-bottom: 14px;\n    }\n\n    .pragma-chart-title strong {\n      font-size: 12px;\n      font-weight: 800;\n      color: var(--pragma-graphite);\n    }\n\n    .pragma-chart-title span {\n      font-size: 11px;\n      font-weight: 800;\n      color: var(--pragma-blue);\n    }\n\n    .pragma-chart {\n      width: 100%;\n      height: 130px;\n      overflow: visible;\n    }\n\n    .pragma-chart-grid line {\n      stroke: rgba(46, 46, 46, 0.08);\n      stroke-width: 1;\n    }\n\n    .pragma-chart-line {\n      fill: none;\n      stroke: var(--pragma-plum);\n      stroke-width: 3;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      stroke-dasharray: 420;\n      stroke-dashoffset: 420;\n      animation: pragmaDrawLine 2.4s ease forwards 0.7s;\n    }\n\n    .pragma-chart-area {\n      fill: url(#pragmaAreaGradient);\n      opacity: 0;\n      animation: pragmaFadeUp 1s ease forwards 2.25s;\n    }\n\n    .pragma-chart-dot {\n      fill: #fff;\n      stroke: var(--pragma-plum);\n      stroke-width: 2.5;\n      opacity: 0;\n      transform-origin: center;\n      animation: pragmaPop 0.42s ease forwards;\n    }\n\n    .pragma-chart-dot:nth-of-type(1) { animation-delay: 1.05s; }\n    .pragma-chart-dot:nth-of-type(2) { animation-delay: 1.22s; }\n    .pragma-chart-dot:nth-of-type(3) { animation-delay: 1.39s; }\n    .pragma-chart-dot:nth-of-type(4) { animation-delay: 1.56s; }\n    .pragma-chart-dot:nth-of-type(5) { animation-delay: 1.73s; }\n    .pragma-chart-dot:nth-of-type(6) { animation-delay: 1.90s; }\n\n    .pragma-card-blue {\n      right: 0;\n      top: 296px;\n      width: 72px;\n      height: 72px;\n      border-radius: 24px;\n      background: linear-gradient(135deg, var(--pragma-blue), rgba(131, 173, 211, 0.55));\n      box-shadow: 0 18px 42px rgba(131, 173, 211, 0.35);\n      display: grid;\n      place-items: center;\n      color: #fff;\n      animation: pragmaSpinSoft 9s linear infinite;\n    }\n\n    .pragma-card-blue svg {\n      width: 32px;\n      height: 32px;\n      stroke-width: 1.7;\n    }\n\n    .pragma-card-keywords {\n      left: 74px;\n      bottom: 12px;\n      width: min(360px, 62%);\n      padding: 18px 18px 16px;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 10px;\n      animation: pragmaCardIn 0.9s ease both 0.62s;\n    }\n\n    .pragma-keyword {\n      min-height: 52px;\n      border-radius: 14px;\n      background: rgba(254, 249, 245, 0.86);\n      border: 1px solid rgba(46, 46, 46, 0.06);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      padding: 9px;\n      font-size: 10px;\n      line-height: 1.25;\n      font-weight: 800;\n      letter-spacing: 0.03em;\n      color: rgba(46, 46, 46, 0.72);\n    }\n\n    .pragma-keyword:nth-child(2) {\n      background: rgba(131, 173, 211, 0.13);\n      color: #4978A0;\n    }\n\n    .pragma-keyword:nth-child(3) {\n      background: rgba(111, 78, 94, 0.10);\n      color: var(--pragma-plum);\n    }\n\n    @keyframes pragmaMeshBreath {\n      0% {\n        transform: scale(1) translate3d(0,0,0);\n        filter: saturate(112%) hue-rotate(0deg);\n      }\n      50% {\n        transform: scale(1.045) translate3d(1.6%, -1.2%, 0);\n        filter: saturate(126%) hue-rotate(7deg);\n      }\n      100% {\n        transform: scale(1.025) translate3d(-1.4%, 1.8%, 0);\n        filter: saturate(118%) hue-rotate(-5deg);\n      }\n    }\n\n    @keyframes pragmaMeshRotate {\n      0% {\n        transform: rotate(0deg) scale(1);\n      }\n      50% {\n        transform: rotate(180deg) scale(1.08);\n      }\n      100% {\n        transform: rotate(360deg) scale(1);\n      }\n    }\n\n    @keyframes pragmaLightDrift {\n      0% {\n        transform: translate3d(-3%, -2%, 0) scale(1);\n        opacity: 0.65;\n      }\n      100% {\n        transform: translate3d(4%, 3%, 0) scale(1.08);\n        opacity: 0.9;\n      }\n    }\n\n    @keyframes pragmaOrbOne {\n      0% { transform: translate3d(-8%, -4%, 0) scale(1); opacity: 0.58; }\n      45% { transform: translate3d(18%, 12%, 0) scale(1.18); opacity: 0.74; }\n      100% { transform: translate3d(8%, 26%, 0) scale(0.96); opacity: 0.62; }\n    }\n\n    @keyframes pragmaOrbTwo {\n      0% { transform: translate3d(4%, -8%, 0) scale(1.05); opacity: 0.62; }\n      50% { transform: translate3d(-24%, 16%, 0) scale(1.22); opacity: 0.78; }\n      100% { transform: translate3d(-10%, 28%, 0) scale(0.98); opacity: 0.64; }\n    }\n\n    @keyframes pragmaOrbThree {\n      0% { transform: translate3d(12%, 8%, 0) scale(1); opacity: 0.48; }\n      45% { transform: translate3d(-18%, -18%, 0) scale(1.18); opacity: 0.66; }\n      100% { transform: translate3d(-32%, -4%, 0) scale(1.04); opacity: 0.54; }\n    }\n\n    @keyframes pragmaOrbFour {\n      0% { transform: translate3d(-6%, 12%, 0) scale(1.02); opacity: 0.52; }\n      50% { transform: translate3d(24%, -20%, 0) scale(1.20); opacity: 0.70; }\n      100% { transform: translate3d(10%, -8%, 0) scale(0.98); opacity: 0.58; }\n    }\n\n    @keyframes pragmaOrbFive {\n      0% { transform: translate3d(-10%, 2%, 0) scale(0.92); opacity: 0.38; }\n      50% { transform: translate3d(18%, -16%, 0) scale(1.24); opacity: 0.58; }\n      100% { transform: translate3d(-18%, 18%, 0) scale(1.08); opacity: 0.44; }\n    }\n\n    @keyframes pragmaGridMove {\n      from {\n        background-position: 0 0, 0 0, 0 0;\n      }\n      to {\n        background-position: 52px 52px, 52px 52px, 22px 22px;\n      }\n    }\n\n    @keyframes pragmaLoadBar {\n      from { width: 0%; }\n      to { width: 86%; }\n    }\n\n    @keyframes pragmaDrawLine {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes pragmaPop {\n      0% { opacity: 0; transform: scale(0.35); }\n      70% { opacity: 1; transform: scale(1.2); }\n      100% { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes pragmaFadeUp {\n      from { opacity: 0; transform: translateY(8px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    @keyframes pragmaCardIn {\n      from { opacity: 0; transform: translateY(22px) scale(0.98); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    @keyframes pragmaFloat {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-14px); }\n    }\n\n    @keyframes pragmaFloatAlt {\n      0%, 100% { transform: translateY(0) translateX(0); }\n      50% { transform: translateY(12px) translateX(-5px); }\n    }\n\n    @keyframes pragmaBlob {\n      0%, 100% { transform: translateY(0) scale(1); border-radius: 180px 180px 36px 180px; }\n      50% { transform: translateY(-10px) scale(1.025); border-radius: 160px 190px 48px 160px; }\n    }\n\n    @keyframes pragmaDrift {\n      0%, 100% { transform: translateY(0) translateX(0); }\n      50% { transform: translateY(14px) translateX(-12px); }\n    }\n\n    @keyframes pragmaDonutPulse {\n      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(111,78,94,0)); }\n      50% { transform: scale(1.035); filter: drop-shadow(0 10px 18px rgba(111,78,94,0.12)); }\n    }\n\n    @keyframes pragmaSpinSoft {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 1280px) {\n      .pragma-hero {\n        grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);\n        gap: 34px;\n      }\n\n      .pragma-hero-title {\n        font-size: clamp(40px, 4.35vw, 64px);\n        max-width: 590px;\n      }\n\n      .pragma-hero-left {\n        max-width: 600px;\n      }\n\n      .pragma-card-main {\n        left: 12px;\n        width: 74%;\n      }\n    }\n\n    @media (max-width: 1120px) {\n      .pragma-hero {\n        width: min(1120px, calc(100% - 36px));\n        grid-template-columns: minmax(0, 0.96fr) minmax(370px, 1.04fr);\n        gap: 28px;\n        min-height: 700px;\n      }\n\n      .pragma-hero-title {\n        font-size: clamp(38px, 4.05vw, 56px);\n        letter-spacing: -0.058em;\n        max-width: 540px;\n      }\n\n      .pragma-title-accent {\n        font-size: 0.68em;\n      }\n\n      .pragma-hero-right {\n        min-height: 565px;\n      }\n\n      .pragma-card-metric {\n        right: 20px;\n      }\n\n      .pragma-card-chart {\n        right: 0;\n        width: 67%;\n      }\n    }\n\n    @media (max-width: 980px) {\n      .pragma-hero {\n        grid-template-columns: 1fr;\n        min-height: auto;\n        padding-top: 48px;\n      }\n\n      .pragma-hero-left {\n        max-width: 780px;\n      }\n\n      .pragma-hero-title,\n      .pragma-hero-text {\n        max-width: 780px;\n      }\n\n      .pragma-title-accent {\n        font-size: 0.72em;\n      }\n\n      .pragma-hero-right {\n        min-height: 590px;\n        margin-top: 12px;\n      }\n\n      .pragma-visual-stage {\n        min-height: 560px;\n      }\n\n      .pragma-mini-proof {\n        max-width: 760px;\n      }\n    }\n\n    @media (max-width: 767px) {\n      .pragma-hero {\n        width: min(100% - 28px, 680px);\n        padding: 42px 0 52px;\n      }\n\n      .pragma-kicker {\n        font-size: 10px;\n        letter-spacing: 0.14em;\n      }\n\n      .pragma-hero-title {\n        font-size: clamp(35px, 10.4vw, 52px);\n        line-height: 1.04;\n        letter-spacing: -0.058em;\n      }\n\n      .pragma-title-accent {\n        width: auto;\n        white-space: normal;\n        font-size: 0.76em;\n      }\n\n      .pragma-hero-text {\n        font-size: 15px;\n        line-height: 1.65;\n        margin-top: 22px;\n      }\n\n      .pragma-hero-actions {\n        margin-top: 28px;\n        gap: 10px;\n      }\n\n      .pragma-btn {\n        width: 100%;\n        min-height: 52px;\n      }\n\n      .pragma-mini-proof {\n        grid-template-columns: 1fr;\n        border-bottom: 0;\n      }\n\n      .pragma-proof-item {\n        padding: 16px 0;\n        border-bottom: 1px solid rgba(46, 46, 46, 0.10);\n      }\n\n      .pragma-proof-item + .pragma-proof-item {\n        padding-left: 0;\n        border-left: 0;\n      }\n\n      .pragma-hero-right {\n        min-height: 560px;\n      }\n\n      .pragma-visual-stage {\n        min-height: 540px;\n      }\n\n      .pragma-orbit {\n        width: 92%;\n      }\n\n      .pragma-card-main {\n        top: 10px;\n        left: 0;\n        width: 100%;\n        padding: 22px;\n      }\n\n      .pragma-card-metric {\n        top: 190px;\n        right: auto;\n        left: 0;\n        width: 170px;\n        padding: 18px;\n      }\n\n      .pragma-donut {\n        width: 84px;\n        height: 84px;\n      }\n\n      .pragma-donut::after {\n        font-size: 20px;\n      }\n\n      .pragma-card-audience {\n        left: auto;\n        right: 0;\n        bottom: 214px;\n        width: 210px;\n        padding: 17px;\n      }\n\n      .pragma-card-chart {\n        right: 0;\n        bottom: 66px;\n        width: 100%;\n        padding: 19px;\n      }\n\n      .pragma-card-blue {\n        top: 294px;\n        right: 20px;\n        width: 58px;\n        height: 58px;\n        border-radius: 20px;\n      }\n\n      .pragma-card-blue svg {\n        width: 26px;\n        height: 26px;\n      }\n\n      .pragma-card-keywords {\n        display: none;\n      }\n\n      .pragma-visual-blob {\n        width: 92%;\n        height: 45%;\n        bottom: 30px;\n      }\n\n      .pragma-dot-grid {\n        right: -20px;\n        top: 118px;\n      }\n    }\n\n    @media (max-width: 420px) {\n      .pragma-hero {\n        width: min(100% - 22px, 390px);\n      }\n\n      .pragma-hero-title {\n        font-size: 34px;\n      }\n\n      .pragma-hero-right {\n        min-height: 540px;\n      }\n\n      .pragma-card-audience {\n        width: 190px;\n        grid-template-columns: 38px 1fr;\n      }\n\n      .pragma-audience-icon {\n        width: 38px;\n        height: 38px;\n        border-radius: 14px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .pragma-hero-wrap *,\n      .pragma-hero-wrap *::before,\n      .pragma-hero-wrap *::after {\n        animation-duration: 0.001ms !important;\n        animation-iteration-count: 1 !important;\n        scroll-behavior: auto !important;\n        transition-duration: 0.001ms !important;\n      }\n    }\n    \/* OPTIMIZACI\u00d3N M\u00d3VIL \u2014 fondo din\u00e1mico ligero y animaciones suaves *\/\n@media (max-width: 767px) {\n\n  .pragma-gradient-mesh {\n    inset: -12%;\n    background:\n      radial-gradient(circle at 18% 24%, rgba(191, 234, 245, 0.54), transparent 34%),\n      radial-gradient(circle at 82% 22%, rgba(232, 215, 240, 0.50), transparent 32%),\n      radial-gradient(circle at 78% 82%, rgba(131, 173, 211, 0.38), transparent 36%),\n      radial-gradient(circle at 22% 86%, rgba(255, 225, 204, 0.46), transparent 34%),\n      linear-gradient(135deg, #ffffff 0%, #f8fbff 34%, #fff7f1 68%, #ffffff 100%);\n    background-size: 180% 180%;\n    animation: pragmaMobileGradient 22s ease-in-out infinite alternate;\n    filter: none;\n  }\n\n  .pragma-gradient-mesh::before {\n    display: none;\n  }\n\n  .pragma-gradient-mesh::after {\n    inset: 0;\n    filter: blur(18px);\n    opacity: 0.45;\n    animation: none;\n  }\n\n  .pragma-gradient-mesh span {\n    min-width: 240px;\n    min-height: 240px;\n    width: 58vw;\n    height: 58vw;\n    filter: blur(28px);\n    opacity: 0.36;\n    mix-blend-mode: normal;\n    will-change: transform;\n  }\n\n  .pragma-gradient-mesh .mesh-1 {\n    animation: pragmaMobileOrbOne 26s ease-in-out infinite alternate;\n  }\n\n  .pragma-gradient-mesh .mesh-2 {\n    animation: pragmaMobileOrbTwo 28s ease-in-out infinite alternate;\n  }\n\n  .pragma-gradient-mesh .mesh-3,\n  .pragma-gradient-mesh .mesh-4,\n  .pragma-gradient-mesh .mesh-5 {\n    display: none;\n  }\n\n  .pragma-hero-wrap::before {\n    animation: none;\n    opacity: 0.38;\n    background-size: 58px 58px, 58px 58px, 28px 28px;\n  }\n\n  .pragma-orbit,\n  .pragma-visual-blob,\n  .pragma-dot-grid,\n  .pragma-card-main,\n  .pragma-card-metric,\n  .pragma-card-audience,\n  .pragma-card-chart,\n  .pragma-card-blue {\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n  }\n\n  .pragma-card {\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    box-shadow: 0 18px 42px rgba(46, 46, 46, 0.09);\n  }\n\n  .pragma-card-row span {\n    animation-duration: 1.4s;\n  }\n\n  .pragma-chart-line {\n    animation-duration: 1.5s;\n  }\n\n  .pragma-chart-area {\n    animation-delay: 1.2s;\n  }\n\n  .pragma-chart-dot {\n    animation-duration: 0.28s;\n  }\n\n  .pragma-card-blue {\n    transform: none;\n  }\n}\n\n@keyframes pragmaMobileGradient {\n  0% {\n    background-position: 0% 35%;\n  }\n  50% {\n    background-position: 100% 60%;\n  }\n  100% {\n    background-position: 35% 100%;\n  }\n}\n\n@keyframes pragmaMobileOrbOne {\n  0% {\n    transform: translate3d(-8%, -4%, 0) scale(1);\n  }\n  100% {\n    transform: translate3d(12%, 18%, 0) scale(1.08);\n  }\n}\n\n@keyframes pragmaMobileOrbTwo {\n  0% {\n    transform: translate3d(8%, -6%, 0) scale(1);\n  }\n  100% {\n    transform: translate3d(-16%, 14%, 0) scale(1.06);\n  }\n}\n  <\/style>\n\n  <div class=\"pragma-gradient-mesh\" aria-hidden=\"true\">\n    <span class=\"mesh-1\"><\/span>\n    <span class=\"mesh-2\"><\/span>\n    <span class=\"mesh-3\"><\/span>\n    <span class=\"mesh-4\"><\/span>\n    <span class=\"mesh-5\"><\/span>\n  <\/div>\n\n  <div class=\"pragma-hero\">\n    <div class=\"pragma-hero-left\">\n      <div class=\"pragma-kicker\">Comunicaci\u00f3n corporativa B2B<\/div>\n\n      <h1 class=\"pragma-hero-title\">\n        Comunicaci\u00f3n corporativa para empresas que necesitan\n        <span class=\"pragma-title-accent\">claridad, criterio y resultados.<\/span>\n      <\/h1>\n\n      <p class=\"pragma-hero-text\">\n        Estrategia, narrativa y contenidos para explicar mejor lo que hace tu empresa,\n        reforzar su posicionamiento y construir una presencia digital coherente, \u00fatil y medible.\n      <\/p>\n\n      <div class=\"pragma-hero-actions\">\n        <a class=\"pragma-btn pragma-btn-primary\" href=\"#contacto\">\n          Hablemos\n          <span aria-hidden=\"true\">\u2192<\/span>\n        <\/a>\n\n        <a class=\"pragma-btn pragma-btn-secondary\" href=\"#servicios\">\n          View services\n          <span aria-hidden=\"true\">\u2192<\/span>\n        <\/a>\n      <\/div>\n\n      <div class=\"pragma-mini-proof\" aria-label=\"Indicadores de valor\">\n        <div class=\"pragma-proof-item\">\n          <span class=\"pragma-proof-num\">01<\/span>\n          <span class=\"pragma-proof-label\">Mensaje claro y alineado con negocio<\/span>\n        <\/div>\n\n        <div class=\"pragma-proof-item\">\n          <span class=\"pragma-proof-num\">02<\/span>\n          <span class=\"pragma-proof-label\">Contenido estrat\u00e9gico para ganar autoridad<\/span>\n        <\/div>\n\n        <div class=\"pragma-proof-item\">\n          <span class=\"pragma-proof-num\">03<\/span>\n          <span class=\"pragma-proof-label\">Visibilidad digital con sentido y direcci\u00f3n<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"pragma-hero-right\" aria-hidden=\"true\">\n      <div class=\"pragma-orbit\"><\/div>\n\n      <div class=\"pragma-visual-stage\">\n        <div class=\"pragma-visual-blob\"><\/div>\n        <div class=\"pragma-dot-grid\"><\/div>\n\n        <div class=\"pragma-card pragma-card-main\">\n          <p class=\"pragma-card-title\">Mensaje clave<\/p>\n          <div class=\"pragma-card-row\"><span><\/span><\/div>\n          <div class=\"pragma-card-row\"><span><\/span><\/div>\n          <div class=\"pragma-card-row\"><span><\/span><\/div>\n        <\/div>\n\n        <div class=\"pragma-card pragma-card-metric\">\n          <div class=\"pragma-donut\"><\/div>\n          <div class=\"pragma-donut-label\">Claridad percibida<\/div>\n        <\/div>\n\n        <div class=\"pragma-card pragma-card-audience\">\n          <div class=\"pragma-audience-icon\">\n            <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2\"><\/path>\n              <circle cx=\"10\" cy=\"7\" r=\"4\"><\/circle>\n              <path d=\"M21 21v-2a4 4 0 0 0-3-3.87\"><\/path>\n              <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\n            <\/svg>\n          <\/div>\n\n          <div>\n            <p class=\"pragma-small-title\">Audiencia<\/p>\n            <p class=\"pragma-small-text\">Clientes estrat\u00e9gicos, canales y mensajes prioritarios.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"pragma-card pragma-card-chart\">\n          <div class=\"pragma-chart-title\">\n            <strong>Posicionamiento<\/strong>\n            <span>+ impacto<\/span>\n          <\/div>\n\n          <svg class=\"pragma-chart\" viewbox=\"0 0 320 140\" role=\"img\" aria-label=\"Gr\u00e1fica de posicionamiento\">\n            <defs>\n              <lineargradient id=\"pragmaAreaGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#83ADD3\" stop-opacity=\"0.32\"><\/stop>\n                <stop offset=\"100%\" stop-color=\"#6F4E5E\" stop-opacity=\"0.04\"><\/stop>\n              <\/lineargradient>\n            <\/defs>\n\n            <g class=\"pragma-chart-grid\">\n              <line x1=\"0\" y1=\"20\" x2=\"320\" y2=\"20\"><\/line>\n              <line x1=\"0\" y1=\"55\" x2=\"320\" y2=\"55\"><\/line>\n              <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\"><\/line>\n              <line x1=\"0\" y1=\"125\" x2=\"320\" y2=\"125\"><\/line>\n            <\/g>\n\n            <path class=\"pragma-chart-area\" d=\"M12 116 L62 102 L112 92 L164 62 L216 78 L286 34 L286 125 L12 125 Z\"><\/path>\n            <path class=\"pragma-chart-line\" d=\"M12 116 C42 110 45 106 62 102 C88 94 93 97 112 92 C138 84 143 63 164 62 C190 61 194 80 216 78 C244 75 254 45 286 34\"><\/path>\n\n            <circle class=\"pragma-chart-dot\" cx=\"12\" cy=\"116\" r=\"5\"><\/circle>\n            <circle class=\"pragma-chart-dot\" cx=\"62\" cy=\"102\" r=\"5\"><\/circle>\n            <circle class=\"pragma-chart-dot\" cx=\"112\" cy=\"92\" r=\"5\"><\/circle>\n            <circle class=\"pragma-chart-dot\" cx=\"164\" cy=\"62\" r=\"5\"><\/circle>\n            <circle class=\"pragma-chart-dot\" cx=\"216\" cy=\"78\" r=\"5\"><\/circle>\n            <circle class=\"pragma-chart-dot\" cx=\"286\" cy=\"34\" r=\"5\"><\/circle>\n          <\/svg>\n        <\/div>\n\n        <div class=\"pragma-card-blue\">\n          <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"12\" cy=\"12\" r=\"8\"><\/circle>\n            <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n            <path d=\"M12 2v3\"><\/path>\n            <path d=\"M12 19v3\"><\/path>\n            <path d=\"M2 12h3\"><\/path>\n            <path d=\"M19 12h3\"><\/path>\n          <\/svg>\n        <\/div>\n\n        <div class=\"pragma-card pragma-card-keywords\">\n          <div class=\"pragma-keyword\">Estrategia<\/div>\n          <div class=\"pragma-keyword\">Claridad<\/div>\n          <div class=\"pragma-keyword\">Contenido<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Comunicaci\u00f3n corporativa B2B Comunicaci\u00f3n corporativa para empresas que necesitan claridad, criterio y resultados. Estrategia, narrativa y contenidos para explicar mejor lo que hace tu empresa, reforzar su posicionamiento y construir una presencia digital coherente, \u00fatil y medible. Hablemos \u2192 Ver servicios \u2192 01 Mensaje claro y alineado con negocio 02 Contenido estrat\u00e9gico para ganar autoridad&hellip;&nbsp;<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":100,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_joinchat":[],"footnotes":""},"class_list":["post-648","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/pages\/648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/comments?post=648"}],"version-history":[{"count":19,"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/pages\/648\/revisions"}],"predecessor-version":[{"id":668,"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/pages\/648\/revisions\/668"}],"wp:attachment":[{"href":"https:\/\/wearepragma.es\/en\/wp-json\/wp\/v2\/media?parent=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}