{"id":100,"date":"2022-04-02T09:36:26","date_gmt":"2022-04-02T09:36:26","guid":{"rendered":"https:\/\/bydmb.com\/?page_id=100"},"modified":"2026-10-14T23:45:23","modified_gmt":"2026-10-14T23:45:23","slug":"playground","status":"publish","type":"page","link":"https:\/\/bydmb.com\/es\/playground\/","title":{"rendered":"Jard\u00edn de infancia"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"100\" class=\"elementor elementor-100\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f473f64 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f473f64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53c736a elementor-widget elementor-widget-html\" data-id=\"53c736a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\n\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n\u2551  PLAYGROUND SPHERE v4 \u2014 galer\u00eda 3D desde dentro de la esfera         \u2551\n\u2551                                                                      \u2551\n\u2551  C\u00d3MO USARLO EN ELEMENTOR                                            \u2551\n\u2551  1. Widget \"HTML\" en una secci\u00f3n a ancho completo y sin padding.     \u2551\n\u2551     Pega TODO este archivo dentro.                                   \u2551\n\u2551  2. Enlaces de im\u00e1genes: array IMAGES (marcado con \u2605\u2605\u2605).             \u2551\n\u2551  3. Cambia --pg-green por el HEX exacto de tu verde corporativo.     \u2551\n\u2551  4. Busca \"\u2605\u2605\u2605 1)\" y \"\u2605\u2605\u2605 2)\" para distancia y ojo de pez.           \u2551\n\u2551  5. Si tu cursor personalizado no se oculta, mira \"\u2605\u2605\u2605 3)\".          \u2551\n\u2551  6. Si tu header no se queda transparente, mira \"\u2605\u2605\u2605 4)\".            \u2551\n\u2551  7. Textos de interfaz y textos ALT (SEO): bloques TEXT y ALTS.      \u2551\n\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\n-->\n\n<style>\n  :root{\n    \/* \u2605 COLORES: se toman de tu header (--dmb-verde \/ --dmb-claro) para que el bot\u00f3n de\n       cambio de color afecte igual a toda la web. Si el header no est\u00e1, se usan estos de reserva. *\/\n    --pg-green: var(--dmb-verde, #3dde6f);\n    --pg-bg: var(--dmb-claro, #f9f9f9);\n    --pg-ink: #111;\n    \/* Colores \"efectivos\": se intercambian en modo invertido (fondo verde \u00b7 textos claros) *\/\n    --pg-fg: var(--pg-green);\n    --pg-bgc: var(--pg-bg);\n    \/* \u2605 Tipograf\u00eda. Si en Elementor tu fuente se llama distinto, c\u00e1mbialo aqu\u00ed *\/\n    --pg-font: \"Elza\", \"elza\", \"Helvetica Neue\", Arial, sans-serif;\n  }\n\n  \/* MODO INVERTIDO (lo activa el bot\u00f3n del header a\u00f1adiendo \"dmb-invertido\" a <html>) *\/\n  html.dmb-invertido{\n    --pg-fg: var(--pg-bg);\n    --pg-bgc: var(--pg-green);\n  }\n\n  \/* Bloqueo de scroll de la p\u00e1gina *\/\n  html.pg-lock, html.pg-lock body{\n    overflow: hidden !important;\n    overscroll-behavior: none;\n  }\n\n  \/* Contenedor en el flujo de la p\u00e1gina: le da altura al widget y permite seleccionarlo en Elementor *\/\n  .pg-wrap{ position: relative; width: 100%; height: 100vh; height: 100dvh; }\n\n  \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 ESCENA (a pantalla completa, por debajo del header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  .pg-root{\n    position: fixed; top: 0; left: 0;\n    width: 100%;\n    height: 100vh; height: 100dvh;\n    z-index: 1;\n    overflow: hidden;\n    background: var(--pg-bgc);\n    transition: background-color .25s ease;\n    isolation: isolate;                 \/* fondo conocido para el efecto del texto central *\/\n    user-select: none; -webkit-user-select: none;\n    touch-action: none;\n    cursor: grab;\n  }\n  .pg-root.drag{ cursor: grabbing; }\n  .pg-stage{\n    position: absolute; inset: 0;\n    perspective: 450px;\n    perspective-origin: 50% 50%;\n  }\n  .pg-world{\n    position: absolute; left: 50%; top: 50%;\n    width: 0; height: 0;\n    transform-style: preserve-3d;\n    will-change: transform;\n  }\n\n  \/* Velo desenfocado que aparece al abrir una imagen (la esfera sigue movi\u00e9ndose debajo) *\/\n  .pg-veil{\n    position: absolute; inset: 0;\n    opacity: 0; pointer-events: none;\n    background: rgba(249,249,249,.28);\n    background: color-mix(in srgb, var(--pg-bgc) 28%, transparent);\n    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);\n    transition: opacity .6s ease;\n  }\n  .pg-root.lb-open .pg-veil{ opacity: 1; }\n  .pg-root.lb-open .pg-tile{ pointer-events: none; }\n\n  \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TEXTO CENTRAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Un \u00fanico <h1> con mix-blend-mode: difference.\n     Su color lo calcula el JS como |fondo \u2212 verde| (variable --pg-title-c), de modo que\n     sobre el fondo claro el resultado es EXACTAMENTE tu verde, y sobre las im\u00e1genes se invierte. *\/\n  .pg-titlebox{\n    position: absolute; inset: 0;\n    display: grid; place-items: center;\n    pointer-events: none;               \/* no clicable *\/\n  }\n  .pg-root .pg-titlebox h1.pg-title{\n    grid-area: 1 \/ 1;\n    color: var(--pg-title-c, #bc1b8a) !important;\n    width: min(520px, 80vw);\n    margin: 0 !important; padding: 0 !important;\n    font-family: var(--pg-font) !important;\n    font-weight: 500 !important;\n    font-size: 12px !important;\n    line-height: 1.25 !important;\n    letter-spacing: 0 !important;\n    text-transform: none !important;\n    text-align: center !important;\n    mix-blend-mode: difference;\n    pointer-events: none !important;\n    user-select: none;\n    transition: opacity .35s ease;\n  }\n  .pg-root.lb-open .pg-titlebox > *{ opacity: 0; }\n  \/* Modo invertido: el texto pasa a claro (con el fondo verde, \"difference\" ya no puede dar claro) *\/\n  html.dmb-invertido .pg-root .pg-titlebox h1.pg-title{\n    color: var(--pg-bg) !important;\n    mix-blend-mode: normal;\n  }\n\n  \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MINIATURAS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  .pg-tile{\n    position: absolute; left: 0; top: 0;\n    opacity: 0;\n    transition: opacity .8s ease;\n    cursor: pointer;\n  }\n  .pg-tile.in{ opacity: 1; }\n  .pg-card{\n    position: relative;\n    isolation: isolate;                 \/* necesario para el blend del degradado *\/\n    backface-visibility: hidden;\n  }\n  .pg-card img.pg-thumb{\n    display: block; width: 100%; height: auto;\n    pointer-events: none; -webkit-user-drag: none;\n    \/* mapa de degradado: gris \u2192 (screen con verde) = sombras verdes, luces blancas *\/\n    filter: grayscale(1) contrast(1.25) brightness(.95);\n    transition: filter .5s ease;\n  }\n  .pg-card::after{                      \/* capa verde \"screen\" *\/\n    content: \"\"; position: absolute; inset: 0; z-index: 1;\n    background: var(--pg-green);\n    mix-blend-mode: screen;\n    pointer-events: none;\n    transition: opacity .5s ease;\n    \/* La capa verde solo cubre donde la imagen tiene contenido: as\u00ed los PNG\/SVG con fondo\n       transparente no se convierten en un cuadro s\u00f3lido (--pg-src la pone el JS en cada tarjeta) *\/\n    -webkit-mask: var(--pg-src) center \/ 100% 100% no-repeat;\n            mask: var(--pg-src) center \/ 100% 100% no-repeat;\n  }\n  \/* Hover: SOLO se quita el efecto de color (sin crecer) *\/\n  .pg-root:not(.drag):not(.lb-open) .pg-tile:hover img.pg-thumb{ filter: none; }\n  .pg-root:not(.drag):not(.lb-open) .pg-tile:hover .pg-card::after{ opacity: 0; }\n  .pg-root.drag .pg-card{ pointer-events: none; }\n  \/* Durante el cambio de color se anulan las transiciones internas (el fade lo hace todo el bloque) *\/\n  .pg-root.pg-swap, .pg-root.pg-swap *, .pg-root.pg-swap *::after{ transition: none !important; }\n  \/* Modo invertido: se intercambian los dos colores de la imagen (sombras claras \u00b7 luces verdes) *\/\n  html.dmb-invertido .pg-card img.pg-thumb{\n    filter: grayscale(1) contrast(1.25) brightness(.95) invert(1);\n  }\n\n  \/* Capa de pintura de cada foto: m\u00e1s grande que la foto y adelantada hacia la c\u00e1mara\n     para que lo pintado pueda salirse del borde y quedar por encima de las fotos vecinas *\/\n  .pg-pl{\n    position: absolute; left: 0; top: 0;\n    display: none; pointer-events: none;\n    -webkit-user-drag: none;\n    backface-visibility: hidden;\n  }\n\n  \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 HINT: aparece desde abajo solo si el usuario hace scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  .pg-hint{\n    position: absolute; left: 50%; bottom: 22px;\n    transform: translate(-50%, 220%);\n    opacity: 0;\n    font: 500 12px\/1 var(--pg-font);\n    color: var(--pg-green) !important;   \/* !important: el tema\/Elementor lo pintaba en negro *\/\n    pointer-events: none; z-index: 5;\n    white-space: nowrap;\n    transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease;\n  }\n  .pg-hint.show{ transform: translate(-50%, 0); opacity: 1; }\n  .pg-root.lb-open .pg-hint{ opacity: 0; }\n\n  \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 VISUALIZADOR (por debajo del header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  .pg-lb{\n    position: fixed; inset: 0; z-index: 500;\n    display: none;\n    font-family: var(--pg-font);\n    user-select: none; -webkit-user-select: none;\n    touch-action: none;\n  }\n  .pg-lb.show{ display: block; }\n  .pg-lb.pencil{ cursor: none; }\n  .pg-hero{\n    position: absolute; left: 0; top: 0;\n    pointer-events: none;\n    will-change: transform, opacity;\n  }\n  .pg-hero img{\n    display: block; width: 100%; height: 100%;\n    -webkit-user-drag: none; pointer-events: none;\n  }\n  .pg-hero canvas{ position: absolute; pointer-events: none; }\n\n  \/* Navegaci\u00f3n: aparece (fade) cuando la foto ya est\u00e1 en el centro *\/\n  .pg-nav{ opacity: 0; transition: opacity .35s ease; pointer-events: none; }\n  .pg-lb.nav-on .pg-nav{ opacity: 1; }\n  .pg-lb.nav-on .pg-btn{ pointer-events: auto; }\n\n  \/* Botones: verdes, sin borde, sin fondo (anula los estilos del tema\/Elementor, incl. el rosa del hover) *\/\n  .pg-lb .pg-btn,\n  .pg-lb .pg-btn:hover,\n  .pg-lb .pg-btn:focus,\n  .pg-lb .pg-btn:focus-visible,\n  .pg-lb .pg-btn:active{\n    background: transparent !important;\n    background-color: transparent !important;\n    border: 0 !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n    outline: 0 !important;\n    text-decoration: none !important;\n    color: var(--pg-fg) !important;\n  }\n  .pg-lb .pg-btn{\n    position: absolute;\n    font: 500 12px\/1 var(--pg-font) !important;\n    letter-spacing: 0 !important; text-transform: none !important;\n    padding: 14px !important; margin: 0 !important;\n    cursor: pointer;\n    transition: opacity .2s;\n  }\n  .pg-lb .pg-btn:hover{ opacity: .5; }\n  .pg-btn svg{ display: block; }\n  .pg-prev{ left: 12px; top: 50%; transform: translateY(-50%); }\n  .pg-next{ right: 12px; top: 50%; transform: translateY(-50%); }\n  \/* Por debajo del header (que queda siempre visible arriba) *\/\n  .pg-close{ right: 12px; top: 56px; }\n  .pg-count{\n    position: absolute; left: 26px; top: 70px;\n    font: 500 12px\/1 var(--pg-font); color: var(--pg-fg);\n  }\n  .pg-tip{\n    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);\n    font: 500 12px\/1 var(--pg-font); color: var(--pg-fg);\n    white-space: nowrap;\n  }\n\n  \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 L\u00c1PIZ (silueta verde) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  .pg-pencil{\n    position: fixed; left: 0; top: 0;\n    width: 28px; height: 28px;\n    margin: -25px 0 0 -3px;            \/* la punta del l\u00e1piz = posici\u00f3n del puntero *\/\n    z-index: 2147483647;               \/* por encima de tu cursor personalizado *\/\n    pointer-events: none; display: none;\n    will-change: transform;\n  }\n  .pg-pencil svg{ display: block; fill: var(--pg-fg); stroke: var(--pg-bgc); }\n<\/style>\n\n<div class=\"pg-wrap\">\n<div class=\"pg-root\" id=\"pgRoot\">\n  <div class=\"pg-stage\" id=\"pgStage\"><div class=\"pg-world\" id=\"pgWorld\"><\/div><\/div>\n  <div class=\"pg-veil\"><\/div>\n\n  <!-- TEXTO CENTRAL: edita SOLO el <h1> (las 2 capas se rellenan solas desde \u00e9l) -->\n  <div class=\"pg-titlebox\">\n    <h1 class=\"pg-title\">Hi! This is my playground: unfinished projects, ideas lost in drawers, rejected proposals and experiments. Have a look, or paint something.<\/h1>\n    <!-- Versi\u00f3n anterior en espa\u00f1ol:\n    <h1 class=\"pg-title\">Hola! Este es mi patio de recreo. Dise\u00f1os olvidados, ideas que se perdieron en los cajones, propuestas que se quedaron en el camino o resultados de experimentaciones. Echa un vistazo o p\u00edntate algo.<\/h1>\n    -->\n  <\/div>\n\n  <div class=\"pg-hint\" id=\"pgHint\"><\/div>\n<\/div>\n<\/div>\n\n<script>\n(function(){\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     \u2605\u2605\u2605  AQU\u00cd VAN LOS ENLACES DE TUS IM\u00c1GENES  \u2605\u2605\u2605\n     Una URL entre comillas por l\u00ednea, separadas por comas.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  const IMAGES = [\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/CORAZON-DE-JESUS-scaled.webp\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/TRUST-THE-WAIT-scaled.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/sample-ezgif.com-crop-1.gif\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/PLEASE-BE-FUCKING-KIND.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/posterizado-copia.png\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/CDNEVERMINDGIRANDO0001-0112-ezgif.com-video-to-gif-converter.gif\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/07\/SENAL-DE-TRAFICO-scaled.webp\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/03\/WORLD-CHAMPION.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/5-2022-BLACK-scaled.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/Sin-titulo-1-1.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/Sin-titulo-1.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/LTDSOCIETY_2.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/Waste_1.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/Valentin_1-e1654183062990.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/04\/Recurso-6.svg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/05\/Recurso-1-1.svg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2022\/07\/KRTJ-2-scaled.jpg\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2026\/10\/bydmb-david-martinez-ballarin-dinseno-web-disenador-grafico-logo.png\",\n    \"https:\/\/bydmb.com\/wp-content\/uploads\/2026\/10\/bydmb-david-martinez-ballarin-creative-director-visual-artist-scaled.png\"\n    \/\/ \u2605 Para a\u00f1adir m\u00e1s: pon una coma al final de la \u00faltima l\u00ednea y pega otra URL entre comillas\n  ];\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     \u2605\u2605\u2605  TEXTOS ALT (SEO + accesibilidad)  \u2605\u2605\u2605\n     Describe cada imagen en una frase corta, EN EL MISMO ORDEN que IMAGES.\n     Si lo dejas vac\u00edo (\"\"), esa imagen no tendr\u00e1 texto alternativo.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  const ALTS = [\n    \"\",  \/\/ 1  \u00b7 CORAZON-DE-JESUS\n    \"\",  \/\/ 2  \u00b7 TRUST-THE-WAIT\n    \"\",  \/\/ 3  \u00b7 sample (gif)\n    \"\",  \/\/ 4  \u00b7 PLEASE-BE-FUCKING-KIND\n    \"\",  \/\/ 5  \u00b7 posterizado-copia\n    \"\",  \/\/ 6  \u00b7 CD NEVERMIND (gif)\n    \"\",  \/\/ 7  \u00b7 SENAL-DE-TRAFICO\n    \"\",  \/\/ 8  \u00b7 WORLD-CHAMPION\n    \"\",  \/\/ 9  \u00b7 5-2022-BLACK\n    \"\",  \/\/ 10 \u00b7 Sin-titulo-1-1\n    \"\",  \/\/ 11 \u00b7 Sin-titulo-1\n    \"\",  \/\/ 12 \u00b7 LTDSOCIETY_2\n    \"\",  \/\/ 13 \u00b7 Waste_1\n    \"\",  \/\/ 14 \u00b7 Valentin_1\n    \"\",  \/\/ 15 \u00b7 Recurso-6 (svg)\n    \"\",  \/\/ 16 \u00b7 Recurso-1-1 (svg)\n    \"\",  \/\/ 17 \u00b7 KRTJ-2\n    \"\"   \/\/ 18 \u00b7 bydmb logo (png)\n  ];\n\n  \/* \u2550\u2550\u2550 TEXTOS DE LA INTERFAZ \u2550\u2550\u2550 *\/\n  const TEXT = {\n    hint:  'Drag to rotate \u00b7 Scroll to zoom \u00b7 Click to open',   \/\/ ES: 'Arrastra para girar \u00b7 Rueda para zoom \u00b7 Click para abrir'\n    tip:   'Hold click and paint over the image',               \/\/ ES: 'Mant\u00e9n click y pinta sobre la imagen'\n    close: 'Close',                                             \/\/ ES: 'Cerrar'\n    prev:  'Previous',                                          \/\/ ES: 'Anterior'\n    next:  'Next'                                               \/\/ ES: 'Siguiente'\n  };\n\n  \/* \u2550\u2550\u2550 AJUSTES \u2550\u2550\u2550 *\/\n  const CONFIG = {\n\n    \/* \u2605\u2605\u2605 1) DISTANCIA DE LAS IM\u00c1GENES \u2605\u2605\u2605\n       Radio de la esfera. M\u00c1S ALTO = las fotos se ven m\u00e1s lejos y m\u00e1s peque\u00f1as. *\/\n    radius: 2000,\n\n    \/* \u2605\u2605\u2605 2) EFECTO OJO DE PEZ \u2605\u2605\u2605\n       Perspectiva de la c\u00e1mara. M\u00c1S BAJO = ojo de pez m\u00e1s exagerado. *\/\n    perspective: 250,\n\n    \/* Ancho de cada foto en px. null = autom\u00e1tico seg\u00fan pantalla (260\u2013420 px) *\/\n    tileWidth: null,\n\n    \/* N\u00ba m\u00ednimo de fotos en la esfera (si tienes pocas, se repiten) *\/\n    minTiles: 80,\n\n    \/* \u2500\u2500 Pintura \u2500\u2500 *\/\n    brushSize: 9,        \/\/ grosor del l\u00e1piz (px)\n    paintOverflow: 0.6,  \/\/ cu\u00e1nto puede salirse lo pintado del borde de la foto\n                         \/\/ (0.6 = hasta un 60 % del tama\u00f1o de la foto por cada lado)\n    paintLift: 160,      \/\/ cu\u00e1nto se adelanta lo pintado para quedar por encima de las fotos vecinas\n\n    \/* \u2500\u2500 Visualizador \u2500\u2500 *\/\n    blur: 22,            \/\/ desenfoque de la esfera de fondo (px)\n    openMs: 750,         \/\/ duraci\u00f3n de la animaci\u00f3n al abrir\n    closeMs: 650,        \/\/ duraci\u00f3n de la animaci\u00f3n al cerrar\n\n    \/* \u2500\u2500 Movimiento de la esfera \u2500\u2500 *\/\n    sensitivity: 0.003,  \/\/ sensibilidad al arrastrar\n    smoothing: 0.09,     \/\/ suavizado (0.04 = muy suave\/lento \u00b7 0.2 = m\u00e1s directo)\n    inertia: 0.955,      \/\/ inercia al soltar\n    drift: 0.0005,       \/\/ giro autom\u00e1tico lento (0 = desactivado)\n\n    \/* Bloquear el scroll de la p\u00e1gina mientras est\u00e1 esta secci\u00f3n *\/\n    lockScroll: true,\n\n    \/* \u2605\u2605\u2605 3) TU CURSOR PERSONALIZADO \u2605\u2605\u2605\n       Estos elementos se ocultan mientras el l\u00e1piz est\u00e1 activo. A\u00f1ade el selector real de tu cursor. *\/\n    hideCustomCursor: [\n      '[class*=\"cursor\"]',\n      '[id*=\"cursor\"]',\n      '.mouse-follower',\n      '.mf-cursor',\n      '.cb-cursor'\n    ],\n\n    \/* \u2605\u2605\u2605 4) HEADER TRANSPARENTE Y SUPERPUESTO \u2605\u2605\u2605\n       El header queda siempre visible encima de todo, sin fondo. Si no coincide con ninguno\n       de estos selectores, el c\u00f3digo intenta detectarlo solo; tambi\u00e9n puedes a\u00f1adir el suyo. *\/\n    headerOverlay: true,\n    headerSelectors: [\n      '.elementor-location-header',\n      '[data-elementor-type=\"header\"]',\n      '#masthead'\n    ]\n  };\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 A PARTIR DE AQU\u00cd NO HACE FALTA TOCAR NADA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  const root  = document.getElementById('pgRoot');\n  const stage = document.getElementById('pgStage');\n  const world = document.getElementById('pgWorld');\n  const hint  = document.getElementById('pgHint');\n  const htmlEl = document.documentElement;\n  const cssVar = n => getComputedStyle(htmlEl).getPropertyValue(n).trim();\n  const GREEN = cssVar('--pg-green') || '#3dde6f';\n  const BG    = cssVar('--pg-bg')    || '#f9f9f9';\n  const isInv = () => htmlEl.classList.contains('dmb-invertido');\n  const fg    = () => isInv() ? BG : GREEN;      \/\/ color del l\u00e1piz: verde normal \u00b7 claro en modo invertido\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  const inEditor = \/elementor-editor-(active|preview)\/.test(document.body.className);\n  const R = CONFIG.radius;\n  const E = CONFIG.paintOverflow;\n\n  hint.textContent = TEXT.hint;\n  htmlEl.classList.add('pg-on');\n  root.querySelector('.pg-veil').style.cssText +=\n    `-webkit-backdrop-filter:blur(${CONFIG.blur}px);backdrop-filter:blur(${CONFIG.blur}px);`;\n\n  \/* \u2500\u2500 Texto central: color = |fondo \u2212 verde| para que, con \"difference\", se vea en tu verde \u2500\u2500 *\/\n  const rgbOf = c => {\n    const d = document.createElement('div');\n    d.style.cssText = 'display:none;color:' + c;\n    document.body.appendChild(d);\n    const m = getComputedStyle(d).color.match(\/[\\d.]+\/g).map(Number);\n    d.remove();\n    return m;\n  };\n  try {\n    const g = rgbOf(GREEN), b = rgbOf(BG);\n    const tc = [0, 1, 2].map(i => Math.abs(b[i] - g[i]));\n    root.style.setProperty('--pg-title-c', `rgb(${tc.join(',')})`);\n  } catch(e){}\n\n  \/* \u2500\u2500 Bloquear scroll de la p\u00e1gina + mostrar hint al primer scroll \u2500\u2500 *\/\n  let lbState = 'closed';          \/\/ closed | opening | open | switching | closing\n  let hintShown = false, hintDone = false;\n  function showHint(){ if (hintShown || hintDone) return; hintShown = true; hint.classList.add('show'); }\n  function hideHint(){ hintDone = true; hint.classList.remove('show'); }\n\n  if (CONFIG.lockScroll && !inEditor) htmlEl.classList.add('pg-lock');\n  window.addEventListener('wheel', e => {\n    if (CONFIG.lockScroll && !inEditor) e.preventDefault();\n    if (lbState === 'closed') showHint();\n  }, { passive: false });\n\n  \/* \u2500\u2500 Header transparente y superpuesto \u2500\u2500 *\/\n  if (CONFIG.headerOverlay && CONFIG.headerSelectors.length){\n    const st = document.createElement('style');\n    st.textContent = CONFIG.headerSelectors.map(s =>\n      `html.pg-on ${s}{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;` +\n      `background:transparent!important;background-color:transparent!important;box-shadow:none!important;` +\n      `border:0!important;backdrop-filter:none!important;z-index:1000!important}` +\n      `html.pg-on ${s} .elementor-element,html.pg-on ${s} .e-con,html.pg-on ${s} .e-con-inner,` +\n      `html.pg-on ${s} .elementor-section,html.pg-on ${s} .elementor-container,html.pg-on ${s} .elementor-widget-wrap` +\n      `{background:transparent!important;background-color:transparent!important;box-shadow:none!important}`\n    ).join('\\n') + '\\nhtml.pg-on .elementor-sticky__spacer{display:none!important}';\n    document.head.appendChild(st);\n  }\n\n  \/* \u2500\u2500 Header: detecci\u00f3n AUTOM\u00c1TICA de su fondo (por si los selectores no lo encuentran) \u2500\u2500 *\/\n  if (CONFIG.headerOverlay){\n    const clear = e => {\n      e.style.setProperty('background', 'transparent', 'important');\n      e.style.setProperty('background-color', 'transparent', 'important');\n      e.style.setProperty('backdrop-filter', 'none', 'important');\n      e.style.setProperty('box-shadow', 'none', 'important');\n    };\n    const clearHeader = () => {\n      const maxH = window.innerHeight * 0.35;\n      const found = new Set();\n      [16, window.innerWidth \/ 2, window.innerWidth - 16].forEach(x => {\n        document.elementsFromPoint(x, 6).forEach(el => {\n          if (el === htmlEl || el === document.body || el.closest('.pg-wrap, .pg-lb, .pg-pencil')) return;\n          let c = el;\n          while (c.parentElement && c.parentElement !== document.body && c.parentElement !== htmlEl &&\n                 c.parentElement.getBoundingClientRect().height <= maxH) c = c.parentElement;\n          const r = c.getBoundingClientRect();\n          if (r.height <= maxH && r.top <= 40) found.add(c);\n        });\n      });\n      found.forEach(c => {\n        clear(c);\n        c.querySelectorAll('*').forEach(d => {\n          if (d.getBoundingClientRect().width > window.innerWidth * 0.3) clear(d);\n        });\n        if (getComputedStyle(c).position === 'static') c.style.setProperty('position', 'relative', 'important');\n        c.style.setProperty('z-index', '1000', 'important');\n      });\n    };\n    [0, 400, 1500].forEach(t => setTimeout(clearHeader, t));\n    window.addEventListener('resize', clearHeader);\n  }\n\n  \/* \u2500\u2500 Ocultar cursor personalizado (solo mientras el l\u00e1piz est\u00e1 activo) \u2500\u2500 *\/\n  if (CONFIG.hideCustomCursor.length){\n    const st = document.createElement('style');\n    st.textContent = CONFIG.hideCustomCursor.map(sel =>\n      `html.pg-pencil-on ${sel}:not(html):not(body):not(.pg-pencil):not(.pg-lb):not(.pg-lb *)` +\n      `{display:none!important;visibility:hidden!important;opacity:0!important}`\n    ).join('\\n');\n    document.head.appendChild(st);\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ESFERA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  const tileW = CONFIG.tileWidth || Math.max(260, Math.min(420, window.innerWidth * 0.28));\n  const tiles = [];\n  const N = Math.max(IMAGES.length, CONFIG.minTiles);\n  const GA = Math.PI * (3 - Math.sqrt(5));\n  const LIFT = CONFIG.paintLift;\n  const LIFT_SCALE = (R - LIFT) \/ R;   \/\/ compensa el adelanto para que lo pintado coincida con la foto\n\n  for (let k = 0; k < N; k++){\n    const idx = k % IMAGES.length;\n    const lat = Math.asin(1 - 2 * (k + 0.5) \/ N);\n    const lng = k * GA;\n\n    const tile = document.createElement('div');\n    tile.className = 'pg-tile';\n    tile.dataset.k = k;\n    tile.style.width = tileW + 'px';\n    tile.style.transform =\n      `translate(-50%,-50%) rotateY(${lng}rad) rotateX(${-lat}rad) translateZ(${-R}px)`;\n\n    const card = document.createElement('div'); card.className = 'pg-card';\n    card.style.setProperty('--pg-src', 'url(\"' + IMAGES[idx] + '\")');\n    const img  = document.createElement('img'); img.className = 'pg-thumb'; img.draggable = false; img.decoding = 'async';\n\n    \/* SEO\/accesibilidad: solo la primera aparici\u00f3n de cada imagen lleva alt; las repetidas son decorativas *\/\n    if (k < IMAGES.length){ img.alt = ALTS[idx] || ''; }\n    else { img.alt = ''; tile.setAttribute('aria-hidden', 'true'); }\n\n    card.appendChild(img); tile.appendChild(card); world.appendChild(tile);\n\n    \/* capa de pintura (hermana de la foto, adelantada y a mayor tama\u00f1o) *\/\n    const pl = document.createElement('canvas');   \/\/ canvas (no <img>): se copia la pintura directamente, sin blobs\n    pl.className = 'pg-pl'; pl.width = 1; pl.height = 1; pl.setAttribute('aria-hidden', 'true');\n    pl.style.transform =\n      `translate(-50%,-50%) rotateY(${lng}rad) rotateX(${-lat}rad) translateZ(${-R + LIFT}px) scale(${LIFT_SCALE})`;\n    world.appendChild(pl);\n\n    const obj = { k, idx, lng, lat, el: tile, card, pl };\n    tiles.push(obj);\n\n    img.onload = () => {\n      setTimeout(() => tile.classList.add('in'), Math.random() * 900);\n    };\n    img.onerror = () => { tile.remove(); pl.remove(); };\n    img.src = IMAGES[idx];\n  }\n\n  \/* \u2500\u2500 C\u00e1mara: rotaci\u00f3n desde dentro, con suavizado \u2500\u2500 *\/\n  let yaw = 0, pitch = 0;          \/\/ valores actuales (renderizados)\n  let ty = 0,  tp = 0;             \/\/ valores objetivo\n  let vy = 0,  vp = 0;             \/\/ velocidad (inercia)\n  let persp = CONFIG.perspective, perspTarget = CONFIG.perspective;\n  let dragging = false;\n  let lastT = performance.now();\n  let flightFn = null;             \/\/ animaci\u00f3n de apertura\/cierre (se ejecuta dentro del mismo frame)\n\n  function frame(now){\n    const dt = Math.min(50, now - lastT); lastT = now;\n    const f = dt \/ 16.667;                       \/\/ independiente de los fps\n    if (!dragging){\n      ty += (vy + CONFIG.drift) * f;\n      tp += vp * f;\n      const d = Math.pow(CONFIG.inertia, f);\n      vy *= d; vp *= d;\n    }\n    tp = clamp(tp, -1.35, 1.35);\n    const k = 1 - Math.pow(1 - CONFIG.smoothing, f);\n    yaw   += (ty - yaw) * k;\n    pitch += (tp - pitch) * k;\n    persp += (perspTarget - persp) * k;\n    stage.style.perspective = persp.toFixed(2) + 'px';\n    world.style.transform =\n      `translateZ(${persp.toFixed(2)}px) rotateX(${pitch.toFixed(5)}rad) rotateY(${yaw.toFixed(5)}rad)`;\n    if (flightFn) flightFn(now);                 \/\/ la esfera SIGUE movi\u00e9ndose con el visualizador abierto\n    requestAnimationFrame(frame);\n  }\n  requestAnimationFrame(frame);\n\n  \/* \u2500\u2500 Proyecci\u00f3n: d\u00f3nde est\u00e1 (en pantalla) cada foto de la esfera \u2500\u2500\n     Replica exactamente las transformaciones CSS para que la foto \"vuele\" desde\/hacia su sitio. *\/\n  function quadOf(t){\n    const w = tileW, h = t.card.offsetHeight;\n    if (!h) return null;\n    const rect = stage.getBoundingClientRect();\n    const scx = rect.left + rect.width \/ 2, scy = rect.top + rect.height \/ 2;\n    const cyw = Math.cos(yaw), syw = Math.sin(yaw), cp = Math.cos(pitch), sp = Math.sin(pitch);\n    const ca = Math.cos(t.lng), sa = Math.sin(t.lng), cb = Math.cos(-t.lat), sb = Math.sin(-t.lat);\n    const P = (u, v) => {\n      const y1 = v * cb + R * sb, z1 = v * sb - R * cb, x1 = u;      \/\/ translateZ(-R) + rotateX(-lat)\n      const x2 = x1 * ca + z1 * sa, z2 = -x1 * sa + z1 * ca, y2 = y1; \/\/ rotateY(lng)\n      const x3 = x2 * cyw + z2 * syw, z3 = -x2 * syw + z2 * cyw, y3 = y2; \/\/ rotateY(yaw)\n      const y4 = y3 * cp - z3 * sp, z4 = y3 * sp + z3 * cp + persp, x4 = x3; \/\/ rotateX(pitch) + translateZ(persp)\n      if (z4 > persp - 5) return null;                                \/\/ detr\u00e1s de la c\u00e1mara\n      const k = persp \/ (persp - z4);\n      return [scx + x4 * k, scy + y4 * k];\n    };\n    const TL = P(-w\/2, -h\/2), TR = P(w\/2, -h\/2), BL = P(-w\/2, h\/2), BR = P(w\/2, h\/2);\n    if (!TL || !TR || !BL || !BR) return null;\n    const dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);\n    return {\n      cx: (TL[0] + TR[0] + BL[0] + BR[0]) \/ 4,\n      cy: (TL[1] + TR[1] + BL[1] + BR[1]) \/ 4,\n      w: (dist(TL, TR) + dist(BL, BR)) \/ 2,\n      h: (dist(TL, BL) + dist(TR, BR)) \/ 2,\n      ang: (Math.atan2(TR[1] - TL[1], TR[0] - TL[0]) + Math.atan2(BR[1] - BL[1], BR[0] - BL[0])) \/ 2\n    };\n  }\n  function bestTile(idx){\n    let best = null, bd = Infinity;\n    tiles.forEach(t => {\n      if (t.idx !== idx || !t.el.isConnected) return;\n      const q = quadOf(t);\n      if (!q) return;\n      const d = Math.hypot(q.cx - innerWidth \/ 2, q.cy - innerHeight \/ 2);\n      if (d < bd){ bd = d; best = t; }\n    });\n    return best;\n  }\n  function aspectOf(idx){\n    const t = tiles.find(t => t.idx === idx && t.el.isConnected && t.card.offsetHeight > 0);\n    return t ? t.card.offsetWidth \/ t.card.offsetHeight : 1;\n  }\n\n  \/* \u2500\u2500 Arrastrar para girar \/ click para abrir \u2500\u2500 *\/\n  let sx = 0, sy = 0, lx = 0, ly = 0, lt = 0, moved = 0, downTarget = null, active = false;\n\n  root.addEventListener('pointerdown', e => {\n    if (e.button !== 0 || lbState !== 'closed') return;\n    active = true; dragging = true; moved = 0;\n    sx = lx = e.clientX; sy = ly = e.clientY; lt = performance.now();\n    downTarget = e.target; vy = vp = 0;\n    hideHint();                                   \/\/ ya sabe qu\u00e9 hacer\n  });\n  window.addEventListener('pointermove', e => {\n    if (!active) return;\n    const now = performance.now();\n    const dx = e.clientX - lx, dy = e.clientY - ly;\n    const f = Math.max(0.5, (now - lt) \/ 16.667);\n    lx = e.clientX; ly = e.clientY; lt = now;\n    moved = Math.max(moved, Math.hypot(e.clientX - sx, e.clientY - sy));\n    if (moved > 5) root.classList.add('drag');\n    const ddy = -dx * CONFIG.sensitivity;\n    const ddp =  dy * CONFIG.sensitivity;\n    ty += ddy;\n    tp = clamp(tp + ddp, -1.35, 1.35);\n    vy = vy * 0.5 + (ddy \/ f) * 0.5;             \/\/ velocidad suavizada\n    vp = vp * 0.5 + (ddp \/ f) * 0.5;\n  });\n  window.addEventListener('pointerup', () => {\n    if (!active) return;\n    active = false; dragging = false; root.classList.remove('drag');\n    if (performance.now() - lt > 80){ vy = vp = 0; }   \/\/ soltar parado = sin lanzamiento\n    if (moved <= 5 && downTarget){\n      const te = downTarget.closest && downTarget.closest('.pg-tile');\n      if (te) openLB(tiles[parseInt(te.dataset.k, 10)]);\n    }\n    downTarget = null;\n  });\n  root.addEventListener('wheel', e => {\n    e.preventDefault();\n    if (lbState !== 'closed') return;\n    perspTarget = clamp(perspTarget + e.deltaY * 0.4, 220, 1200);\n  }, { passive: false });\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VISUALIZADOR + PINTURA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  const lb = document.createElement('div');\n  lb.className = 'pg-lb';\n  lb.innerHTML = `\n    <div class=\"pg-hero\"><img alt=\"\"><\/div>\n    <div class=\"pg-nav\">\n      <div class=\"pg-count\"><\/div>\n      <button class=\"pg-btn pg-close\" aria-label=\"${TEXT.close}\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"square\"><path d=\"M1 1l10 10M11 1L1 11\"\/><\/svg>\n      <\/button>\n      <button class=\"pg-btn pg-prev\" aria-label=\"${TEXT.prev}\">\n        <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"square\"><path d=\"M13 6H1M6 1L1 6l5 5\"\/><\/svg>\n      <\/button>\n      <button class=\"pg-btn pg-next\" aria-label=\"${TEXT.next}\">\n        <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"square\"><path d=\"M1 6h12M8 1l5 5-5 5\"\/><\/svg>\n      <\/button>\n      <div class=\"pg-tip\">${TEXT.tip}<\/div>\n    <\/div>`;\n  document.body.appendChild(lb);   \/\/ fuera de Elementor para que \"fixed\" funcione bien\n\n  const hero    = lb.querySelector('.pg-hero');\n  const heroImg = hero.querySelector('img');\n  const lbCount = lb.querySelector('.pg-count');\n\n  \/* L\u00e1piz: silueta verde minimalista (punta abajo a la izquierda) *\/\n  const pencil = document.createElement('div');\n  pencil.className = 'pg-pencil';\n  pencil.innerHTML = `\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 36 36\"\n         stroke-width=\".9\" stroke-linejoin=\"round\" paint-order=\"stroke\">\n      <polygon points=\"4,32 9.84,23.04 12.96,26.16\"\/>\n      <polygon points=\"11.04,21.84 23.84,9.04 26.96,12.16 14.16,24.96\"\/>\n      <polygon points=\"25.04,7.84 27.24,5.64 30.36,8.76 28.16,10.96\"\/>\n    <\/svg>`;\n  document.body.appendChild(pencil);\n  function showPencil(){ pencil.style.display = 'block'; lb.classList.add('pencil');    htmlEl.classList.add('pg-pencil-on'); }\n  function hidePencil(){ pencil.style.display = 'none';  lb.classList.remove('pencil'); htmlEl.classList.remove('pg-pencil-on'); }\n\n  let cur = 0, startIdx = 0, startTile = null, hiddenTile = null, targetTile = null;\n  const paints = [];   \/\/ un lienzo por imagen (M\u00c1S GRANDE que la foto: se puede pintar fuera de ella)\n\n  \/* El lienzo cubre TODA la pantalla (aunque se redimensione la ventana, usa el tama\u00f1o de monitor):\n     ex \/ ey = cu\u00e1nto sobresale por cada lado, en fracciones del ancho \/ alto de la foto. *\/\n  function getPaint(i, W, H){\n    if (paints[i]) return paints[i];\n    const a = aspectOf(i);\n    W = W || 400; H = H || W \/ a;\n    const needX = (Math.max(innerWidth,  screen.width  || 0) \/ W - 1) \/ 2;\n    const needY = (Math.max(innerHeight, screen.height || 0) \/ H - 1) \/ 2;\n    const ex = clamp(Math.max(E, needX), E, 3), ey = clamp(Math.max(E, needY), E, 3);\n    const L = 1000;                                   \/\/ resoluci\u00f3n base (lado largo de la foto)\n    const bw = a >= 1 ? L : L * a, bh = a >= 1 ? L \/ a : L;\n    let cw = bw * (1 + 2 * ex), ch = bh * (1 + 2 * ey);\n    const s = Math.min(1, 3600 \/ Math.max(cw, ch));   \/\/ tope de tama\u00f1o del lienzo\n    const c = document.createElement('canvas');\n    c.width  = Math.round(cw * s);\n    c.height = Math.round(ch * s);\n    c.style.cssText = `left:${-ex * 100}%;top:${-ey * 100}%;width:${(1 + 2 * ex) * 100}%;height:${(1 + 2 * ey) * 100}%`;\n    return (paints[i] = { c, ctx: c.getContext('2d'), dirty: false, used: false, ex, ey });\n  }\n\n  \/* Pasa la pintura del lienzo a las capas de pintura de la esfera *\/\n  function commit(i){\n    const p = paints[i];\n    if (!p || !p.dirty) return;\n    p.dirty = false;\n    const S = 0.5;                                    \/\/ las copias de la esfera van a media resoluci\u00f3n\n    const w = Math.max(1, Math.round(p.c.width * S)), h = Math.max(1, Math.round(p.c.height * S));\n    tiles.forEach(t => {\n      if (t.idx !== i || !t.pl.isConnected) return;\n      if (t.pl.width !== w || t.pl.height !== h){ t.pl.width = w; t.pl.height = h; }\n      t.pl.style.width  = (tileW * (1 + 2 * p.ex)) + 'px';             \/\/ tama\u00f1o en la esfera = foto + lo que sobresale\n      t.pl.style.height = (t.card.offsetHeight * (1 + 2 * p.ey)) + 'px';\n      const x = t.pl.getContext('2d');\n      x.clearRect(0, 0, w, h);\n      x.drawImage(p.c, 0, 0, w, h);\n      t.pl.style.display = 'block';\n    });\n  }\n\n  \/* Coloca la foto (tama\u00f1o final, centrada) y carga su contenido *\/\n  function setHeroContent(i){\n    cur = i;\n    const a = aspectOf(i);\n    const maxW = Math.min(innerWidth * 0.86, 1400), maxH = innerHeight * 0.78;\n    let W = maxW, H = W \/ a;\n    if (H > maxH){ H = maxH; W = H * a; }\n    hero.style.width = W + 'px'; hero.style.height = H + 'px';\n    hero.style.left = (innerWidth - W) \/ 2 + 'px';\n    hero.style.top  = (innerHeight - H) \/ 2 + 'px';\n    heroImg.alt = ALTS[i] || '';\n    heroImg.src = IMAGES[i];\n    hero.querySelectorAll('canvas').forEach(c => c.remove());\n    hero.appendChild(getPaint(i, W, H).c);\n    lbCount.textContent = String(i + 1).padStart(2, '0') + ' \/ ' + String(IMAGES.length).padStart(2, '0');\n  }\n\n  \/* Animaci\u00f3n de la foto entre su sitio en la esfera y el centro *\/\n  const ease = p => p < .5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) \/ 2;\n  function setHeroState(k, fadeOut){\n    const q = targetTile ? quadOf(targetTile) : null;\n    if (q){\n      const W = hero.offsetWidth, H = hero.offsetHeight;\n      const dx = (q.cx - innerWidth \/ 2) * k, dy = (q.cy - innerHeight \/ 2) * k;\n      hero.style.transform =\n        `translate(${dx}px,${dy}px) rotate(${q.ang * k}rad) scale(${1 + (q.w \/ W - 1) * k},${1 + (q.h \/ H - 1) * k})`;\n      hero.style.opacity = fadeOut;\n    } else {                                           \/\/ sin posici\u00f3n visible: se encoge y desvanece\n      hero.style.transform = `scale(${1 - 0.25 * k})`;\n      hero.style.opacity = 1 - k;\n    }\n  }\n  function flight(mode, onDone){\n    const dur = mode === 'open' ? CONFIG.openMs : CONFIG.closeMs;\n    const t0 = performance.now();\n    hero.style.transition = 'none';\n    const apply = p => {\n      const t = ease(p);\n      const k = mode === 'open' ? 1 - t : t;\n      const fade = (mode === 'close' && p > 0.8) ? 1 - (p - 0.8) \/ 0.2 : 1;   \/\/ al llegar, se funde con la foto de la esfera\n      setHeroState(k, fade);\n    };\n    apply(0);\n    flightFn = now => {\n      const p = Math.min(1, (now - t0) \/ dur);\n      apply(p);\n      if (p >= 1){ flightFn = null; onDone(); }\n    };\n  }\n\n  function openLB(t){\n    if (lbState !== 'closed' || !t) return;\n    lbState = 'opening';\n    startTile = targetTile = hiddenTile = t; startIdx = t.idx;\n    setHeroContent(t.idx);\n    t.el.style.visibility = 'hidden'; t.pl.style.visibility = 'hidden';\n    lb.classList.add('show');\n    root.classList.add('lb-open');\n    flight('open', () => {\n      hero.style.transform = ''; hero.style.opacity = 1;\n      lb.classList.add('nav-on');\n      lbState = 'open';\n    });\n  }\n\n  function closeLB(){\n    if (lbState !== 'open') return;\n    lbState = 'closing';\n    stroke = null; hidePencil();\n    lb.classList.remove('nav-on');                 \/\/ la navegaci\u00f3n se desvanece\n    commit(cur);\n    targetTile = (cur === startIdx && startTile && startTile.el.isConnected) ? startTile : bestTile(cur);\n    if (hiddenTile){ hiddenTile.el.style.visibility = ''; hiddenTile.pl.style.visibility = ''; hiddenTile = null; }\n    root.classList.remove('lb-open');              \/\/ el velo se desvanece y la esfera recupera su estado\n    flight('close', () => {\n      lb.classList.remove('show');\n      hero.style.transform = ''; hero.style.opacity = 1;\n      lbState = 'closed';\n    });\n  }\n\n  function go(d){\n    if (lbState !== 'open') return;\n    lbState = 'switching';\n    commit(cur);\n    if (hiddenTile){ hiddenTile.el.style.visibility = ''; hiddenTile.pl.style.visibility = ''; hiddenTile = null; }\n    hidePencil();\n    hero.style.transition = 'opacity .18s ease'; hero.style.opacity = 0;\n    setTimeout(() => {\n      setHeroContent((cur + d + IMAGES.length) % IMAGES.length);\n      hero.style.opacity = 1;\n      setTimeout(() => { hero.style.transition = 'none'; lbState = 'open'; }, 190);\n    }, 190);\n  }\n\n  \/* \u2500\u2500 Pintar (el lienzo es m\u00e1s grande que la foto) \u2500\u2500 *\/\n  let stroke = null;\n  const toCanvas = (e, p) => {\n    const r = p.c.getBoundingClientRect();\n    return { x: (e.clientX - r.left) * p.c.width \/ r.width,\n             y: (e.clientY - r.top)  * p.c.height \/ r.height,\n             k: p.c.width \/ r.width };\n  };\n  const insideImage = e => {\n    const r = hero.getBoundingClientRect();\n    return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;\n  };\n  const movePencil = e => { pencil.style.transform = `translate(${e.clientX}px,${e.clientY}px)`; };\n\n  lb.addEventListener('pointerdown', e => {\n    if (e.button !== 0 || lbState !== 'open') return;\n    if (e.target.closest && e.target.closest('.pg-btn')) return;\n    stroke = { sx: e.clientX, sy: e.clientY, started: false, last: null };\n    try { lb.setPointerCapture(e.pointerId); } catch(_){}\n    if (insideImage(e)) beginStroke(e.clientX, e.clientY);\n    movePencil(e); showPencil();                      \/\/ el l\u00e1piz aparece en cualquier punto de la pantalla\n  });\n  function beginStroke(x, y){\n    const p = getPaint(cur);\n    const q = toCanvas({ clientX: x, clientY: y }, p);\n    p.ctx.fillStyle = fg();\n    p.ctx.beginPath(); p.ctx.arc(q.x, q.y, CONFIG.brushSize * q.k \/ 2, 0, Math.PI * 2); p.ctx.fill();\n    stroke.last = q; stroke.started = true; p.dirty = true; p.used = true;\n  }\n  lb.addEventListener('pointermove', e => {\n    if (lbState !== 'open') return;\n    const overBtn = e.target.closest && e.target.closest('.pg-btn');\n    if (stroke || !overBtn){ movePencil(e); showPencil(); } else hidePencil();\n    if (!stroke) return;\n    if (!stroke.started){\n      \/* puls\u00f3 fuera de la foto: si arrastra, empieza a pintar; si solo hace click, cierra *\/\n      if (Math.hypot(e.clientX - stroke.sx, e.clientY - stroke.sy) > 4) beginStroke(stroke.sx, stroke.sy);\n      else return;\n    }\n    if (!(e.buttons & 1)) return;\n    const p = getPaint(cur);\n    const q = toCanvas(e, p);\n    p.ctx.strokeStyle = fg(); p.ctx.lineCap = 'round'; p.ctx.lineJoin = 'round';\n    p.ctx.lineWidth = CONFIG.brushSize * q.k;\n    p.ctx.beginPath(); p.ctx.moveTo(stroke.last.x, stroke.last.y); p.ctx.lineTo(q.x, q.y); p.ctx.stroke();\n    stroke.last = q; p.dirty = true;\n  });\n  const endStroke = e => {\n    if (!stroke) return;\n    const wasClick = !stroke.started;\n    stroke = null;\n    commit(cur);                                                \/\/ la pintura pasa a la esfera al soltar\n    if (wasClick && e && e.type === 'pointerup') closeLB();     \/\/ click fuera de la foto \u2192 cierra\n  };\n  lb.addEventListener('pointerup', endStroke);\n  lb.addEventListener('pointercancel', () => { stroke = null; });\n  lb.addEventListener('contextmenu', e => e.preventDefault());\n  lb.addEventListener('pointerleave', () => { if (!stroke) hidePencil(); });\n\n  \/* Cambio de color de la web (bot\u00f3n del header): lo ya pintado cambia de color en todas las fotos *\/\n  let lastInv = isInv();\n  let swapTimer = 0, swapTimer2 = 0;\n  new MutationObserver(() => {\n    const now = isInv();\n    if (now === lastInv) return;\n    lastInv = now;\n\n    \/* Fade: la esfera se oculta ANTES del primer frame con los colores nuevos, se recolorea todo\n       sin transiciones (sin parpadeos) y reaparece suavemente. *\/\n    clearTimeout(swapTimer); clearTimeout(swapTimer2);\n    root.classList.add('pg-swap');\n    root.style.opacity = '0';\n    swapTimer = setTimeout(() => {\n      root.classList.remove('pg-swap');\n      root.style.transition = 'opacity .5s ease';\n      void root.offsetWidth;\n      root.style.opacity = '';\n      swapTimer2 = setTimeout(() => { root.style.transition = ''; }, 560);\n    }, 80);\n\n    const col = fg();\n    paints.forEach((p, i) => {\n      if (!p || !p.used) return;\n      p.ctx.globalCompositeOperation = 'source-in';\n      p.ctx.fillStyle = col;\n      p.ctx.fillRect(0, 0, p.c.width, p.c.height);\n      p.ctx.globalCompositeOperation = 'source-over';\n      p.dirty = true; commit(i);\n    });\n  }).observe(htmlEl, { attributes: true, attributeFilter: ['class'] });\n\n  lb.querySelector('.pg-close').onclick = closeLB;\n  lb.querySelector('.pg-prev').onclick  = () => go(-1);\n  lb.querySelector('.pg-next').onclick  = () => go(1);\n  window.addEventListener('keydown', e => {\n    if (lbState !== 'open') return;\n    if (e.key === 'Escape') closeLB();\n    if (e.key === 'ArrowLeft')  go(-1);\n    if (e.key === 'ArrowRight') go(1);\n  });\n  window.addEventListener('resize', () => { if (lbState === 'open') setHeroContent(cur); });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hi! This is my playground: unfinished projects, ideas lost in drawers, rejected proposals and experiments. Have a look, or paint something.<\/p>","protected":false},"author":1,"featured_media":4178,"parent":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-100","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Playground | Experiments, Artworks &amp; Visuals \u2014 byDMB<\/title>\n<meta name=\"description\" content=\"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bydmb.com\/es\/playground\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playground | Experiments, Artworks &amp; Visuals \u2014 byDMB\" \/>\n<meta property=\"og:description\" content=\"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bydmb.com\/es\/playground\/\" \/>\n<meta property=\"og:site_name\" content=\"David M Ballar\u00edn\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-14T23:45:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/PLEASE-BE-FUCKING-KIND.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Playground | Experiments, Artworks &amp; Visuals \u2014 byDMB\" \/>\n<meta name=\"twitter:description\" content=\"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/PLEASE-BE-FUCKING-KIND.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/\",\"url\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/\",\"name\":\"Playground | Experiments, Artworks & Visuals \u2014 byDMB\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/TRAFFIC-1.jpg\",\"datePublished\":\"2022-04-02T09:36:26+00:00\",\"dateModified\":\"2026-10-14T23:45:23+00:00\",\"description\":\"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bydmb.com\\\/playground\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/TRAFFIC-1.jpg\",\"contentUrl\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/TRAFFIC-1.jpg\",\"width\":2076,\"height\":2076},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/playground\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/bydmb.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Playground\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/#website\",\"url\":\"https:\\\/\\\/bydmb.com\\\/\",\"name\":\"byDMB\",\"description\":\"Portfolio ByDMB\",\"publisher\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/#\\\/schema\\\/person\\\/782ed7a7ebdf95447d3d182355446533\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bydmb.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/bydmb.com\\\/#\\\/schema\\\/person\\\/782ed7a7ebdf95447d3d182355446533\",\"name\":\"bydavidmartinez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\",\"url\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\",\"contentUrl\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\",\"width\":1080,\"height\":1080,\"caption\":\"bydavidmartinez\"},\"logo\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\"},\"sameAs\":[\"https:\\\/\\\/bydmb.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Playground | Experiments, Artworks & Visuals \u2014 byDMB","description":"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.","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:\/\/bydmb.com\/es\/playground\/","og_locale":"es_ES","og_type":"article","og_title":"Playground | Experiments, Artworks & Visuals \u2014 byDMB","og_description":"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.","og_url":"https:\/\/bydmb.com\/es\/playground\/","og_site_name":"David M Ballar\u00edn","article_modified_time":"2026-10-14T23:45:23+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/PLEASE-BE-FUCKING-KIND.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"Playground | Experiments, Artworks & Visuals \u2014 byDMB","twitter_description":"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.","twitter_image":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/03\/PLEASE-BE-FUCKING-KIND.jpg","twitter_misc":{"Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bydmb.com\/playground\/","url":"https:\/\/bydmb.com\/playground\/","name":"Playground | Experiments, Artworks & Visuals \u2014 byDMB","isPartOf":{"@id":"https:\/\/bydmb.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bydmb.com\/playground\/#primaryimage"},"image":{"@id":"https:\/\/bydmb.com\/playground\/#primaryimage"},"thumbnailUrl":"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/03\/TRAFFIC-1.jpg","datePublished":"2022-04-02T09:36:26+00:00","dateModified":"2026-10-14T23:45:23+00:00","description":"A visual laboratory of graphic experiments, unseen projects, motion tests, artworks, and digital explorations by David M Ballar\u00edn.","breadcrumb":{"@id":"https:\/\/bydmb.com\/playground\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bydmb.com\/playground\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/bydmb.com\/playground\/#primaryimage","url":"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/03\/TRAFFIC-1.jpg","contentUrl":"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/03\/TRAFFIC-1.jpg","width":2076,"height":2076},{"@type":"BreadcrumbList","@id":"https:\/\/bydmb.com\/playground\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/bydmb.com\/"},{"@type":"ListItem","position":2,"name":"Playground"}]},{"@type":"WebSite","@id":"https:\/\/bydmb.com\/#website","url":"https:\/\/bydmb.com\/","name":"byDMB","description":"Portfolio ByDMB","publisher":{"@id":"https:\/\/bydmb.com\/#\/schema\/person\/782ed7a7ebdf95447d3d182355446533"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bydmb.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/bydmb.com\/#\/schema\/person\/782ed7a7ebdf95447d3d182355446533","name":"bydavidmartinez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png","url":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png","contentUrl":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png","width":1080,"height":1080,"caption":"bydavidmartinez"},"logo":{"@id":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png"},"sameAs":["https:\/\/bydmb.com"]}]}},"_links":{"self":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":636,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":7648,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages\/100\/revisions\/7648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/media\/4178"}],"wp:attachment":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/media?parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}