Estudios Retiro \u2014 Mapa de artistas (responsive)<\/title>\n<style>\n :root {\n --line-color: #000;\n --dot-size: 50px; \/* escritorio *\/\n --line-thick: 2px;\n --text: #000;\n }\n\n * { box-sizing: border-box; }\n html, body { height: 100%; }\n body { margin: 0; font-family: Helvetica, Arial, sans-serif; color: var(--text); background: #fff; }\n\n .custom-design {\n position: relative;\n height: 100vh;\n display: grid;\n place-items: center;\n background: #fff;\n overflow: hidden;\n }\n\n \/* =================== ESCRITORIO =================== *\/\n .name-button {\n display: inline-block;\n padding: 0;\n font-size: 15px;\n color: var(--text);\n text-decoration: none;\n border: none;\n background: none;\n cursor: pointer;\n line-height: 1.2;\n transition: transform .25s ease, color .25s ease;\n }\n .name-button:hover,\n .name-button:focus-visible { transform: scale(1.2); color: #555; outline: none; }\n\n .line-horizontal,\n .line-vertical,\n .line-vertical-top,\n .line-vertical-right { position: absolute; background: var(--line-color); }\n\n .line-horizontal { width: 560px; height: var(--line-thick); top: 50%; left: calc(50% - 280px); }\n .line-vertical { width: var(--line-thick); height: 170px; top: 50%; left: calc(50% - 200px); transform: translateX(-1px); }\n .line-vertical-top { width: var(--line-thick); height: 80px; top: calc(50% - 80px); left: calc(50% - 200px); transform: translateX(-1px); }\n .line-vertical-right { width: var(--line-thick); height: 150px; top: calc(50% - 150px); left: calc(50% + 200px); }\n\n \/* Puntos negros (fijos, sin interacci\u00f3n) *\/\n .dot {\n width: var(--dot-size);\n height: var(--dot-size);\n border-radius: 50%;\n background: #000;\n position: absolute;\n pointer-events: none; \/* no clics *\/\n cursor: default; \/* cursor normal *\/\n }\n .dot:hover { transform: none; } \/* sin efecto hover *\/\n\n .circle-right { left: calc(50% + 300px + 10px - 25px); top: calc(50% - 25px); }\n .circle-top-right { top: calc(50% - 150px - 45px - 10px); left: calc(50% + 200px + 0px - 25px); }\n .circle-bottom-left{ top: calc(50% + 200px - 25px); left: calc(50% - 200px - 25px); }\n .circle-top-left { top: calc(50% - 100px - 25px - 10px); left: calc(50% - 200px - 25px); }\n\n .names-display { position: absolute; top: calc(50% - 150px); left: calc(50% + 250px); transform: translateY(-50%); text-align: left; }\n .names-display-left { position: absolute; top: calc(50% - 100px); left: calc(50% - 380px); transform: translateY(-50%); text-align: right; }\n .names-display-bottom-left { position: absolute; top: calc(50% + 200px); left: calc(50% - 380px); transform: translateY(-50%); text-align: right; }\n\n .names-display a,\n .names-display-left a,\n .names-display-bottom-left a { display: inline-block; margin: 2px 0; }\n\n .brand { position: absolute; top: 50%; left: calc(50% + 350px + 60px); transform: translate(-50%, -50%); }\n\n \/* =================== M\u00d3VIL (\u2264768px) =================== *\/\n \/* OJO: tu bloque m\u00f3vil estaba incompleto y con llaves sueltas; lo mantengo tal cual lo ten\u00edas\n para no alterar nada m\u00e1s de lo que pediste. Si quieres, luego lo limpiamos. *\/\n\n@media (max-width: 768px) and (orientation: landscape) { \u2026 }\n\n{\n .custom-design {\n padding: clamp(32px, 6vh, 64px) 20px clamp(8px, 2vh, 24px) 20px !important;\n margin-bottom: calc(0 * clamp(40px, 10vh, 120px)) !important;\n.timeline .tl-group:last-child { padding-bottom: clamp(32px, 10vh, 140px) }\n }\n\n .line-horizontal,\n .line-vertical,\n .line-vertical-top,\n .line-vertical-right,\n .circle-right,\n .circle-top-right,\n .circle-bottom-left,\n .circle-top-left,\n .names-display,\n .names-display-left,\n .names-display-bottom-left,\n .brand { display: none !important; }\n\n .timeline { display: block; position: relative; margin: 0 auto; max-width: 640px; padding: 0 16px; }\n .timeline::before { content: \"\"; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.5px; background: var(--line-color); transform: translateX(-50%); }\n\n .tl-group { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: clamp(14px, 3vw, 24px) 0; }\n .tl-group::before { content: \"\"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(24px, 4vw, 28px); height: clamp(24px, 4vw, 28px); border-radius: 50%; background: #000; }\n\n .tl-left { grid-column: 1 \/ 2; text-align: right; padding-right: clamp(18px, 5vw, 32px); }\n .tl-right { grid-column: 2 \/ 3; text-align: left; padding-left: clamp(18px, 5vw, 32px); }\n\n .timeline .name-button { font-size: clamp(10px, 3vw, 12px); transition: transform .25s ease, color .25s ease; }\n\n .timeline .name-button:hover,\n .timeline .name-button:focus-visible { color: #555; }\n .timeline .tl-left .name-button:hover,\n .timeline .tl-left .name-button:focus-visible { transform: translateX(-12px); }\n .timeline .tl-right .name-button:hover,\n .timeline .tl-right .name-button:focus-visible { transform: translateX(12px); }\n }\n \/* ======= FIXES DE VISIBILIDAD Y SUPERPOSICI\u00d3N (override) ======= *\/\n @media (min-width: 769px) {\n .timeline { display: none !important; }\n }\n\n @media (max-width: 768px) {\n .line-horizontal,\n .line-vertical,\n .line-vertical-top,\n .line-vertical-right,\n .circle-right,\n .circle-top-right,\n .circle-bottom-left,\n .circle-top-left,\n .names-display,\n .names-display-left,\n .names-display-bottom-left,\n .brand { display: none !important; }\n\n .timeline { display: block !important; position: relative; margin: 0 auto; max-width: 640px; padding: 0 16px; }\n .timeline::before { content: \"\"; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.5px; background: var(--line-color); transform: translateX(-50%); }\n\n .tl-group { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; padding: clamp(18px, 4vw, 28px) 0; }\n .tl-group::before { content: \"\"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(24px, 4vw, 30px); height: clamp(24px, 4vw, 30px); border-radius: 50%; background: #000; z-index: 0; }\n\n .tl-left { grid-column: 1 \/ 2; text-align: right; padding-right: clamp(22px, 6vw, 36px); }\n .tl-right { grid-column: 2 \/ 3; text-align: left; padding-left: clamp(22px, 6vw, 36px); }\n\n .list { display: flex; flex-direction: column; gap: 10px; line-height: 1.25; overflow-wrap: anywhere; position: relative; z-index: 1; }\n\n .timeline .name-button { font-size: clamp(9px, 2.8vw, 11px); transition: transform .25s ease, color .25s ease; }\n .timeline .name-button:hover,\n .timeline .name-button:focus-visible { color: #555; }\n .timeline .tl-left .name-button:hover,\n .timeline .tl-left .name-button:focus-visible { transform: translateX(-12px); }\n .timeline .tl-right .name-button:hover,\n .timeline .tl-right .name-button:focus-visible { transform: translateX(12px); }\n }\n @media (max-width: 768px) {\n .custom-design {\n padding: clamp(32px, 6vh, 64px) 20px clamp(8px, 2vh, 24px) 20px !important;\n margin-bottom: calc(-1 * clamp(40px, 10vh, 120px)) !important;\n }\n }\n @media (max-width: 768px) and (max-height: 580px) {\n .custom-design { margin-bottom: calc(-1 * clamp(20px, 6vh, 80px)) !important; }\n }\n<\/style>\n<\/head>\n<body>\n <div class=\"custom-design\">\n \n <div class=\"line-horizontal\" aria-hidden=\"true\"><\/div>\n <div class=\"line-vertical\" aria-hidden=\"true\"><\/div>\n <div class=\"line-vertical-top\" aria-hidden=\"true\"><\/div>\n <div class=\"line-vertical-right\" aria-hidden=\"true\"><\/div>\n\n <div class=\"dot circle-right\" aria-hidden=\"true\"><\/div>\n <div class=\"dot circle-top-right\" aria-hidden=\"true\"><\/div>\n <div class=\"dot circle-bottom-left\" aria-hidden=\"true\"><\/div>\n <div class=\"dot circle-top-left\" aria-hidden=\"true\"><\/div>\n\n <nav class=\"brand\" aria-label=\"Marca\">\n <a class=\"name-button\" href=\"https:\/\/www.instagram.com\/estudiosretiro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Estudios Retiro<\/a>\n <\/nav>\n\n <div class=\"names-display\" aria-label=\"Artistas derecha\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/andres-aparicio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Andr\u00e9s Aparicio<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/alexis-sanchez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alexis S\u00e1nchez<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/avoirse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marta Mart\u00ednez<\/a>\n <\/div>\n\n <div class=\"names-display-left\" aria-label=\"Artistas arriba izquierda\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/antonio-sobrino\/\" target=\"_blank\" rel=\"noopener noreferrer\">Antonio Sobrino<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/elena-nunez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Elena N\u00fa\u00f1ez<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/raquel-molina\/\" target=\"_blank\" rel=\"noopener noreferrer\">Raquel Jim\u00e9nez<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/johanna-failer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Johanna Failer<\/a><br>\n <\/div>\n\n <div class=\"names-display-bottom-left\" aria-label=\"Artistas abajo izquierda\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/amara-toledo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Amara Toledo<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/israel-tirado\/\" target=\"_blank\" rel=\"noopener noreferrer\">Israel Tirado<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/juanma-beneitez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Juanma Ben\u00edtez<\/a>\n <\/div>\n\n \n <section class=\"timeline\" aria-label=\"Listado de artistas (vertical)\">\n <article class=\"tl-group\" aria-label=\"Estudio \u2014 Inicio\">\n <div class=\"tl-left\"><\/div>\n <div class=\"tl-right list\">\n <a class=\"name-button\" href=\"https:\/\/www.instagram.com\/estudiosretiro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Estudios Retiro<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tl-group\" aria-label=\"Arriba izquierda\">\n <div class=\"tl-left list\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/antonio-sobrino\/\" target=\"_blank\" rel=\"noopener noreferrer\">Antonio Sobrino<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/elena-nunez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Elena N\u00fa\u00f1ez<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/raquel-molina\/\" target=\"_blank\" rel=\"noopener noreferrer\">Raquel Jim\u00e9nez<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/johanna-failer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Johanna Failer<\/a>\n <\/div>\n <div class=\"tl-right\"><\/div>\n <\/article>\n\n <article class=\"tl-group\" aria-label=\"Derecha\">\n <div class=\"tl-left\"><\/div>\n <div class=\"tl-right list\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/andres-aparicio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Andr\u00e9s Aparicio<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/alexis-sanchez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alexis S\u00e1nchez<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/avoirse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marta Mart\u00ednez<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tl-group\" aria-label=\"Abajo izquierda\">\n <div class=\"tl-left list\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/amara-toledo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Amara Toledo<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/israel-tirado\/\" target=\"_blank\" rel=\"noopener noreferrer\">Israel Tirado<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/juanma-beneitez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Juanma Ben\u00edtez<\/a>\n <\/div>\n <div class=\"tl-right\"><\/div>\n <\/article>\n <\/section>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Estudios Retiro \u2014 Mapa de artistas (responsive) Estudios Retiro Andr\u00e9s Aparicio Alexis S\u00e1nchez Marta Mart\u00ednez Antonio Sobrino Elena N\u00fa\u00f1ez Raquel […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":61,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2024-12-02T16:22:42","date_gmt":"2024-12-02T16:22:42","guid":{"rendered":"https:\/\/estudiosretiro.com\/?page_id=6"},"modified":"2025-09-01T17:49:38","modified_gmt":"2025-09-01T17:49:38","slug":"inicio","status":"publish","type":"page","link":"https:\/\/estudiosretiro.com\/","title":{"rendered":"INICIO"},"content":{"rendered":"\n\n\n\n\n\nEstudios Retiro \u2014 Mapa de artistas (responsive)<\/title>\n<style>\n :root {\n --line-color: #000;\n --dot-size: 50px; \/* escritorio *\/\n --line-thick: 2px;\n --text: #000;\n }\n\n * { box-sizing: border-box; }\n html, body { height: 100%; }\n body { margin: 0; font-family: Helvetica, Arial, sans-serif; color: var(--text); background: #fff; }\n\n .custom-design {\n position: relative;\n height: 100vh;\n display: grid;\n place-items: center;\n background: #fff;\n overflow: hidden;\n }\n\n \/* =================== ESCRITORIO =================== *\/\n .name-button {\n display: inline-block;\n padding: 0;\n font-size: 15px;\n color: var(--text);\n text-decoration: none;\n border: none;\n background: none;\n cursor: pointer;\n line-height: 1.2;\n transition: transform .25s ease, color .25s ease;\n }\n .name-button:hover,\n .name-button:focus-visible { transform: scale(1.2); color: #555; outline: none; }\n\n .line-horizontal,\n .line-vertical,\n .line-vertical-top,\n .line-vertical-right { position: absolute; background: var(--line-color); }\n\n .line-horizontal { width: 560px; height: var(--line-thick); top: 50%; left: calc(50% - 280px); }\n .line-vertical { width: var(--line-thick); height: 170px; top: 50%; left: calc(50% - 200px); transform: translateX(-1px); }\n .line-vertical-top { width: var(--line-thick); height: 80px; top: calc(50% - 80px); left: calc(50% - 200px); transform: translateX(-1px); }\n .line-vertical-right { width: var(--line-thick); height: 150px; top: calc(50% - 150px); left: calc(50% + 200px); }\n\n \/* Puntos negros (fijos, sin interacci\u00f3n) *\/\n .dot {\n width: var(--dot-size);\n height: var(--dot-size);\n border-radius: 50%;\n background: #000;\n position: absolute;\n pointer-events: none; \/* no clics *\/\n cursor: default; \/* cursor normal *\/\n }\n .dot:hover { transform: none; } \/* sin efecto hover *\/\n\n .circle-right { left: calc(50% + 300px + 10px - 25px); top: calc(50% - 25px); }\n .circle-top-right { top: calc(50% - 150px - 45px - 10px); left: calc(50% + 200px + 0px - 25px); }\n .circle-bottom-left{ top: calc(50% + 200px - 25px); left: calc(50% - 200px - 25px); }\n .circle-top-left { top: calc(50% - 100px - 25px - 10px); left: calc(50% - 200px - 25px); }\n\n .names-display { position: absolute; top: calc(50% - 150px); left: calc(50% + 250px); transform: translateY(-50%); text-align: left; }\n .names-display-left { position: absolute; top: calc(50% - 100px); left: calc(50% - 380px); transform: translateY(-50%); text-align: right; }\n .names-display-bottom-left { position: absolute; top: calc(50% + 200px); left: calc(50% - 380px); transform: translateY(-50%); text-align: right; }\n\n .names-display a,\n .names-display-left a,\n .names-display-bottom-left a { display: inline-block; margin: 2px 0; }\n\n .brand { position: absolute; top: 50%; left: calc(50% + 350px + 60px); transform: translate(-50%, -50%); }\n\n \/* =================== M\u00d3VIL (\u2264768px) =================== *\/\n \/* OJO: tu bloque m\u00f3vil estaba incompleto y con llaves sueltas; lo mantengo tal cual lo ten\u00edas\n para no alterar nada m\u00e1s de lo que pediste. Si quieres, luego lo limpiamos. *\/\n\n@media (max-width: 768px) and (orientation: landscape) { \u2026 }\n\n{\n .custom-design {\n padding: clamp(32px, 6vh, 64px) 20px clamp(8px, 2vh, 24px) 20px !important;\n margin-bottom: calc(0 * clamp(40px, 10vh, 120px)) !important;\n.timeline .tl-group:last-child { padding-bottom: clamp(32px, 10vh, 140px) }\n }\n\n .line-horizontal,\n .line-vertical,\n .line-vertical-top,\n .line-vertical-right,\n .circle-right,\n .circle-top-right,\n .circle-bottom-left,\n .circle-top-left,\n .names-display,\n .names-display-left,\n .names-display-bottom-left,\n .brand { display: none !important; }\n\n .timeline { display: block; position: relative; margin: 0 auto; max-width: 640px; padding: 0 16px; }\n .timeline::before { content: \"\"; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.5px; background: var(--line-color); transform: translateX(-50%); }\n\n .tl-group { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: clamp(14px, 3vw, 24px) 0; }\n .tl-group::before { content: \"\"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(24px, 4vw, 28px); height: clamp(24px, 4vw, 28px); border-radius: 50%; background: #000; }\n\n .tl-left { grid-column: 1 \/ 2; text-align: right; padding-right: clamp(18px, 5vw, 32px); }\n .tl-right { grid-column: 2 \/ 3; text-align: left; padding-left: clamp(18px, 5vw, 32px); }\n\n .timeline .name-button { font-size: clamp(10px, 3vw, 12px); transition: transform .25s ease, color .25s ease; }\n\n .timeline .name-button:hover,\n .timeline .name-button:focus-visible { color: #555; }\n .timeline .tl-left .name-button:hover,\n .timeline .tl-left .name-button:focus-visible { transform: translateX(-12px); }\n .timeline .tl-right .name-button:hover,\n .timeline .tl-right .name-button:focus-visible { transform: translateX(12px); }\n }\n \/* ======= FIXES DE VISIBILIDAD Y SUPERPOSICI\u00d3N (override) ======= *\/\n @media (min-width: 769px) {\n .timeline { display: none !important; }\n }\n\n @media (max-width: 768px) {\n .line-horizontal,\n .line-vertical,\n .line-vertical-top,\n .line-vertical-right,\n .circle-right,\n .circle-top-right,\n .circle-bottom-left,\n .circle-top-left,\n .names-display,\n .names-display-left,\n .names-display-bottom-left,\n .brand { display: none !important; }\n\n .timeline { display: block !important; position: relative; margin: 0 auto; max-width: 640px; padding: 0 16px; }\n .timeline::before { content: \"\"; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.5px; background: var(--line-color); transform: translateX(-50%); }\n\n .tl-group { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; padding: clamp(18px, 4vw, 28px) 0; }\n .tl-group::before { content: \"\"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(24px, 4vw, 30px); height: clamp(24px, 4vw, 30px); border-radius: 50%; background: #000; z-index: 0; }\n\n .tl-left { grid-column: 1 \/ 2; text-align: right; padding-right: clamp(22px, 6vw, 36px); }\n .tl-right { grid-column: 2 \/ 3; text-align: left; padding-left: clamp(22px, 6vw, 36px); }\n\n .list { display: flex; flex-direction: column; gap: 10px; line-height: 1.25; overflow-wrap: anywhere; position: relative; z-index: 1; }\n\n .timeline .name-button { font-size: clamp(9px, 2.8vw, 11px); transition: transform .25s ease, color .25s ease; }\n .timeline .name-button:hover,\n .timeline .name-button:focus-visible { color: #555; }\n .timeline .tl-left .name-button:hover,\n .timeline .tl-left .name-button:focus-visible { transform: translateX(-12px); }\n .timeline .tl-right .name-button:hover,\n .timeline .tl-right .name-button:focus-visible { transform: translateX(12px); }\n }\n @media (max-width: 768px) {\n .custom-design {\n padding: clamp(32px, 6vh, 64px) 20px clamp(8px, 2vh, 24px) 20px !important;\n margin-bottom: calc(-1 * clamp(40px, 10vh, 120px)) !important;\n }\n }\n @media (max-width: 768px) and (max-height: 580px) {\n .custom-design { margin-bottom: calc(-1 * clamp(20px, 6vh, 80px)) !important; }\n }\n<\/style>\n<\/head>\n<body>\n <div class=\"custom-design\">\n \n <div class=\"line-horizontal\" aria-hidden=\"true\"><\/div>\n <div class=\"line-vertical\" aria-hidden=\"true\"><\/div>\n <div class=\"line-vertical-top\" aria-hidden=\"true\"><\/div>\n <div class=\"line-vertical-right\" aria-hidden=\"true\"><\/div>\n\n <div class=\"dot circle-right\" aria-hidden=\"true\"><\/div>\n <div class=\"dot circle-top-right\" aria-hidden=\"true\"><\/div>\n <div class=\"dot circle-bottom-left\" aria-hidden=\"true\"><\/div>\n <div class=\"dot circle-top-left\" aria-hidden=\"true\"><\/div>\n\n <nav class=\"brand\" aria-label=\"Marca\">\n <a class=\"name-button\" href=\"https:\/\/www.instagram.com\/estudiosretiro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Estudios Retiro<\/a>\n <\/nav>\n\n <div class=\"names-display\" aria-label=\"Artistas derecha\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/andres-aparicio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Andr\u00e9s Aparicio<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/alexis-sanchez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alexis S\u00e1nchez<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/avoirse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marta Mart\u00ednez<\/a>\n <\/div>\n\n <div class=\"names-display-left\" aria-label=\"Artistas arriba izquierda\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/antonio-sobrino\/\" target=\"_blank\" rel=\"noopener noreferrer\">Antonio Sobrino<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/elena-nunez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Elena N\u00fa\u00f1ez<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/raquel-molina\/\" target=\"_blank\" rel=\"noopener noreferrer\">Raquel Jim\u00e9nez<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/johanna-failer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Johanna Failer<\/a><br>\n <\/div>\n\n <div class=\"names-display-bottom-left\" aria-label=\"Artistas abajo izquierda\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/amara-toledo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Amara Toledo<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/israel-tirado\/\" target=\"_blank\" rel=\"noopener noreferrer\">Israel Tirado<\/a><br>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/juanma-beneitez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Juanma Ben\u00edtez<\/a>\n <\/div>\n\n \n <section class=\"timeline\" aria-label=\"Listado de artistas (vertical)\">\n <article class=\"tl-group\" aria-label=\"Estudio \u2014 Inicio\">\n <div class=\"tl-left\"><\/div>\n <div class=\"tl-right list\">\n <a class=\"name-button\" href=\"https:\/\/www.instagram.com\/estudiosretiro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Estudios Retiro<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tl-group\" aria-label=\"Arriba izquierda\">\n <div class=\"tl-left list\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/antonio-sobrino\/\" target=\"_blank\" rel=\"noopener noreferrer\">Antonio Sobrino<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/elena-nunez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Elena N\u00fa\u00f1ez<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/raquel-molina\/\" target=\"_blank\" rel=\"noopener noreferrer\">Raquel Jim\u00e9nez<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/johanna-failer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Johanna Failer<\/a>\n <\/div>\n <div class=\"tl-right\"><\/div>\n <\/article>\n\n <article class=\"tl-group\" aria-label=\"Derecha\">\n <div class=\"tl-left\"><\/div>\n <div class=\"tl-right list\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/andres-aparicio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Andr\u00e9s Aparicio<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/alexis-sanchez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alexis S\u00e1nchez<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/avoirse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marta Mart\u00ednez<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tl-group\" aria-label=\"Abajo izquierda\">\n <div class=\"tl-left list\">\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/amara-toledo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Amara Toledo<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/israel-tirado\/\" target=\"_blank\" rel=\"noopener noreferrer\">Israel Tirado<\/a>\n <a class=\"name-button\" href=\"https:\/\/estudiosretiro.com\/index.php\/juanma-beneitez\/\" target=\"_blank\" rel=\"noopener noreferrer\">Juanma Ben\u00edtez<\/a>\n <\/div>\n <div class=\"tl-right\"><\/div>\n <\/article>\n <\/section>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Estudios Retiro \u2014 Mapa de artistas (responsive) Estudios Retiro Andr\u00e9s Aparicio Alexis S\u00e1nchez Marta Mart\u00ednez Antonio Sobrino Elena N\u00fa\u00f1ez Raquel […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":61,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/estudiosretiro.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}