{"id":4336,"date":"2026-09-01T21:53:42","date_gmt":"2026-09-01T21:53:42","guid":{"rendered":"https:\/\/jpdirector.net\/?page_id=4336"},"modified":"2026-09-10T21:54:44","modified_gmt":"2026-09-10T21:54:44","slug":"quien-es-jp-director","status":"publish","type":"page","link":"https:\/\/jpdirector.net\/en\/quien-es-jp-director\/","title":{"rendered":"Who's JP?"},"content":{"rendered":"\n<div class=\"wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-f669173\" id=\"gspb_container-id-gsbp-f669173\">\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n<title>\u00bfQui\u00e9n es JP Director? Jorge P\u00e9rez, especialista en publicidad digital<\/title>\n<meta name=\"description\" content=\"Jorge P\u00e9rez (JP Director) es especialista en publicidad digital y estratega en tr\u00e1fico pago: m\u00e1s de 6 a\u00f1os, m\u00e1s de 20 millones USD invertidos en campa\u00f1as y m\u00e1s de 1.000 estudiantes formados.\">\n<link rel=\"canonical\" href=\"https:\/\/jpdirector.net\/quien-es-jp\/\">\n<meta name=\"robots\" content=\"index, follow, max-image-preview:large\">\n<meta name=\"theme-color\" content=\"#00041C\">\n\n<meta property=\"og:type\" content=\"profile\">\n<meta property=\"og:locale\" content=\"es_ES\">\n<meta property=\"og:site_name\" content=\"JP Director\">\n<meta property=\"og:title\" content=\"\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez\">\n<meta property=\"og:description\" content=\"Especialista en publicidad digital. Estrategias de ADS que producen clientes reales, no clics vac\u00edos.\">\n<meta property=\"og:url\" content=\"https:\/\/jpdirector.net\/quien-es-jp\/\">\n<meta name=\"twitter:card\" content=\"summary_large_image\">\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=Poppins:wght@400;500;600;700&amp;display=swap\">\n<style>\n\/* ============================================================================\n   JP DIRECTOR \u2014 \u00bfQui\u00e9n es JP?\n   Mismos tokens y mismos componentes de marca que la home. Lo propio de esta\n   plantilla:\n     \u00b7 6.3 el fondo del hero es un ecualizador tenue en el borde inferior:\n       motivo de audio y v\u00eddeo, acorde con que la pieza central sea un VSL.\n     \u00b7 6.6 las tres cifras van en tarjetas con volteo, la misma pieza de la\n       home: cada m\u00e9trica tiene n\u00famero delante y explicaci\u00f3n detr\u00e1s, que es\n       exactamente la forma de una carta de dos caras.\n     \u00b7 6.8 el cohete de la home, pero ascendiendo, porque acompa\u00f1a un relato de\n       progresi\u00f3n y no un listado.\n   ============================================================================ *\/\n\n\n\/* ============================================================================\n   1. VARIABLES\n   ============================================================================ *\/\n\n:root {\n\n  \/* --- Paleta de marca (\u00fanica fuente de color) --- *\/\n  --c-ink:    #00041C;\n  --c-navy:   #040D36;\n  --c-cyan:   #15E0FB;\n  --c-white:  #FFFEFE;\n\n  \/* --- Derivados: solo opacidad, mezcla y gradiente --- *\/\n  --c-text:      var(--c-white);\n  --c-dim:       color-mix(in srgb, var(--c-white) 66%, transparent);\n  --c-dimmer:    color-mix(in srgb, var(--c-white) 44%, transparent);\n  --c-faint:     color-mix(in srgb, var(--c-white) 22%, transparent);\n\n  --c-line:      color-mix(in srgb, var(--c-cyan) 16%, transparent);\n  --c-line-hi:   color-mix(in srgb, var(--c-cyan) 38%, transparent);\n  --c-line-soft: color-mix(in srgb, var(--c-white) 9%,  transparent);\n  --c-cyan-dim:  color-mix(in srgb, var(--c-cyan) 52%, transparent);\n\n  --c-panel:     color-mix(in srgb, var(--c-cyan) 4%,  var(--c-navy));\n  --c-panel-hi:  color-mix(in srgb, var(--c-cyan) 9%,  var(--c-navy));\n  --c-glow:      color-mix(in srgb, var(--c-cyan) 26%, transparent);\n  --c-glow-soft: color-mix(in srgb, var(--c-cyan) 10%, transparent);\n\n  --c-on-light:      var(--c-navy);\n  --c-on-light-dim:  color-mix(in srgb, var(--c-navy) 66%, var(--c-white));\n  --c-on-light-line: color-mix(in srgb, var(--c-navy) 14%, var(--c-white));\n\n  \/* --- Tipograf\u00eda --- *\/\n  --f-sans: \"Poppins\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --f-mono: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n\n  --t-xs:   0.6875rem;\n  --t-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.9rem);\n  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);\n  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);\n  --t-lg:   clamp(1.25rem, 1.12rem + 0.55vw, 1.6rem);\n  --t-xl:   clamp(1.5rem, 1.24rem + 1.1vw, 2.25rem);\n  --t-2xl:  clamp(2rem, 1.5rem + 2.2vw, 3.4rem);\n  --t-3xl:  clamp(2.5rem, 1.6rem + 4vw, 5rem);\n\n  --lh-tight: 1.04;\n  --lh-head:  1.14;\n  --lh-body:  1.65;\n\n  \/* --- Espacio y layout --- *\/\n  --s-1: 0.25rem;\n  --s-2: 0.5rem;\n  --s-3: 0.75rem;\n  --s-4: 1rem;\n  --s-5: 1.5rem;\n  --s-6: 2rem;\n  --s-7: 2.5rem;\n  --s-8: 3rem;\n  --s-9: 4rem;\n\n  --maxw: 1240px;\n  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);\n  --sec-y: clamp(4.5rem, 3rem + 6vw, 9rem);\n  --hdr-h: 76px;\n\n  --r-sm: 4px;\n  --r-md: 10px;\n  --r-lg: 20px;\n  --r-full: 999px;\n\n  \/* --- Movimiento --- *\/\n  --e-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n  --d-fast: 0.22s;\n  --d-mid: 0.45s;\n  --d-slow: 0.8s;\n}\n\n\n\/* ============================================================================\n   2. RESET\n   ============================================================================ *\/\n\n*, *::before, *::after { box-sizing: border-box; }\n\n* { margin: 0; padding: 0; }\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  scroll-behavior: smooth;\n  scroll-padding-top: calc(var(--hdr-h) + 1rem);\n  overflow-x: clip;\n}\n\nbody {\n  min-height: 100vh;\n  background: var(--c-ink);\n  color: var(--c-text);\n  font-family: var(--f-sans);\n  font-size: var(--t-base);\n  line-height: var(--lh-body);\n  font-weight: 400;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  overflow-x: clip;\n}\n\nimg, video, svg { display: block; max-width: 100%; height: auto; }\n\nul, ol { list-style: none; }\n\na { color: inherit; text-decoration: none; }\n\nbutton, input, label, summary { font: inherit; color: inherit; }\n\nh1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-head); text-wrap: balance; }\n\np { text-wrap: pretty; }\n\n:focus-visible {\n  outline: 2px solid var(--c-cyan);\n  outline-offset: 3px;\n  border-radius: var(--r-sm);\n}\n\n\n\/* ============================================================================\n   2.5 BLINDAJE FRENTE AL TEMA DE WORDPRESS\n   ----------------------------------------------------------------------------\n   El reset universal tiene especificidad 0-0-0 y lo gana cualquier regla de\n   tipo del tema: p { margin-bottom: 1.6em }, ul { padding-left: 40px }...\n   El espaciado vertical se resuelve con gap, as\u00ed que se anulan todos los\n   m\u00e1rgenes. Salvedades, ambas fuera de estas listas: .sec__head y .vsl__cap,\n   que s\u00ed llevan margen propio.\n   ============================================================================ *\/\n\n\/* --- A. Contenedores de lista: es donde el tema mete la sangr\u00eda de 40px --- *\/\n.metrics, .faq__list {\n  list-style: none !important;\n  padding-inline-start: 0 !important;\n  margin: 0 !important;\n}\n\n\/* --- B. Todo lo que se apila con gap: m\u00e1rgenes a cero, incluidos los hijos\n       directos de cada caja, porque el hueco lo pone el contenedor --- *\/\n.stack > *,\n.vsl, .shot,\n.flip, .flip__face > *,\n.story__body > *,\n.faq__item, .faq__a, .faq__a > * {\n  margin: 0 !important;\n}\n\n\n\/* ============================================================================\n   3. BASE\n   ============================================================================ *\/\n\n.wrap {\n  width: 100%;\n  max-width: var(--maxw);\n  margin-inline: auto;\n  padding-inline: var(--gutter);\n}\n\n.vh {\n  position: absolute;\n  width: 1px; height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n\/* --- Pila vertical ---\n   Todo el ritmo vertical sale de aqu\u00ed: un solo sitio que ajustar y ning\u00fan\n   p\u00e1rrafo con margen propio que el tema pueda pisar. *\/\n.stack {\n  display: grid;\n  gap: var(--gap, var(--s-5));\n  justify-items: start;\n  align-content: start;\n}\n.stack--tight  { --gap: var(--s-4); }\n.stack--loose  { --gap: var(--s-6); }\n.stack--center { justify-items: center; text-align: center; }\n\n\n\/* ============================================================================\n   4. TYPOGRAPHY\n   ============================================================================ *\/\n\n.mono {\n  font-family: var(--f-mono);\n  font-size: var(--t-xs);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  font-weight: 400;\n}\n\n\/* Sin margen: el hueco lo pone el gap de .stack *\/\n.eyebrow {\n  font-family: var(--f-mono);\n  font-size: var(--t-xs);\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--c-cyan);\n}\n.eyebrow--dark { color: var(--c-navy); }\n\nem { font-style: normal; color: var(--c-cyan); }\n\n\/* --- Palabra con aurora ---------------------------------------------------\n   El texto va en blanco y encima se apilan manchas de color con\n   mix-blend-mode: darken. Darken toma el canal m\u00e1s oscuro: sobre el blanco\n   gana la mancha, sobre el fondo profundo gana el fondo, as\u00ed que el color solo\n   vive dentro de las letras. Pide ocho letras o m\u00e1s: sobre una palabra corta\n   siempre hay una mancha cubri\u00e9ndola entera y el efecto se aplana.\n   -------------------------------------------------------------------------- *\/\n.aurora-word {\n  position: relative;\n  display: inline-block;\n  color: var(--c-white);\n  vertical-align: baseline;\n  white-space: nowrap;\n  padding-block: 0.06em 0.24em;\n  margin-block: -0.06em -0.24em;\n}\n\n.aurora-word::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0.99em;\n  z-index: 3;\n  height: 0.055em;\n  border-radius: 999px;\n  background:\n    linear-gradient(90deg, transparent, var(--c-cyan), transparent) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--c-cyan) 26%, transparent) 0 100%) no-repeat;\n  background-size: 34% 100%, 100% 100%;\n  animation: underline-scan 3.6s var(--e-in-out) infinite;\n}\n\n.aurora {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  mix-blend-mode: darken;\n  pointer-events: none;\n}\n\n.aurora__item {\n  position: absolute;\n  top: -55%;\n  left: 0;\n  width: 13rem;\n  height: 13rem;\n  border-radius: 37% 29% 27% 27% \/ 28% 25% 41% 37%;\n  filter: blur(1.1rem);\n  mix-blend-mode: overlay;\n  will-change: transform;\n}\n\n.aurora__item:nth-of-type(1) {\n  background-color: var(--c-cyan);\n  animation: aurora-border 7s var(--e-in-out) infinite,\n             aurora-1 11s var(--e-in-out) infinite alternate;\n}\n.aurora__item:nth-of-type(2) {\n  background-color: color-mix(in srgb, var(--c-cyan) 72%, var(--c-white));\n  animation: aurora-border 7s var(--e-in-out) infinite,\n             aurora-2 14s var(--e-in-out) infinite alternate;\n}\n.aurora__item:nth-of-type(3) {\n  background-color: color-mix(in srgb, var(--c-cyan) 62%, var(--c-navy));\n  animation: aurora-border 7s var(--e-in-out) infinite,\n             aurora-3 9s var(--e-in-out) infinite alternate;\n}\n.aurora__item:nth-of-type(4) {\n  background-color: color-mix(in srgb, var(--c-cyan) 88%, var(--c-navy));\n  animation: aurora-border 7s var(--e-in-out) infinite,\n             aurora-4 17s var(--e-in-out) infinite alternate;\n}\n.aurora--b .aurora__item { animation-delay: -3s, -5s; }\n\n\n\/* ============================================================================\n   5. LAYOUT \u2014 secciones y fondos\n   ============================================================================ *\/\n\n.hero  { background: var(--c-ink); }\n.nums  { background: var(--c-navy); padding-block: var(--sec-y); border-block: 1px solid var(--c-line-soft); }\n\/* isolation para la aurora; overflow-x: clip y view-timeline para el cohete *\/\n.story { background: var(--c-ink);  padding-block: var(--sec-y); position: relative;\n         overflow-x: clip; isolation: isolate; view-timeline: --story block; }\n.faq   { background: var(--c-white); color: var(--c-on-light); padding-block: var(--sec-y); }\n.end   { background: var(--c-navy); padding-block: var(--sec-y); position: relative; overflow: hidden; }\n\n\/* Cabecera de secci\u00f3n. Junto a .vsl__cap, lo \u00fanico con margen propio. *\/\n.sec__head { max-width: 64ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }\n.sec__title { font-size: var(--t-2xl); letter-spacing: -0.02em; }\n.sec__lead { color: var(--c-dim); max-width: 60ch; }\n.sec__lead--dark { color: var(--c-on-light-dim); }\n\n.sec__mark {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.8em;\n  color: var(--c-cyan);\n  letter-spacing: 0.16em;\n}\n.sec__mark::after {\n  content: \"\";\n  width: clamp(28px, 4vw, 56px);\n  height: 1px;\n  background: currentColor;\n  opacity: 0.5;\n}\n.sec__mark--dark { color: var(--c-navy); }\n\n.hero__copy, .story__copy { min-width: 0; }\n\n\n\/* ============================================================================\n   6. COMPONENTS\n   ============================================================================ *\/\n\n\/* ---------- 6.1 Botones ---------- *\/\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.6em;\n  padding: 0.95em 1.9em;\n  background: var(--c-cyan);\n  color: var(--c-ink);\n  font-weight: 600;\n  font-size: var(--t-sm);\n  letter-spacing: 0.01em;\n  border-radius: var(--r-full);\n  border: 1px solid var(--c-cyan);\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-mid) var(--e-out);\n  animation: btn-bounce 2.4s var(--e-in-out) infinite;\n}\n.btn::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: var(--c-white);\n  transform: translateY(101%);\n  transition: transform var(--d-mid) var(--e-out);\n}\n.btn:hover, .btn:focus-visible {\n  transform: translateY(-2px);\n  box-shadow: 0 10px 34px var(--c-glow);\n  animation-play-state: paused;\n}\n.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }\n.btn:active { transform: translateY(0); }\n\n\/* Latido de color en el mismo comp\u00e1s de 2.4s del rebote. Se excluyen las\n   variantes que definen su propio fondo: una animaci\u00f3n de background-color\n   gana a las declaraciones normales sea cual sea la especificidad. *\/\n.btn:not(.btn--ghost):not(.btn--dark) {\n  animation: btn-bounce 2.4s var(--e-in-out) infinite,\n             btn-tint   2.4s var(--e-in-out) infinite;\n}\n.btn:not(.btn--ghost):not(.btn--dark):hover,\n.btn:not(.btn--ghost):not(.btn--dark):focus-visible {\n  animation: none;\n  background-color: var(--c-cyan);\n  border-color: var(--c-cyan);\n}\n\n.btn--ghost {\n  background: transparent;\n  color: var(--c-white);\n  border-color: var(--c-line-hi);\n}\n.btn--ghost::before { background: var(--c-white); }\n.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--c-ink); border-color: var(--c-cyan); }\n\n.btn--dark {\n  background: var(--c-navy);\n  color: var(--c-white);\n  border-color: var(--c-navy);\n}\n.btn--dark::before { background: var(--c-ink); }\n.btn--dark:hover, .btn--dark:focus-visible { color: var(--c-cyan); box-shadow: none; }\n\n.btn--lg { padding: 1.15em 2.6em; font-size: var(--t-md); }\n\n.btn--arrow { padding-left: 1.5em; }\n.btn__arrow {\n  width: 1.15em;\n  height: 1.15em;\n  flex: none;\n  display: grid;\n  place-items: center;\n  margin-right: -0.15em;\n  animation: nudge 1.7s var(--e-in-out) infinite;\n}\n.btn__arrow svg { width: 100%; height: 100%; }\n.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { animation-play-state: paused; transform: translateX(4px); }\n\n\n\/* ---------- 6.2 Panel VSL ----------\n   Misma pieza que en la home, incluido el \u00fanico script del documento: activar\n   sonido, rebobinar y reproducir son estados del elemento <video> que CSS no\n   puede tocar.\n   -------------------------------------------------------------------------- *\/\n\n.vsl { position: relative; }\n\n.vsl__frame {\n  position: relative;\n  padding: 14px;\n  background: linear-gradient(160deg, var(--c-panel-hi), var(--c-navy) 60%);\n  border: 1px solid var(--c-line);\n  border-radius: var(--r-lg);\n  box-shadow: 0 30px 90px color-mix(in srgb, var(--c-ink) 80%, transparent);\n}\n\n.vsl__screen {\n  position: relative;\n  aspect-ratio: 16 \/ 9;\n  border-radius: var(--r-md);\n  overflow: hidden;\n  background:\n    radial-gradient(90% 70% at 50% 40%, var(--c-glow-soft), transparent 70%),\n    var(--c-ink);\n  border: 1px solid var(--c-line-soft);\n}\n\n.vsl__media { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n\/* Capa de activaci\u00f3n de sonido. Cubre el v\u00eddeo entero: cualquier clic sirve. *\/\n.vsl__unmute {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--s-4);\n  padding: var(--s-4);\n  border: 0;\n  cursor: pointer;\n  font-family: inherit;\n  color: var(--c-white);\n  background: linear-gradient(\n    to bottom,\n    color-mix(in srgb, var(--c-ink) 28%, transparent),\n    color-mix(in srgb, var(--c-ink) 74%, transparent));\n  transition: background var(--d-mid) var(--e-out);\n}\n.vsl__unmute[hidden] { display: none; }\n.vsl__unmute:hover { background: color-mix(in srgb, var(--c-ink) 40%, transparent); }\n\n.vsl__unmute__icon {\n  width: clamp(56px, 4rem + 2vw, 78px);\n  aspect-ratio: 1;\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  background: var(--c-cyan);\n  color: var(--c-ink);\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-cyan) 50%, transparent);\n  animation: ring 2.8s var(--e-out) infinite;\n  transition: transform var(--d-fast) var(--e-out);\n}\n.vsl__unmute__icon svg { width: 46%; height: 46%; }\n\n.vsl__unmute__text {\n  font-size: var(--t-md);\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  text-align: center;\n  padding: 0.6em 1.15em;\n  border-radius: var(--r-full);\n  background: color-mix(in srgb, var(--c-ink) 68%, transparent);\n  border: 1px solid var(--c-line);\n  backdrop-filter: blur(8px);\n}\n\n.vsl__unmute:hover .vsl__unmute__icon,\n.vsl__unmute:focus-visible .vsl__unmute__icon { transform: scale(1.07); }\n\n.vsl__scan {\n  position: absolute;\n  left: 0; right: 0; top: 0;\n  height: 30%;\n  background: linear-gradient(to bottom, transparent, var(--c-glow-soft), transparent);\n  animation: scan 5.5s var(--e-in-out) infinite;\n  pointer-events: none;\n}\n\n.vsl__bracket {\n  position: absolute;\n  width: 20px; height: 20px;\n  border: 1.5px solid var(--c-cyan);\n  opacity: 0.85;\n}\n.vsl__bracket--tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; border-radius: var(--r-lg) 0 0 0; }\n.vsl__bracket--tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; border-radius: 0 var(--r-lg) 0 0; }\n.vsl__bracket--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; border-radius: 0 0 0 var(--r-lg); }\n.vsl__bracket--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; border-radius: 0 0 var(--r-lg) 0; }\n\n.vsl__rec {\n  position: absolute;\n  top: 26px; left: 26px;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.35em 0.75em;\n  background: color-mix(in srgb, var(--c-ink) 72%, transparent);\n  border: 1px solid var(--c-line);\n  border-radius: var(--r-full);\n  color: var(--c-cyan);\n  backdrop-filter: blur(6px);\n}\n.vsl__dot {\n  width: 6px; height: 6px;\n  border-radius: 50%;\n  background: var(--c-cyan);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.vsl__cap {\n  margin-top: var(--s-4);\n  color: var(--c-dimmer);\n  text-align: center;\n  letter-spacing: 0.08em;\n}\n\n\n\/* ---------- 6.2b Marco de imagen ----------\n   Mismo lenguaje que el panel del VSL, pero para una imagen fija: sin capa de\n   sonido, sin barrido y sin insignia de grabaci\u00f3n.\n   -------------------------------------------------------------------------- *\/\n\n.shot { position: relative; }\n\n.shot__frame {\n  position: relative;\n  padding: 14px;\n  background: linear-gradient(160deg, var(--c-panel-hi), var(--c-navy) 60%);\n  border: 1px solid var(--c-line);\n  border-radius: var(--r-lg);\n  box-shadow: 0 30px 90px color-mix(in srgb, var(--c-ink) 80%, transparent);\n}\n\n.shot__screen {\n  position: relative;\n  aspect-ratio: var(--ar, 16 \/ 9);\n  border-radius: var(--r-md);\n  overflow: hidden;\n  border: 1px solid var(--c-line-soft);\n  background: var(--c-ink);\n}\n\n\/* object-fit: cover con la proporci\u00f3n fijada arriba, para que el recorte lo\n   decida el marco y no las dimensiones del archivo *\/\n.shot__img { width: 100%; height: 100%; object-fit: cover; }\n\n.shot__b {\n  position: absolute;\n  width: 20px; height: 20px;\n  border: 1.5px solid var(--c-cyan);\n  opacity: 0.85;\n}\n.shot__b--tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; border-radius: var(--r-lg) 0 0 0; }\n.shot__b--tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; border-radius: 0 var(--r-lg) 0 0; }\n.shot__b--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; border-radius: 0 0 0 var(--r-lg); }\n.shot__b--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; border-radius: 0 0 var(--r-lg) 0; }\n\n\n\/* ---------- 6.3 Hero y su ecualizador ----------\n   La pieza central es un VSL, as\u00ed que el fondo va en clave de audio: una fila\n   de barras muy tenues en el borde inferior, con alturas y ritmos distintos.\n   Opacidad baja a prop\u00f3sito: acompa\u00f1a, no compite con el v\u00eddeo.\n   -------------------------------------------------------------------------- *\/\n\n.hero {\n  position: relative;\n  padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem) clamp(4rem, 2rem + 6vw, 7rem);\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }\n\n.hero__bg::before {\n  content: \"\";\n  position: absolute;\n  inset: -25%;\n  background:\n    radial-gradient(40% 44% at 72% 22%, color-mix(in srgb, var(--c-cyan) 17%, transparent), transparent 70%),\n    radial-gradient(44% 48% at 14% 84%, color-mix(in srgb, var(--c-cyan) 10%, transparent), transparent 72%);\n  filter: blur(14px);\n}\n\n.hero__eq {\n  position: absolute;\n  left: 0; right: 0; bottom: 0;\n  height: clamp(90px, 16vw, 180px);\n  display: flex;\n  align-items: flex-end;\n  gap: clamp(6px, 1.1vw, 12px);\n  padding-inline: var(--gutter);\n  opacity: 0.5;\n  mask-image: linear-gradient(to top, #000 10%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 100%);\n}\n.hero__eq i {\n  flex: 1;\n  border-radius: 2px 2px 0 0;\n  background: linear-gradient(to top, var(--c-cyan), transparent);\n  transform-origin: bottom;\n  animation: eq var(--dur, 3s) var(--e-in-out) infinite alternate;\n  will-change: transform;\n}\n\n\n.hero__grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);\n  align-items: center;\n}\n\n.hero__hi { color: var(--c-cyan); }\n\n.hero__title {\n  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.9rem);\n  font-weight: 600;\n  letter-spacing: -0.035em;\n  line-height: var(--lh-tight);\n}\n\n.hero__role {\n  font-size: var(--t-xl);\n  font-weight: 500;\n  letter-spacing: -0.02em;\n  line-height: var(--lh-head);\n  color: var(--c-white);\n  max-width: 26ch;\n  text-wrap: balance;\n}\n\n.hero__lead { max-width: 54ch; color: var(--c-dim); font-size: var(--t-md); }\n\n.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }\n\n\n\/* ---------- 6.6 Cifras en tarjetas con volteo ----------\n   La misma pieza que las tarjetas de servicio de la home. Aqu\u00ed encaja sola:\n   cada m\u00e9trica ya ven\u00eda con n\u00famero delante y explicaci\u00f3n detr\u00e1s.\n\n   La casilla guarda el estado y una etiqueta cubre la tarjeta. En t\u00e1ctil el\n   toque va a la etiqueta, que es lo que los navegadores m\u00f3viles activan de\n   forma fiable; un input transparente con appearance:none se comporta de\n   manera irregular en iOS.\n   -------------------------------------------------------------------------- *\/\n\n.metrics {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--s-4);\n}\n\n.flip {\n  position: relative;\n  perspective: 1400px;\n}\n\n.flip__switch {\n  position: absolute;\n  top: 0; left: 0;\n  width: 1px; height: 1px;\n  opacity: 0;\n  pointer-events: none;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.flip__tap {\n  display: none;\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n\/* El giro por estado no depende de ninguna media query: si la detecci\u00f3n de\n   hover del dispositivo falla, el toque sigue funcionando igual. *\/\n.flip__switch:checked ~ .flip__inner { transform: rotateY(180deg); }\n\/* Ya girada, la etiqueta se retira para que el reverso reciba el toque *\/\n.flip__switch:checked ~ .flip__tap { display: none; }\n\n.flip__switch:focus-visible ~ .flip__inner {\n  outline: 2px solid var(--c-cyan);\n  outline-offset: 3px;\n  border-radius: var(--r-md);\n}\n\n.flip__inner {\n  display: grid;\n  transform-style: preserve-3d;\n  transition: transform 0.75s cubic-bezier(0.2, 0.72, 0.16, 1);\n  min-height: clamp(230px, 20vw, 280px);\n  \/* La rejilla estira la tarjeta al alto de la fila, pero el interior no\n     heredaba ese alto: sin esto cada tarjeta acababa a una altura distinta *\/\n  height: 100%;\n}\n\n.flip__face {\n  grid-area: 1 \/ 1;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);\n  border: 1px solid var(--c-line);\n  border-radius: var(--r-md);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n  transition: border-color var(--d-mid) var(--e-out),\n              box-shadow var(--d-mid) var(--e-out),\n              transform var(--d-mid) var(--e-out);\n}\n\n.flip__face--front {\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  background: linear-gradient(180deg, var(--c-panel-hi), var(--c-panel));\n  justify-content: space-between;\n  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--c-white) 6%, transparent) inset,\n              0 10px 24px -18px rgba(0, 0, 0, 0.9);\n}\n\n.flip__face--back {\n  transform: rotateY(180deg);\n  background:\n    linear-gradient(150deg, var(--c-glow-soft), transparent 60%),\n    var(--c-panel-hi);\n  border-color: var(--c-cyan-dim);\n  justify-content: space-between;\n}\n\n\/* Riel de acento en el canto izquierdo de la cara frontal *\/\n.flip__face--front::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0;\n  width: 3px; height: 100%;\n  background: var(--c-cyan);\n  border-radius: var(--r-md) 0 0 var(--r-md);\n  transform: scaleY(0.001);\n  transform-origin: bottom;\n  transition: transform var(--d-mid) var(--e-out);\n}\n\n\/* Glifo de volteo en la esquina: se\u00f1a universal de \"esto gira\" *\/\n.flip__glyph {\n  position: absolute;\n  top: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);\n  right: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);\n  width: 34px; height: 34px;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--c-line-hi);\n  border-radius: 50%;\n  color: var(--c-cyan);\n  background: color-mix(in srgb, var(--c-cyan) 8%, transparent);\n  transition: background var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);\n  pointer-events: none;\n}\n.flip__glyph svg { width: 17px; height: 17px; }\n\n.flip__num {\n  font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: -0.05em;\n  color: var(--c-white);\n  font-variant-numeric: tabular-nums;\n  padding-right: 2.5rem;\n}\n.flip__num span { color: var(--c-cyan); }\n\n.flip__label { color: var(--c-dimmer); letter-spacing: 0.1em; line-height: 1.5; }\n\n.flip__hint {\n  color: var(--c-cyan);\n  letter-spacing: 0.14em;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n  transition: gap var(--d-mid) var(--e-out);\n}\n.flip__hint::after {\n  content: \"\";\n  width: 14px; height: 1px;\n  background: currentColor;\n  transition: width var(--d-mid) var(--e-out);\n}\n\n.flip__tag  { color: var(--c-cyan); letter-spacing: 0.16em; }\n.flip__text { color: var(--c-dim); font-size: var(--t-sm); }\n\n\/* --- Escritorio: el volteo lo dispara el puntero o el foco --- *\/\n@media (hover: hover) {\n  .flip:hover .flip__inner,\n  .flip:focus-within .flip__inner { transform: rotateY(180deg); }\n\n  .flip:hover .flip__face--front {\n    transform: translateY(-4px);\n    border-color: var(--c-cyan-dim);\n    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--c-white) 8%, transparent) inset,\n                0 22px 40px -24px rgba(0, 0, 0, 0.95);\n  }\n  .flip:hover .flip__face--front::before { transform: scaleY(1); transform-origin: top; }\n  .flip:hover .flip__glyph { background: var(--c-cyan); color: var(--c-ink); border-color: var(--c-cyan); transform: rotate(180deg); }\n  .flip:hover .flip__hint { gap: 0.95em; }\n  .flip:hover .flip__hint::after { width: 26px; }\n\n  .flip__close { display: none; }\n}\n\n\/* --- T\u00e1ctil: aparece la zona de toque y el bot\u00f3n de cierre --- *\/\n@media (hover: none) {\n  .flip__tap { display: block; }\n\n  .flip__close {\n    position: absolute;\n    top: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);\n    right: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);\n    z-index: 5;\n    width: 38px; height: 38px;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--c-line-hi);\n    border-radius: 50%;\n    background: var(--c-panel);\n    color: var(--c-cyan);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .flip__close svg { width: 15px; height: 15px; }\n\n  .flip__hint::before { content: \"Toca para \"; }\n  .flip__glyph { transform: none; }\n}\n\n\n\/* ---------- 6.7 Mi historia ---------- *\/\n\n.story__grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);\n  align-items: start;\n  \/* Canaleta a la derecha en m\u00f3vil: el carril del cohete, para que no pise el\n     texto. Se anula desde 1180px, donde el cohete vive fuera del wrap. *\/\n  margin-right: 44px;\n}\n@media (min-width: 1180px) { .story__grid { margin-right: 0; } }\n\n.story__body { display: grid; gap: var(--s-5); max-width: 62ch; }\n\/* Dentro de la rejilla el hueco lo pone el gap de .story__grid, as\u00ed que la\n   cabecera suelta su margen inferior habitual *\/\n.story__grid .sec__head { margin-bottom: 0; }\n\n\/* Columna izquierda: titular y foto como un solo bloque *\/\n.story__side {\n  display: grid;\n  gap: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);\n  align-content: start;\n  min-width: 0;\n}\n.story__body p { color: var(--c-dim); }\n\/* La primera frase carga con el arranque del relato, as\u00ed que va un punto por\n   encima del resto del cuerpo *\/\n.story__body p:first-child {\n  font-size: var(--t-md);\n  color: var(--c-text);\n}\n\n.story__pull {\n  display: grid;\n  gap: var(--s-3);\n  padding: clamp(1.4rem, 1rem + 1.3vw, 2rem);\n  border: 1px solid var(--c-line);\n  border-left: 3px solid var(--c-cyan);\n  border-radius: var(--r-md);\n  background: linear-gradient(150deg, var(--c-glow-soft), transparent 60%), var(--c-panel);\n}\n.story__pull p { color: var(--c-dim); font-size: var(--t-sm); }\n.story__tag { color: var(--c-cyan); letter-spacing: 0.16em; }\n\n\n\/* ---------- 6.8 Cohete de la secci\u00f3n de historia ----------\n   El mismo cohete de la home, pero ascendiendo: all\u00ed baja recorriendo un\n   cat\u00e1logo, aqu\u00ed acompa\u00f1a un relato de progresi\u00f3n. El giro se hace dentro del\n   SVG, con un grupo volteado, y no con CSS: as\u00ed el rotate del scroll no se\n   compone al rev\u00e9s y la estela sigue saliendo por la cola.\n   -------------------------------------------------------------------------- *\/\n\n.rocket {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  \/* M\u00f3vil: centrado en la canaleta de 44px abierta a la derecha del texto *\/\n  right: max(2px, calc(var(--gutter) - 8px));\n  width: 40px;\n  display: block;\n  pointer-events: none;\n  opacity: 0.72;\n}\n\n.rocket__ship {\n  position: absolute;\n  left: 0;\n  width: 40px;\n  \/* Sin soporte de scroll timeline se queda quieto a media secci\u00f3n *\/\n  top: 42%;\n  rotate: 3deg;\n  filter: drop-shadow(0 0 16px var(--c-glow));\n  will-change: top;\n}\n.rocket__ship svg { width: 100%; height: auto; display: block; }\n\n.rocket__hull  { fill: var(--c-navy); stroke: var(--c-cyan); stroke-width: 2; stroke-linejoin: round; }\n.rocket__fin   { fill: color-mix(in srgb, var(--c-cyan) 22%, var(--c-navy)); stroke: var(--c-cyan); stroke-width: 2; stroke-linejoin: round; }\n.rocket__glass { fill: var(--c-ink); stroke: var(--c-cyan); stroke-width: 2; }\n.rocket__pupil { fill: var(--c-cyan); }\n\n.rocket__flame {\n  fill: var(--c-cyan);\n  transform-box: fill-box;\n  transform-origin: bottom center;\n  animation: thrust 0.4s var(--e-in-out) infinite alternate;\n}\n\n\/* Desde 1180px hay margen lateral de sobra: cohete m\u00e1s grande y separado *\/\n@media (min-width: 1180px) {\n  .rocket {\n    right: clamp(0.5rem, calc((100vw - var(--maxw)) \/ 4), 4.5rem);\n    width: 56px;\n    opacity: 1;\n  }\n  .rocket__ship { width: 56px; filter: drop-shadow(0 0 22px var(--c-glow)); }\n}\n\n@supports (animation-timeline: view()) {\n  .rocket__ship {\n    animation: climb linear both;\n    animation-timeline: --story;\n    animation-range: cover 6% cover 94%;\n  }\n  \/* top en % se resuelve contra el ra\u00edl, que mide toda la secci\u00f3n. Se resta el\n     alto del cohete para que despegue desde dentro y no desde fuera del marco. *\/\n  @keyframes climb {\n    from { top: calc(100% - 7rem); rotate: 7deg; }\n    to   { top: 0;                 rotate: -7deg; }\n  }\n}\n\n\n\/* ---------- 6.9 Preguntas frecuentes (fondo claro) ----------\n   <details> nativo: abre y cierra sin JavaScript y llega accesible de f\u00e1brica *\/\n\n.faq .sec__title { color: var(--c-on-light); }\n\n.faq__list { border-top: 1px solid var(--c-on-light-line); max-width: 84ch; }\n.faq__item { border-bottom: 1px solid var(--c-on-light-line); }\n\n.faq__q {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--s-5);\n  padding-block: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);\n  cursor: pointer;\n  font-size: var(--t-md);\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  color: var(--c-on-light-dim);\n  list-style: none;\n  transition: color var(--d-fast) var(--e-out), padding-left var(--d-mid) var(--e-out);\n}\n\/* Safari sigue pintando su tri\u00e1ngulo si no se le quita por separado *\/\n.faq__q::-webkit-details-marker { display: none; }\n.faq__q:hover { color: var(--c-on-light); padding-left: var(--s-3); }\n.faq__item[open] .faq__q { color: var(--c-on-light); }\n\n.faq__sign {\n  flex: none;\n  width: 30px; height: 30px;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--c-on-light-line);\n  border-radius: 50%;\n  color: var(--c-on-light);\n  background: color-mix(in srgb, var(--c-cyan) 16%, transparent);\n  transition: transform var(--d-mid) var(--e-out);\n}\n.faq__sign svg { width: 14px; height: 14px; }\n\/* De + a \u00d7: el cambio de estado se lee en el giro, no solo en la forma final *\/\n.faq__item[open] .faq__sign { transform: rotate(135deg); }\n\n.faq__a {\n  display: grid;\n  gap: var(--s-4);\n  color: var(--c-on-light-dim);\n  font-size: var(--t-sm);\n  max-width: 70ch;\n  padding-bottom: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);\n  padding-right: calc(30px + var(--s-5));\n}\n\n\n\/* ---------- 6.10 CTA final ---------- *\/\n\n.end::before {\n  content: \"\";\n  position: absolute;\n  bottom: -55%; left: 50%;\n  translate: -50% 0;\n  width: min(1100px, 130vw);\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: radial-gradient(circle, var(--c-glow-soft), transparent 62%);\n  pointer-events: none;\n}\n\n.end__inner { position: relative; justify-items: center; text-align: center; }\n.end__title { font-size: var(--t-3xl); letter-spacing: -0.04em; line-height: var(--lh-tight); }\n.end__lead { color: var(--c-dim); max-width: 50ch; font-size: var(--t-md); }\n.end__note { color: var(--c-faint); letter-spacing: 0.12em; }\n\n\n\/* ============================================================================\n   7. ANIMATIONS\n   ============================================================================ *\/\n\n\/* Ecualizador: cada barra escala desde su base. Las duraciones y las alturas\n   se reparten en el marcado para que no laten al un\u00edsono. *\/\n@keyframes eq {\n  from { transform: scaleY(0.18); }\n  to   { transform: scaleY(1); }\n}\n\n@keyframes thrust {\n  from { transform: scaleY(0.6) scaleX(0.85); opacity: 0.55; }\n  to   { transform: scaleY(1.15) scaleX(1);   opacity: 1; }\n}\n\n@keyframes scan {\n  0%   { transform: translateY(-110%); }\n  100% { transform: translateY(430%); }\n}\n\n@keyframes pulse {\n  0%, 100% { box-shadow: 0 0 0 0 var(--c-glow); opacity: 1; }\n  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.55; }\n}\n\n@keyframes ring {\n  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-cyan) 50%, transparent); }\n  70%  { box-shadow: 0 0 0 18px transparent; }\n  100% { box-shadow: 0 0 0 0 transparent; }\n}\n\n@keyframes underline-scan {\n  0%   { background-position: -45% 0, 0 0; }\n  100% { background-position: 145% 0, 0 0; }\n}\n\n@keyframes aurora-border {\n  0%   { border-radius: 37% 29% 27% 27% \/ 28% 25% 41% 37%; }\n  25%  { border-radius: 47% 29% 39% 49% \/ 61% 19% 66% 26%; }\n  50%  { border-radius: 57% 23% 47% 72% \/ 63% 17% 66% 33%; }\n  75%  { border-radius: 28% 49% 29% 100% \/ 93% 20% 64% 25%; }\n  100% { border-radius: 37% 29% 27% 27% \/ 28% 25% 41% 37%; }\n}\n\n@keyframes aurora-1 {\n  0%   { transform: translate(-55%, -10%); }\n  50%  { transform: translate(45%, 10%); }\n  100% { transform: translate(140%, -6%); }\n}\n@keyframes aurora-2 {\n  0%   { transform: translate(130%, 8%); }\n  50%  { transform: translate(25%, -11%); }\n  100% { transform: translate(-50%, 4%); }\n}\n@keyframes aurora-3 {\n  0%   { transform: translate(35%, -12%); }\n  50%  { transform: translate(135%, 9%); }\n  100% { transform: translate(-25%, -4%); }\n}\n@keyframes aurora-4 {\n  0%   { transform: translate(95%, 6%); }\n  50%  { transform: translate(-45%, -9%); }\n  100% { transform: translate(115%, 11%); }\n}\n\n@keyframes nudge {\n  0%, 100% { transform: translateX(0); opacity: 0.75; }\n  50%      { transform: translateX(5px); opacity: 1; }\n}\n\n@keyframes btn-bounce {\n  0%, 40%, 100% { transform: translateY(0); }\n  20%           { transform: translateY(-5px); }\n  30%           { transform: translateY(-2px); }\n}\n\n@keyframes btn-tint {\n  0%, 40%, 100% {\n    background-color: var(--c-cyan);\n    border-color: var(--c-cyan);\n    box-shadow: 0 0 0 0 transparent;\n  }\n  20% {\n    background-color: color-mix(in srgb, var(--c-cyan) 58%, var(--c-white));\n    border-color:     color-mix(in srgb, var(--c-cyan) 58%, var(--c-white));\n    box-shadow: 0 8px 26px var(--c-glow);\n  }\n}\n\n\/* --- Mejora progresiva: entradas ligadas al scroll --- *\/\n@supports (animation-timeline: view()) {\n  .flip, .story__pull {\n    animation: rise linear both;\n    animation-timeline: view();\n    animation-range: entry 0% cover 32%;\n  }\n  @keyframes rise {\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n}\n\n\n\/* ============================================================================\n   8. RESPONSIVE\n   ============================================================================ *\/\n\n@media (min-width: 640px) {\n  .metrics { grid-template-columns: repeat(2, 1fr); }\n}\n\n@media (min-width: 960px) {\n  .hero__grid  { grid-template-columns: 1fr 1fr; }\n  .metrics     { grid-template-columns: repeat(3, 1fr); }\n  .story__grid { grid-template-columns: 0.8fr 1.2fr; }\n}\n\n\/* La palabra con aurora no se parte, as\u00ed que en pantallas muy estrechas se baja\n   un punto el cuerpo del titular que la contiene para que quepa *\/\n@media (max-width: 400px) {\n  .story .sec__title { font-size: clamp(1.6rem, 1rem + 3vw, 2rem); }\n}\n\n\n\/* ============================================================================\n   9. PREFERENCIAS\n   ============================================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n  html { scroll-behavior: auto; }\n  *, *::before, *::after {\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    animation-delay: 0s !important;\n    transition-duration: 0.001ms !important;\n    scroll-behavior: auto !important;\n  }\n  \/* El ecualizador y el cohete se retiran: congelados no significan nada, y el\n     cohete quieto a media secci\u00f3n se leer\u00eda como un adorno mal colocado. *\/\n  .hero__eq, .rocket, .vsl__scan, .aurora, .ph::after { display: none; }\n  .aurora-word { color: var(--c-cyan); }\n  .aurora-word::after { animation: none !important; background: var(--c-cyan); }\n  .btn, .btn__arrow { animation: none !important; }\n  .flip__inner { transition: none; }\n  .flip, .story__pull { transform: none !important; opacity: 1 !important; }\n  .vsl__unmute__icon { animation: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-cyan) 22%, transparent); }\n}\n\n@media print {\n  .hero__bg, .vsl__scan, .vsl__unmute, .rocket { display: none; }\n  body { background: #fff; color: #000; }\n  .faq__a { display: grid !important; }\n}\n\n<\/style>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"ProfilePage\",\n  \"url\": \"https:\/\/jpdirector.net\/quien-es-jp\/\",\n  \"mainEntity\": {\n    \"@type\": \"Person\",\n    \"name\": \"Jorge P\u00e9rez\",\n    \"alternateName\": \"JP Director\",\n    \"url\": \"https:\/\/jpdirector.net\/\",\n    \"jobTitle\": \"Especialista en Publicidad Digital\",\n    \"description\": \"Especialista en publicidad digital y estratega en tr\u00e1fico pago. Ayuda a empresas y emprendedores a generar clientes reales mediante campa\u00f1as de Facebook Ads y Google Ads.\",\n    \"sameAs\": [\n      \"https:\/\/www.facebook.com\/jpdirector\",\n      \"https:\/\/www.instagram.com\/jpdirector\/\",\n      \"https:\/\/www.tiktok.com\/@jpdirectorr\",\n      \"https:\/\/www.linkedin.com\/in\/jpdirector\/\"\n    ]\n  }\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfQui\u00e9n es JP Director?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"JP Director es Jorge P\u00e9rez, especialista en publicidad digital y campa\u00f1as de Facebook Ads, Instagram Ads, TikTok Ads, Google Ads y ChatGPT Ads que dan en el punto.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfQu\u00e9 resultados ha logrado para sus clientes?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Ha contribuido en generar m\u00e1s de 220 millones de USD en ventas para sus clientes, adem\u00e1s de ense\u00f1ar a peque\u00f1os y medianos negocios a lograr ventas consistentes con sus clases de publicidad digital.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfQu\u00e9 lo diferencia de otros especialistas en publicidad?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"JP combina estrategia, an\u00e1lisis de datos, experiencia real en gesti\u00f3n de marketing y una ejecuci\u00f3n pr\u00e1ctica que prioriza resultados. No opera desde teor\u00edas: lleva a\u00f1os generando ventas reales, adapt\u00e1ndose r\u00e1pidamente a los constantes cambios del mercado digital.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u00bfQu\u00e9 servicios ofrece actualmente?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Ofrece creaci\u00f3n y gesti\u00f3n de campa\u00f1as de Facebook Ads, Instagram Ads, TikTok Ads, Google Ads y ChatGPT Ads, consultor\u00eda estrat\u00e9gica, optimizaci\u00f3n de embudos de conversi\u00f3n y entrenamiento para personas que desean aprender a generar clientes por s\u00ed mismas.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n\n\n\n<main id=\"main\">\n\n<!-- ============================================================\n     01. HERO \u2014 VSL sobre ecualizador\n     ============================================================ -->\n<section class=\"hero\" id=\"inicio\" aria-labelledby=\"hero-title\">\n\n  <div class=\"hero__bg\" aria-hidden=\"true\">\n    <!-- Alturas y ritmos repartidos a mano: con los mismos valores, las barras\n         latir\u00edan al un\u00edsono y se leer\u00eda como una sola pieza subiendo y bajando -->\n    <div class=\"hero__eq\">\n      <i style=\"height:38%; --dur:2.6s; animation-delay:-0.2s\"><\/i>\n      <i style=\"height:62%; --dur:3.4s; animation-delay:-1.1s\"><\/i>\n      <i style=\"height:28%; --dur:2.1s; animation-delay:-0.6s\"><\/i>\n      <i style=\"height:80%; --dur:4.2s; animation-delay:-2.3s\"><\/i>\n      <i style=\"height:46%; --dur:2.9s; animation-delay:-0.9s\"><\/i>\n      <i style=\"height:70%; --dur:3.7s; animation-delay:-1.7s\"><\/i>\n      <i style=\"height:34%; --dur:2.4s; animation-delay:-0.4s\"><\/i>\n      <i style=\"height:56%; --dur:3.1s; animation-delay:-2.0s\"><\/i>\n      <i style=\"height:88%; --dur:4.6s; animation-delay:-1.3s\"><\/i>\n      <i style=\"height:42%; --dur:2.7s; animation-delay:-0.8s\"><\/i>\n      <i style=\"height:64%; --dur:3.9s; animation-delay:-2.6s\"><\/i>\n      <i style=\"height:30%; --dur:2.2s; animation-delay:-1.5s\"><\/i>\n    <\/div>\n  <\/div>\n\n  <div class=\"wrap hero__grid\">\n\n    <div class=\"hero__copy stack\">\n      <p class=\"eyebrow\">[ Qui\u00e9n es JP ]<\/p>\n\n      <h1 class=\"hero__title\" id=\"hero-title\">\n        <span class=\"hero__hi\">\u00a1Hola!<\/span> Soy <em class=\"aurora-word\">Jorge P\u00e9rez<span class=\"aurora\" aria-hidden=\"true\"><i class=\"aurora__item\"><\/i><i class=\"aurora__item\"><\/i><i class=\"aurora__item\"><\/i><i class=\"aurora__item\"><\/i><\/span><\/em>\n      <\/h1>\n\n      <p class=\"hero__role\">Especialista en publicidad digital.<\/p>\n\n      <p class=\"hero__lead\">\n        Ayudo a marcas y negocios a crecer con estrategias de ADS que realmente dan en\n        el punto, a trav\u00e9s de t\u00e1cticas que producen clientes reales y no clics vac\u00edos.\n      <\/p>\n\n      <div class=\"hero__actions\">\n        <a class=\"btn btn--arrow\" href=\"https:\/\/jpdirector.net\/contact\/\"><span class=\"btn__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M3.5 12h15\"><\/path><path d=\"M12.5 5.5 19 12l-6.5 6.5\"><\/path><\/svg><\/span>Conversemos<\/a>\n        <a class=\"btn btn--ghost\" href=\"#historia\">Mi historia<\/a>\n      <\/div>\n    <\/div>\n\n    <figure class=\"vsl\">\n      <div class=\"vsl__frame\">\n        <span class=\"vsl__bracket vsl__bracket--tl\" aria-hidden=\"true\"><\/span>\n        <span class=\"vsl__bracket vsl__bracket--tr\" aria-hidden=\"true\"><\/span>\n        <span class=\"vsl__bracket vsl__bracket--bl\" aria-hidden=\"true\"><\/span>\n        <span class=\"vsl__bracket vsl__bracket--br\" aria-hidden=\"true\"><\/span>\n\n        <div class=\"vsl__screen\">\n          <video class=\"vsl__media\" id=\"vsl\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2025\/12\/Diseno-sin-titulo-2.mp4\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"auto\" width=\"1280\" height=\"720\" aria-label=\"Presentaci\u00f3n de Jorge P\u00e9rez, JP Director\"><\/video>\n\n          <button class=\"vsl__unmute\" id=\"vsl-unmute\" type=\"button\">\n            <span class=\"vsl__unmute__icon\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\">\n                <path d=\"M11 5 6.5 9H3v6h3.5L11 19z\"><\/path>\n                <line x1=\"16.5\" y1=\"9.5\" x2=\"21.5\" y2=\"14.5\"><\/line>\n                <line x1=\"21.5\" y1=\"9.5\" x2=\"16.5\" y2=\"14.5\"><\/line>\n              <\/svg>\n            <\/span>\n            <span class=\"vsl__unmute__text\">Click para activar el sonido<\/span>\n          <\/button>\n\n          <span class=\"vsl__scan\" aria-hidden=\"true\"><\/span>\n        <\/div>\n\n        <span class=\"vsl__rec mono\" aria-hidden=\"true\">\n          <i class=\"vsl__dot\"><\/i> VSL\n        <\/span>\n      <\/div>\n      <figcaption class=\"vsl__cap mono\">Qui\u00e9n soy y c\u00f3mo trabajo, contado por JP<\/figcaption>\n    <\/figure>\n\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     02. EN N\u00daMEROS \u2014 tarjetas con volteo\n     ============================================================ -->\n<section class=\"nums\" id=\"numeros\" aria-labelledby=\"nums-title\">\n  <div class=\"wrap\">\n\n    <header class=\"sec__head stack\">\n      <p class=\"sec__mark mono\">01 \u00b7 En n\u00fameros<\/p>\n      <h2 class=\"sec__title\" id=\"nums-title\">Lo que hay detr\u00e1s de cada cifra<\/h2>\n      <p class=\"sec__lead\">Voltea cada tarjeta para ver qu\u00e9 significa en la pr\u00e1ctica.<\/p>\n    <\/header>\n\n    <ul class=\"metrics\">\n\n      <li class=\"flip\">\n        <input type=\"checkbox\" id=\"m-01\" class=\"flip__switch\" aria-label=\"Ver detalle de los a\u00f1os en publicidad digital\">\n        <label for=\"m-01\" class=\"flip__tap\"><\/label>\n\n        <div class=\"flip__inner\">\n\n          <div class=\"flip__face flip__face--front\">\n            <span class=\"flip__glyph\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M4 8.5a7.5 7.5 0 0 1 12.8-3.3L20 8\"><\/path><path d=\"M20 4v4h-4\"><\/path><path d=\"M20 15.5a7.5 7.5 0 0 1-12.8 3.3L4 16\"><\/path><path d=\"M4 20v-4h4\"><\/path><\/svg><\/span>\n            <p class=\"flip__num\"><span>+<\/span>6<\/p>\n            <p class=\"flip__label mono\">A\u00f1os en publicidad digital<\/p>\n            <span class=\"flip__hint mono\" aria-hidden=\"true\">Ver detalle<\/span>\n          <\/div>\n\n          <div class=\"flip__face flip__face--back\">\n            <label for=\"m-01\" class=\"flip__close\" aria-label=\"Volver\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M6 6l12 12M18 6 6 18\"><\/path><\/svg><\/label>\n            <span class=\"flip__tag mono\">+6 a\u00f1os<\/span>\n            <p class=\"flip__text\">\n              Me comprometo con potenciar negocios con estrategias efectivas en ADS.\n            <\/p>\n          <\/div>\n\n        <\/div>\n      <\/li>\n\n      <li class=\"flip\">\n        <input type=\"checkbox\" id=\"m-02\" class=\"flip__switch\" aria-label=\"Ver detalle de los millones USD invertidos\">\n        <label for=\"m-02\" class=\"flip__tap\"><\/label>\n\n        <div class=\"flip__inner\">\n\n          <div class=\"flip__face flip__face--front\">\n            <span class=\"flip__glyph\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M4 8.5a7.5 7.5 0 0 1 12.8-3.3L20 8\"><\/path><path d=\"M20 4v4h-4\"><\/path><path d=\"M20 15.5a7.5 7.5 0 0 1-12.8 3.3L4 16\"><\/path><path d=\"M4 20v-4h4\"><\/path><\/svg><\/span>\n            <p class=\"flip__num\"><span>+<\/span>20<\/p>\n            <p class=\"flip__label mono\">Millones USD invertidos<\/p>\n            <span class=\"flip__hint mono\" aria-hidden=\"true\">Ver detalle<\/span>\n          <\/div>\n\n          <div class=\"flip__face flip__face--back\">\n            <label for=\"m-02\" class=\"flip__close\" aria-label=\"Volver\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M6 6l12 12M18 6 6 18\"><\/path><\/svg><\/label>\n            <span class=\"flip__tag mono\">+20 millones USD<\/span>\n            <p class=\"flip__text\">\n              Gesti\u00f3n de campa\u00f1as con alto volumen de inversi\u00f3n: experiencia real con\n              grandes presupuestos publicitarios.\n            <\/p>\n          <\/div>\n\n        <\/div>\n      <\/li>\n\n      <li class=\"flip\">\n        <input type=\"checkbox\" id=\"m-03\" class=\"flip__switch\" aria-label=\"Ver detalle de los estudiantes formados\">\n        <label for=\"m-03\" class=\"flip__tap\"><\/label>\n\n        <div class=\"flip__inner\">\n\n          <div class=\"flip__face flip__face--front\">\n            <span class=\"flip__glyph\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M4 8.5a7.5 7.5 0 0 1 12.8-3.3L20 8\"><\/path><path d=\"M20 4v4h-4\"><\/path><path d=\"M20 15.5a7.5 7.5 0 0 1-12.8 3.3L4 16\"><\/path><path d=\"M4 20v-4h4\"><\/path><\/svg><\/span>\n            <p class=\"flip__num\"><span>+<\/span>1.000<\/p>\n            <p class=\"flip__label mono\">Estudiantes formados<\/p>\n            <span class=\"flip__hint mono\" aria-hidden=\"true\">Ver detalle<\/span>\n          <\/div>\n\n          <div class=\"flip__face flip__face--back\">\n            <label for=\"m-03\" class=\"flip__close\" aria-label=\"Volver\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M6 6l12 12M18 6 6 18\"><\/path><\/svg><\/label>\n            <span class=\"flip__tag mono\">+1.000 estudiantes<\/span>\n            <p class=\"flip__text\">\n              Con un portafolio de formaci\u00f3n que ayuda a emprendedores y profesionales a\n              dominar Facebook, Instagram, TikTok y Google Ads.\n            <\/p>\n          <\/div>\n\n        <\/div>\n      <\/li>\n\n    <\/ul>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     03. MI HISTORIA \u2014 con el cohete ascendiendo por el lateral\n     ============================================================ -->\n<section class=\"story\" id=\"historia\" aria-labelledby=\"story-title\">\n\n  <!-- Sube por el lateral al ritmo del scroll de esta secci\u00f3n. Decorativo.\n       El grupo volteado pone el cohete de morro hacia arriba sin tocar el CSS. -->\n  <div class=\"rocket\" aria-hidden=\"true\">\n    <div class=\"rocket__ship\">\n      <svg viewBox=\"0 0 48 120\" focusable=\"false\">\n        <g transform=\"translate(0,120) scale(1,-1)\">\n          <path class=\"rocket__flame\" d=\"M24 2c5 10 8.5 18 8.5 23 0 5-3.9 9-8.5 9s-8.5-4-8.5-9c0-5 3.5-13 8.5-23z\"><\/path>\n          <path class=\"rocket__fin\" d=\"M12 40 2 58l10 8z\"><\/path>\n          <path class=\"rocket__fin\" d=\"M36 40l10 18-10 8z\"><\/path>\n          <path class=\"rocket__hull\" d=\"M24 116c7-16 14-34 14-54 0-16-5-26-8-30H18c-3 4-8 14-8 30 0 20 7 38 14 54z\"><\/path>\n          <circle class=\"rocket__glass\" cx=\"24\" cy=\"58\" r=\"6\"><\/circle>\n          <circle class=\"rocket__pupil\" cx=\"24\" cy=\"58\" r=\"2.4\"><\/circle>\n        <\/g>\n      <\/svg>\n    <\/div>\n  <\/div>\n\n  <div class=\"wrap\">\n    <div class=\"story__grid\">\n\n      <div class=\"story__side\">\n\n        <header class=\"sec__head stack\">\n          <p class=\"sec__mark mono\">02 \u00b7 Mi historia<\/p>\n          <h2 class=\"sec__title\" id=\"story-title\">\n            No le tuve miedo <em class=\"aurora-word\">al cambio<span class=\"aurora aurora--b\" aria-hidden=\"true\"><i class=\"aurora__item\"><\/i><i class=\"aurora__item\"><\/i><i class=\"aurora__item\"><\/i><i class=\"aurora__item\"><\/i><\/span><\/em>\n          <\/h2>\n        <\/header>\n\n        <figure class=\"shot\">\n          <div class=\"shot__frame\">\n            <span class=\"shot__b shot__b--tl\" aria-hidden=\"true\"><\/span>\n            <span class=\"shot__b shot__b--tr\" aria-hidden=\"true\"><\/span>\n            <span class=\"shot__b shot__b--bl\" aria-hidden=\"true\"><\/span>\n            <span class=\"shot__b shot__b--br\" aria-hidden=\"true\"><\/span>\n\n            <div class=\"shot__screen\" style=\"--ar: 16 \/ 9\">\n              <img class=\"shot__img\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/01\/DSC2208-1copia-scaled.jpg\" alt=\"Jorge P\u00e9rez, JP Director\" width=\"2560\" height=\"1440\" loading=\"lazy\" decoding=\"async\">\n            <\/div>\n          <\/div>\n        <\/figure>\n\n      <\/div>\n\n      <div class=\"story__copy stack stack--loose\">\n\n        <div class=\"story__body\">\n          <p>\n            Siempre he tenido un modo especial de pensar: me gusta comprender c\u00f3mo\n            funcionan las cosas, optimizarlas y llevarlas a otro nivel.\n          <\/p>\n          <p>\n            Esa curiosidad me condujo al mundo audiovisual, en el cual descubr\u00ed el poder\n            de una idea bien concebida y la importancia de llevarla a cabo con exactitud.\n          <\/p>\n          <p>\n            Gradualmente fui involucr\u00e1ndome en proyectos en los que la estrategia era m\u00e1s\n            importante que la producci\u00f3n, y me di cuenta de que mi verdadero punto fuerte\n            consist\u00eda en prever conductas y elaborar mensajes que impulsan la acci\u00f3n.\n          <\/p>\n          <p>\n            Ese descubrimiento me llev\u00f3 a dar un paso arriesgado hacia la gerencia de\n            marketing, donde tuve que demostrar que pod\u00eda convertir intuici\u00f3n y an\u00e1lisis\n            en resultados reales.\n          <\/p>\n        <\/div>\n\n        <div class=\"story__pull\">\n          <p class=\"story__tag mono\">D\u00f3nde estoy hoy<\/p>\n          <p>\n            Aprendiendo, mejorando y optimizando: eso ver\u00e1s en todo este sitio. Estrategia\n            antes que producci\u00f3n, datos antes que corazonadas, y ejecuci\u00f3n antes que\n            teor\u00eda.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     04. PREGUNTAS FRECUENTES \u2014 ruptura de fondo\n     ============================================================ -->\n<section class=\"faq\" id=\"faq\" aria-labelledby=\"faq-title\">\n  <div class=\"wrap\">\n\n    <header class=\"sec__head stack\">\n      <p class=\"sec__mark sec__mark--dark mono\">03 \u00b7 Sobre JP Director<\/p>\n      <h2 class=\"sec__title\" id=\"faq-title\">Preguntas frecuentes<\/h2>\n    <\/header>\n\n    <div class=\"faq__list\">\n\n      <details class=\"faq__item\">\n        <summary class=\"faq__q\">\n          \u00bfQui\u00e9n es JP Director?\n          <span class=\"faq__sign\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M12 5v14M5 12h14\"><\/path><\/svg><\/span>\n        <\/summary>\n        <div class=\"faq__a\">\n          <p>\n            JP Director es Jorge P\u00e9rez, especialista en publicidad digital y campa\u00f1as de\n            Facebook Ads, Instagram Ads, TikTok Ads, Google Ads y ChatGPT Ads que dan en\n            el punto.\n          <\/p>\n        <\/div>\n      <\/details>\n\n      <details class=\"faq__item\">\n        <summary class=\"faq__q\">\n          \u00bfQu\u00e9 resultados ha logrado para sus clientes?\n          <span class=\"faq__sign\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M12 5v14M5 12h14\"><\/path><\/svg><\/span>\n        <\/summary>\n        <div class=\"faq__a\">\n          <p>\n            Ha contribuido en generar m\u00e1s de 220 millones de USD en ventas para sus\n            clientes, adem\u00e1s de ense\u00f1ar a peque\u00f1os y medianos negocios a lograr ventas\n            consistentes con sus clases de publicidad digital.\n          <\/p>\n        <\/div>\n      <\/details>\n\n      <details class=\"faq__item\">\n        <summary class=\"faq__q\">\n          \u00bfQu\u00e9 lo diferencia de otros especialistas en publicidad?\n          <span class=\"faq__sign\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M12 5v14M5 12h14\"><\/path><\/svg><\/span>\n        <\/summary>\n        <div class=\"faq__a\">\n          <p>\n            JP combina estrategia, an\u00e1lisis de datos, experiencia real en gesti\u00f3n de\n            marketing y una ejecuci\u00f3n pr\u00e1ctica que prioriza resultados.\n          <\/p>\n          <p>\n            No opera desde teor\u00edas: lleva a\u00f1os generando ventas reales, adapt\u00e1ndose\n            r\u00e1pidamente a los constantes cambios del mercado digital.\n          <\/p>\n        <\/div>\n      <\/details>\n\n      <details class=\"faq__item\">\n        <summary class=\"faq__q\">\n          \u00bfQu\u00e9 servicios ofrece actualmente?\n          <span class=\"faq__sign\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M12 5v14M5 12h14\"><\/path><\/svg><\/span>\n        <\/summary>\n        <div class=\"faq__a\">\n          <p>\n            Creaci\u00f3n y gesti\u00f3n de campa\u00f1as de Facebook Ads, Instagram Ads, TikTok Ads,\n            Google Ads y ChatGPT Ads, consultor\u00eda estrat\u00e9gica, optimizaci\u00f3n de embudos de\n            conversi\u00f3n y entrenamiento para personas que desean aprender a generar\n            clientes por s\u00ed mismas.\n          <\/p>\n        <\/div>\n      <\/details>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     05. CTA FINAL\n     ============================================================ -->\n<section class=\"end\" id=\"contacto\" aria-labelledby=\"end-title\">\n  <div class=\"wrap end__inner stack stack--loose\">\n    <p class=\"eyebrow\">[ Siguiente paso ]<\/p>\n    <h2 class=\"end__title\" id=\"end-title\">\n      Cu\u00e9ntame de tu <em>negocio<\/em>\n    <\/h2>\n    <p class=\"end__lead\">\n      Si llegaste hasta aqu\u00ed, ya sabes que soy el profesional correcto. Ahora me\n      corresponde a m\u00ed escuchar a tu negocio.\n    <\/p>\n    <a class=\"btn btn--lg btn--arrow\" href=\"https:\/\/jpdirector.net\/contact\/\"><span class=\"btn__arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"M3.5 12h15\"><\/path><path d=\"M12.5 5.5 19 12l-6.5 6.5\"><\/path><\/svg><\/span>Conversemos<\/a>\n    <p class=\"end__note mono\">Respuesta directa del equipo de JP.<\/p>\n  <\/div>\n<\/section>\n\n<\/main>\n\n<!-- ============================================================\n     \u00danico script del documento. Activar sonido, rebobinar y\n     reproducir son estados del elemento <video> que CSS no puede\n     tocar. Todo lo dem\u00e1s de la p\u00e1gina es HTML y CSS.\n     ============================================================ -->\n<script>\n(function () {\n  var v = document.getElementById('vsl');\n  var b = document.getElementById('vsl-unmute');\n  if (!v || !b) return;\n\n  \/\/ Si el navegador bloquea incluso el autoplay silenciado, el bot\u00f3n lo asume.\n  var p = v.play();\n  if (p && p.catch) {\n    p.catch(function () {\n      b.classList.add('is-blocked');\n      b.querySelector('.vsl__unmute__text').textContent = 'Click para reproducir con sonido';\n    });\n  }\n\n  b.addEventListener('click', function () {\n    v.loop = false;\n    v.muted = false;\n    v.volume = 1;\n    v.currentTime = 0;\n    v.controls = true;\n    var q = v.play();\n    if (q && q.catch) { q.catch(function () {}); }\n    b.hidden = true;\n  });\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":".gspb_container-id-gsbp-f669173{flex-direction:column;box-sizing:border-box}#gspb_container-id-gsbp-f669173.gspb_container>p:last-of-type{margin-bottom:0}#gspb_container-id-gsbp-f669173.gspb_container{position:relative;box-sizing:border-box}","footnotes":""},"class_list":["post-4336","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez, Especialista en Publicidad<\/title>\n<meta name=\"description\" content=\"Conoce a Jorge P\u00e9rez (JP Director), especialista en publicidad digital y tr\u00e1fico pago. M\u00e1s de 220 M USD en ventas generadas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jpdirector.net\/en\/quien-es-jp-director\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez, Especialista en Publicidad\" \/>\n<meta property=\"og:description\" content=\"Conoce a Jorge P\u00e9rez (JP Director), especialista en publicidad digital y tr\u00e1fico pago. M\u00e1s de 220 M USD en ventas generadas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jpdirector.net\/en\/quien-es-jp-director\/\" \/>\n<meta property=\"og:site_name\" content=\"JP Director\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/jpdirector\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-10T21:54:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/01\/DSC2208-1copia-scaled.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/\",\"name\":\"\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez, Especialista en Publicidad\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/DSC2208-1copia-scaled.jpg\",\"datePublished\":\"2026-09-01T21:53:42+00:00\",\"dateModified\":\"2026-09-10T21:54:44+00:00\",\"description\":\"Conoce a Jorge P\u00e9rez (JP Director), especialista en publicidad digital y tr\u00e1fico pago. M\u00e1s de 220 M USD en ventas generadas.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/#primaryimage\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/DSC2208-1copia-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/DSC2208-1copia-scaled.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/quien-es-jp-director\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/jpdirector.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfQui\u00e9n es JP?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#website\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/\",\"name\":\"JP Director\",\"description\":\"JP Director\",\"publisher\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jpdirector.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#organization\",\"name\":\"JP Director\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Logo-home-08-1.png\",\"contentUrl\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Logo-home-08-1.png\",\"width\":330,\"height\":76,\"caption\":\"JP Director\"},\"image\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/jpdirector\",\"https:\\\/\\\/www.instagram.com\\\/jp.director\\\/?hl=en\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jpdirector\\\/?locale=en_US\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez, Especialista en Publicidad","description":"Conoce a Jorge P\u00e9rez (JP Director), especialista en publicidad digital y tr\u00e1fico pago. M\u00e1s de 220 M USD en ventas generadas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jpdirector.net\/en\/quien-es-jp-director\/","og_locale":"en_US","og_type":"article","og_title":"\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez, Especialista en Publicidad","og_description":"Conoce a Jorge P\u00e9rez (JP Director), especialista en publicidad digital y tr\u00e1fico pago. M\u00e1s de 220 M USD en ventas generadas.","og_url":"https:\/\/jpdirector.net\/en\/quien-es-jp-director\/","og_site_name":"JP Director","article_publisher":"https:\/\/www.facebook.com\/jpdirector","article_modified_time":"2026-09-10T21:54:44+00:00","og_image":[{"url":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/01\/DSC2208-1copia-scaled.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jpdirector.net\/quien-es-jp-director\/","url":"https:\/\/jpdirector.net\/quien-es-jp-director\/","name":"\u00bfQui\u00e9n es JP Director? | Jorge P\u00e9rez, Especialista en Publicidad","isPartOf":{"@id":"https:\/\/jpdirector.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jpdirector.net\/quien-es-jp-director\/#primaryimage"},"image":{"@id":"https:\/\/jpdirector.net\/quien-es-jp-director\/#primaryimage"},"thumbnailUrl":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/01\/DSC2208-1copia-scaled.jpg","datePublished":"2026-09-01T21:53:42+00:00","dateModified":"2026-09-10T21:54:44+00:00","description":"Conoce a Jorge P\u00e9rez (JP Director), especialista en publicidad digital y tr\u00e1fico pago. M\u00e1s de 220 M USD en ventas generadas.","breadcrumb":{"@id":"https:\/\/jpdirector.net\/quien-es-jp-director\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jpdirector.net\/quien-es-jp-director\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jpdirector.net\/quien-es-jp-director\/#primaryimage","url":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/01\/DSC2208-1copia-scaled.jpg","contentUrl":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/01\/DSC2208-1copia-scaled.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/jpdirector.net\/quien-es-jp-director\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/jpdirector.net\/"},{"@type":"ListItem","position":2,"name":"\u00bfQui\u00e9n es JP?"}]},{"@type":"WebSite","@id":"https:\/\/jpdirector.net\/#website","url":"https:\/\/jpdirector.net\/","name":"JP Director","description":"JP Director","publisher":{"@id":"https:\/\/jpdirector.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jpdirector.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jpdirector.net\/#organization","name":"JP Director","url":"https:\/\/jpdirector.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jpdirector.net\/#\/schema\/logo\/image\/","url":"https:\/\/jpdirector.net\/wp-content\/uploads\/2025\/10\/Logo-home-08-1.png","contentUrl":"https:\/\/jpdirector.net\/wp-content\/uploads\/2025\/10\/Logo-home-08-1.png","width":330,"height":76,"caption":"JP Director"},"image":{"@id":"https:\/\/jpdirector.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/jpdirector","https:\/\/www.instagram.com\/jp.director\/?hl=en","https:\/\/www.linkedin.com\/in\/jpdirector\/?locale=en_US"]}]}},"_links":{"self":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages\/4336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/comments?post=4336"}],"version-history":[{"count":5,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages\/4336\/revisions"}],"predecessor-version":[{"id":4437,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages\/4336\/revisions\/4437"}],"wp:attachment":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/media?parent=4336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}