{"id":37968,"date":"2026-03-21T16:40:52","date_gmt":"2026-03-21T16:40:52","guid":{"rendered":"https:\/\/metachannelcorp.com\/?page_id=37968"},"modified":"2026-04-02T12:34:43","modified_gmt":"2026-04-02T12:34:43","slug":"ejemplos-interactivos","status":"publish","type":"page","link":"https:\/\/metachannelcorp.com\/es\/capacidades-estrategicas\/legal-desk\/ejemplos-interactivos\/","title":{"rendered":"Ejemplos Interactivos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"37968\" class=\"elementor elementor-37968\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12a6d15 e-con-full thegem-e-con-layout-thegem e-flex e-con e-parent\" data-id=\"12a6d15\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;thegem_container_layout&quot;:&quot;thegem&quot;}\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-cbb926e elementor-widget__width-inherit flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-html\" data-id=\"cbb926e\" 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<link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\"\/>\r\n<link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Public+Sans:wght@400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<div id=\"legal-desk-demos-root\" style=\"width: 100%;\"><\/div>\r\n\r\n<script type=\"text\/babel\">\r\n  const { useState } = React;\r\n\r\n  const COLORS = {\r\n    navy: \"#071222\",\r\n    navyLight: \"#0d1a30\",\r\n    navyMid: \"#132442\",\r\n    gold: \"#C9A84C\",\r\n    goldLight: \"#E2C97E\",\r\n    white: \"#FFFFFF\",\r\n    gray100: \"#F4F5F7\",\r\n    gray200: \"#E2E4E8\",\r\n    gray300: \"#B0B5C0\",\r\n    gray500: \"#6B7280\",\r\n    green: \"#22C55E\",\r\n    greenDark: \"#16A34A\",\r\n    blue: \"#3B82F6\",\r\n    orange: \"#F59E0B\",\r\n    purple: \"#8B5CF6\",\r\n  };\r\n\r\n  const tabs = [\r\n    { id: \"colab\", label: \"Red Colaboradores\", icon: \"\u2696\ufe0f\" },\r\n    { id: \"club\", label: \"Club de Negocios\", icon: \"\ud83c\udfdb\ufe0f\" },\r\n    { id: \"intl\", label: \"Red Internacional\", icon: \"\ud83c\udf0d\" },\r\n    { id: \"uni\", label: \"Programa Universitario\", icon: \"\ud83c\udf93\" },\r\n  ];\r\n\r\n  function ColaboradoresDemo() {\r\n    const [scenario, setScenario] = useState(null);\r\n    const [step, setStep] = useState(0);\r\n\r\n    const scenarioA = [\r\n      { icon: \"\ud83d\udc64\", title: \"Cliente contacta META Channel\", desc: \"Un cliente llega a trav\u00e9s de la web, Pacto Orbital o red de contactos.\", side: \"meta\" },\r\n      { icon: \"\ud83d\udd0d\", title: \"META Channel eval\u00faa y estructura\", desc: \"Se analiza jurisdicci\u00f3n, complejidad y perfil necesario del abogado.\", side: \"meta\" },\r\n      { icon: \"\ud83d\udccb\", title: \"Se selecciona al colaborador\", desc: \"META Channel elige al abogado adecuado de nuestra excelente red y le presenta el encargo ya estructurado.\", side: \"meta\" },\r\n      { icon: \"\u270d\ufe0f\", title: \"Formalizaci\u00f3n contractual\", desc: \"Contrato META\u2194Cliente (coordinaci\u00f3n) + Hoja de encargo Abogado\u2194Cliente (ejecuci\u00f3n). O un \u00fanico encargo\", side: \"both\" },\r\n      { icon: \"\u2696\ufe0f\", title: \"El abogado ejecuta\", desc: \"Direcci\u00f3n letrada y responsabilidad profesional del abogado. META Channel Corporation coordina.\", side: \"abogado\" },\r\n      { icon: \"\ud83d\udcb6\", title: \"Reparto econ\u00f3mico\", desc: \"META Channel Corporation: por porcentaje (coordinaci\u00f3n + captaci\u00f3n) + porcentaje abogado\", side: \"both\" },\r\n    ];\r\n\r\n    const scenarioB = [\r\n      { icon: \"\ud83d\udc64\", title: \"El abogado tiene un caso\", desc: \"Un cliente del propio abogado necesita estructura internacional, marca o coordinaci\u00f3n.\", side: \"abogado\" },\r\n      { icon: \"\ud83d\udcde\", title: \"Lo canaliza por Legal Desk\", desc: \"El abogado decide usar la infraestructura de META Channel Corporation para darle alcance de excelencia al caso.\", side: \"abogado\" },\r\n      { icon: \"\ud83c\udfd7\ufe0f\", title: \"META Channel Corporation aporta estructura\", desc: \"Marca internacional, coordinaci\u00f3n operativa, acceso al ecosistema si procede.\", side: \"meta\" },\r\n      { icon: \"\u270d\ufe0f\", title: \"Formalizaci\u00f3n contractual\", desc: \"Presupuesto global a trav\u00e9s de META Channel Corporation. Separaci\u00f3n clara de honorarios.\", side: \"both\" },\r\n      { icon: \"\u2696\ufe0f\", title: \"El abogado ejecuta\", desc: \"Mantiene la relaci\u00f3n con su cliente. META coordina y aporta infraestructura.\", side: \"abogado\" },\r\n      { icon: \"\ud83d\udcb6\", title: \"Reparto econ\u00f3mico\", desc: \"META Channel Corporation: por porcentaje (infraestructura + marca) + reparto abogado\", side: \"both\" },\r\n    ];\r\n\r\n    const steps = scenario === \"A\" ? scenarioA : scenarioB;\r\n\r\n    return (\r\n      <div>\r\n        <p style={{ color: COLORS.gray300, marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>\r\n          Dos modelos de colaboraci\u00f3n profesional. Selecciona un escenario para ver el flujo completo paso a paso.\r\n        <\/p>\r\n\r\n        <div style={{ display: \"flex\", gap: 16, marginBottom: 32, flexWrap: \"wrap\" }}>\r\n          {[\r\n            { id: \"A\", title: \"Caso aportado por META Channel\", sub: \"META trae el cliente \u2192 reparto por porcentaje\", color: COLORS.gold },\r\n            { id: \"B\", title: \"Caso aportado por el abogado\", sub: \"Abogado trae el cliente \u2192 reparto por porcentaje\", color: COLORS.blue },\r\n          ].map((s) => (\r\n            <button\r\n              key={s.id}\r\n              onClick={() => { setScenario(s.id); setStep(0); }}\r\n              style={{\r\n                flex: \"1 1 250px\", padding: \"20px 16px\", borderRadius: 12, cursor: \"pointer\",\r\n                border: scenario === s.id ? `2px solid ${s.color}` : `1px solid ${COLORS.navyMid}`,\r\n                background: scenario === s.id ? `${s.color}15` : COLORS.navyLight,\r\n                transition: \"all 0.3s\",\r\n              }}\r\n            >\r\n              <div style={{ fontSize: 13, color: s.color, fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>ESCENARIO {s.id}<\/div>\r\n              <div style={{ fontSize: 16, color: COLORS.white, fontWeight: 600, marginBottom: 4 }}>{s.title}<\/div>\r\n              <div style={{ fontSize: 13, color: COLORS.gray300 }}>{s.sub}<\/div>\r\n            <\/button>\r\n          ))}\r\n        <\/div>\r\n\r\n        {scenario && (\r\n          <div>\r\n            <div style={{ display: \"flex\", gap: 8, marginBottom: 24, flexWrap: \"wrap\" }}>\r\n              {steps.map((_, i) => (\r\n                <button\r\n                  key={i}\r\n                  onClick={() => setStep(i)}\r\n                  style={{\r\n                    width: 36, height: 36, borderRadius: \"50%\", border: \"none\", cursor: \"pointer\",\r\n                    background: i === step ? (scenario === \"A\" ? COLORS.gold : COLORS.blue) : i < step ? COLORS.greenDark : COLORS.navyMid,\r\n                    color: COLORS.white, fontWeight: 700, fontSize: 14,\r\n                    transition: \"all 0.3s\",\r\n                  }}\r\n                >\r\n                  {i + 1}\r\n                <\/button>\r\n              ))}\r\n            <\/div>\r\n\r\n            <div style={{\r\n              background: COLORS.navyLight, borderRadius: 16, padding: 28,\r\n              borderLeft: `4px solid ${scenario === \"A\" ? COLORS.gold : COLORS.blue}`,\r\n              transition: \"all 0.3s\",\r\n            }}>\r\n              <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginBottom: 12 }}>\r\n                <span style={{ fontSize: 28 }}>{steps[step].icon}<\/span>\r\n                <div>\r\n                  <div style={{ fontSize: 11, color: COLORS.gray300, textTransform: \"uppercase\", letterSpacing: 1 }}>\r\n                    Paso {step + 1} de {steps.length} \u2014 {steps[step].side === \"meta\" ? \"META Channel act\u00faa\" : steps[step].side === \"abogado\" ? \"El abogado act\u00faa\" : \"Ambos participan\"}\r\n                  <\/div>\r\n                  <div style={{ fontSize: 20, color: COLORS.white, fontWeight: 700 }}>{steps[step].title}<\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <p style={{ color: COLORS.gray200, fontSize: 15, lineHeight: 1.7, whiteSpace: \"pre-line\", margin: 0 }}>\r\n                {steps[step].desc}\r\n              <\/p>\r\n\r\n              <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 20 }}>\r\n                <button\r\n                  onClick={() => setStep(Math.max(0, step - 1))}\r\n                  disabled={step === 0}\r\n                  style={{\r\n                    padding: \"8px 20px\", borderRadius: 8, border: `1px solid ${COLORS.navyMid}`,\r\n                    background: \"transparent\", color: step === 0 ? COLORS.gray500 : COLORS.white,\r\n                    cursor: step === 0 ? \"default\" : \"pointer\", fontSize: 14,\r\n                  }}\r\n                >\r\n                  \u2190 Anterior\r\n                <\/button>\r\n                <button\r\n                  onClick={() => setStep(Math.min(steps.length - 1, step + 1))}\r\n                  disabled={step === steps.length - 1}\r\n                  style={{\r\n                    padding: \"8px 20px\", borderRadius: 8, border: \"none\",\r\n                    background: step === steps.length - 1 ? COLORS.navyMid : (scenario === \"A\" ? COLORS.gold : COLORS.blue),\r\n                    color: COLORS.white, cursor: step === steps.length - 1 ? \"default\" : \"pointer\",\r\n                    fontSize: 14, fontWeight: 600,\r\n                  }}\r\n                >\r\n                  Siguiente \u2192\r\n                <\/button>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            {step === steps.length - 1 && (\r\n              <div style={{\r\n                marginTop: 20, padding: 20, borderRadius: 12,\r\n                background: `${COLORS.green}15`, border: `1px solid ${COLORS.green}40`,\r\n              }}>\r\n                <div style={{ color: COLORS.green, fontWeight: 700, fontSize: 14, marginBottom: 6 }}>RESULTADO CLAVE<\/div>\r\n                <div style={{ color: COLORS.gray200, fontSize: 14, lineHeight: 1.6 }}>\r\n                  {scenario === \"A\"\r\n                    ? \"El abogado recibe negocio que no tendr\u00eda de otra forma. META Channel Corporation cobra por la coordinaci\u00f3n y captaci\u00f3n. Facturaci\u00f3n separada, sin reparto de honorarios profesionales.\"\r\n                    : \"El abogado amplifica su caso con infraestructura internacional. META Channel Corporation cobra solo el porcentaje por aportar marca y estructura. El abogado mantiene el control y la relaci\u00f3n con su cliente.\"}\r\n                <\/div>\r\n              <\/div>\r\n            )}\r\n          <\/div>\r\n        )}\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  function ClubDemo() {\r\n    const [profile, setProfile] = useState(null);\r\n\r\n    const profiles = [\r\n      { id: \"abogado\", label: \"Abogado en ejercicio\", icon: \"\u2696\ufe0f\" },\r\n      { id: \"magistrado\", label: \"Magistrado \/ Ex regulador\", icon: \"\ud83c\udfdb\ufe0f\" },\r\n      { id: \"estudiante\", label: \"Estudiante \u00faltimo curso\", icon: \"\ud83c\udf93\" },\r\n      { id: \"academico\", label: \"Acad\u00e9mico \/ Investigador\", icon: \"\ud83d\udcda\" },\r\n    ];\r\n\r\n    const levels = {\r\n      abogado: {\r\n        recommended: \"Strategic Member\",\r\n        options: [\r\n          {\r\n            name: \"Business Member\", cost: \"150 \u20ac\/a\u00f1o\", color: COLORS.blue,\r\n            benefits: [\"Directorio profesional de la red\", \"Webinars y formaci\u00f3n de negocio jur\u00eddico\", \"Credencial META Channel Legal Desk\", \"Comunidad privada de profesionales\", \"Puede ser considerado para derivaciones\"],\r\n            noAccess: [\"Prioridad absoluta en derivaciones de casos\", \"Convocatorias internas de casos\", \"Comit\u00e9s tem\u00e1ticos\"],\r\n          },\r\n          {\r\n            name: \"Strategic Member\", cost: \"300 \u20ac\/a\u00f1o\", color: COLORS.gold, recommended: true,\r\n            benefits: [\"Todo lo de Business Member\", \"Prioridad real en derivaciones de casos\", \"Acceso a convocatorias internas de oportunidades\", \"Participaci\u00f3n en comit\u00e9s tem\u00e1ticos\", \"Acceso completo al ecosistema META Channel\", \"Candidato preferente para Acuerdo Marco de Colaboraci\u00f3n\"],\r\n            noAccess: [],\r\n          },\r\n        ],\r\n      },\r\n      magistrado: {\r\n        recommended: \"Leadership Member\",\r\n        options: [\r\n          {\r\n            name: \"Leadership Member\", cost: \"Gratuita (por invitaci\u00f3n)\", color: COLORS.purple, recommended: true,\r\n            benefits: [\"M\u00e1xima visibilidad institucional\", \"Presidencia de comit\u00e9s tem\u00e1ticos\", \"Participaci\u00f3n como ponente en eventos\", \"Credencial de prestigio\", \"Acceso completo a formaci\u00f3n y comunidad\", \"Rol de referencia dentro del ecosistema\"],\r\n            noAccess: [\"No ejecuta casos (no es su funci\u00f3n)\"],\r\n          },\r\n        ],\r\n      },\r\n      estudiante: {\r\n        recommended: \"Young Member\",\r\n        options: [\r\n          {\r\n            name: \"Young Member\", cost: \"40\u201350 \u20ac\/a\u00f1o\", color: COLORS.green,\r\n            benefits: [\"Credencial internacional antes de graduarte\", \"Acceso a webinars y masterclasses\", \"Certificados de formaci\u00f3n para tu CV\", \"Networking con abogados de 15+ pa\u00edses\", \"Biblioteca de recursos profesionales\", \"Transici\u00f3n a Business Member con 50% dto al colegiarte\"],\r\n            noAccess: [\"No puede ejecutar ni derivar casos (no est\u00e1 habilitado)\"],\r\n          },\r\n        ],\r\n      },\r\n      academico: {\r\n        recommended: \"Business Member\",\r\n        options: [\r\n          {\r\n            name: \"Business Member\", cost: \"150 \u20ac\/a\u00f1o\", color: COLORS.blue,\r\n            benefits: [\"Directorio profesional\", \"Formaci\u00f3n de negocio jur\u00eddico\", \"Credencial META Channel\", \"Conexi\u00f3n con CEA Digital Law para investigaci\u00f3n\", \"Comunidad internacional de profesionales\"],\r\n            noAccess: [\"Convocatorias internas de casos (disponible en Strategic)\"],\r\n          },\r\n          {\r\n            name: \"Strategic Member\", cost: \"300 \u20ac\/a\u00f1o\", color: COLORS.gold,\r\n            benefits: [\"Todo lo de Business\", \"Si tambi\u00e9n ejerce: prioridad en derivaciones\", \"Comit\u00e9s tem\u00e1ticos\", \"Publicaciones conjuntas con Comit\u00e9 Euroa Americano de Derecho Digital -CEA Digital Law\"],\r\n            noAccess: [],\r\n          },\r\n        ],\r\n      },\r\n    };\r\n\r\n    const data = profile ? levels[profile] : null;\r\n\r\n    return (\r\n      <div>\r\n        <p style={{ color: COLORS.gray300, marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>\r\n          Selecciona tu perfil profesional para ver qu\u00e9 nivel de membres\u00eda te corresponde y qu\u00e9 recibes.\r\n        <\/p>\r\n\r\n        <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\", gap: 12, marginBottom: 28 }}>\r\n          {profiles.map((p) => (\r\n            <button\r\n              key={p.id}\r\n              onClick={() => setProfile(p.id)}\r\n              style={{\r\n                padding: \"16px 14px\", borderRadius: 12, cursor: \"pointer\",\r\n                border: profile === p.id ? `2px solid ${COLORS.gold}` : `1px solid ${COLORS.navyMid}`,\r\n                background: profile === p.id ? `${COLORS.gold}12` : COLORS.navyLight,\r\n                display: \"flex\", alignItems: \"center\", gap: 10, transition: \"all 0.3s\",\r\n              }}\r\n            >\r\n              <span style={{ fontSize: 24 }}>{p.icon}<\/span>\r\n              <span style={{ color: COLORS.white, fontSize: 14, fontWeight: 600, textAlign: \"left\" }}>{p.label}<\/span>\r\n            <\/button>\r\n          ))}\r\n        <\/div>\r\n\r\n        {data && (\r\n          <div>\r\n            <div style={{ fontSize: 12, color: COLORS.gold, fontWeight: 700, letterSpacing: 1, marginBottom: 16 }}>\r\n              NIVEL RECOMENDADO: {data.recommended.toUpperCase()}\r\n            <\/div>\r\n\r\n            <div style={{ display: \"flex\", gap: 16, flexWrap: \"wrap\" }}>\r\n              {data.options.map((opt) => (\r\n                <div\r\n                  key={opt.name}\r\n                  style={{\r\n                    flex: \"1 1 280px\", background: COLORS.navyLight, borderRadius: 16, padding: 24,\r\n                    border: opt.recommended ? `2px solid ${opt.color}` : `1px solid ${COLORS.navyMid}`,\r\n                    position: \"relative\",\r\n                  }}\r\n                >\r\n                  {opt.recommended && (\r\n                    <div style={{\r\n                      position: \"absolute\", top: -10, right: 16, background: opt.color,\r\n                      color: COLORS.navy, fontSize: 11, fontWeight: 800, padding: \"3px 10px\",\r\n                      borderRadius: 6, letterSpacing: 0.5,\r\n                    }}>\r\n                      RECOMENDADO\r\n                    <\/div>\r\n                  )}\r\n                  <div style={{ fontSize: 18, fontWeight: 700, color: COLORS.white, marginBottom: 4 }}>{opt.name}<\/div>\r\n                  <div style={{ fontSize: 22, fontWeight: 800, color: opt.color, marginBottom: 16 }}>{opt.cost}<\/div>\r\n\r\n                  <div style={{ fontSize: 12, color: COLORS.gray300, fontWeight: 700, letterSpacing: 1, marginBottom: 8 }}>INCLUYE<\/div>\r\n                  {opt.benefits.map((b, i) => (\r\n                    <div key={i} style={{ display: \"flex\", gap: 8, marginBottom: 6, alignItems: \"flex-start\" }}>\r\n                      <span style={{ color: COLORS.green, fontSize: 14, marginTop: 2 }}>\u2713<\/span>\r\n                      <span style={{ color: COLORS.gray200, fontSize: 13, lineHeight: 1.5 }}>{b}<\/span>\r\n                    <\/div>\r\n                  ))}\r\n                  {opt.noAccess.length > 0 && (\r\n                    <>\r\n                      <div style={{ fontSize: 12, color: COLORS.gray500, fontWeight: 700, letterSpacing: 1, marginTop: 12, marginBottom: 8 }}>NO INCLUYE<\/div>\r\n                      {opt.noAccess.map((b, i) => (\r\n                        <div key={i} style={{ display: \"flex\", gap: 8, marginBottom: 6, alignItems: \"flex-start\" }}>\r\n                          <span style={{ color: COLORS.gray500, fontSize: 14, marginTop: 2 }}>\u2717<\/span>\r\n                          <span style={{ color: COLORS.gray500, fontSize: 13, lineHeight: 1.5 }}>{b}<\/span>\r\n                        <\/div>\r\n                      ))}\r\n                    <\/>\r\n                  )}\r\n                <\/div>\r\n              ))}\r\n            <\/div>\r\n          <\/div>\r\n        )}\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  function InternacionalDemo() {\r\n    const green = \"#22C55E\";\r\n\r\n    const groups = [\r\n      { label: \"Europa\", icon: \"\ud83c\uddea\ud83c\uddfa\", countries: [\r\n        \"Espa\u00f1a (incl. Canarias)\", \"Irlanda\", \"Reino Unido\", \"Portugal\", \"Francia\", \"Alemania\", \"B\u00e9lgica\", \"Malta\", \"Polonia\"\r\n      ]},\r\n      { label: \"Am\u00e9rica del Norte y Centroam\u00e9rica\", icon: \"\ud83c\udf0e\", countries: [\r\n        \"M\u00e9xico\", \"El Salvador\", \"Costa Rica\", \"Nicaragua\", \"Honduras\", \"Panam\u00e1\", \"Rep\u00fablica Dominicana\"\r\n      ]},\r\n      { label: \"Am\u00e9rica del Sur\", icon: \"\ud83c\udf0e\", countries: [\r\n        \"Colombia\", \"Venezuela\", \"Ecuador\", \"Per\u00fa\", \"Brasil\", \"Uruguay\", \"Argentina\", \"Paraguay\", \"Chile\"\r\n      ]},\r\n      { label: \"Mediterr\u00e1neo y Oriente\", icon: \"\ud83c\udf0d\", countries: [\r\n        \"Turqu\u00eda\"\r\n      ]},\r\n      { label: \"\u00c1frica\", icon: \"\ud83c\udf0d\", countries: [\r\n        \"Angola\", \"Mozambique\"\r\n      ]},\r\n    ];\r\n\r\n    const total = groups.reduce((s, g) => s + g.countries.length, 0);\r\n\r\n    return (<div>\r\n      <p style={{color:COLORS.gray300,marginBottom:8,fontSize:15,lineHeight:1.6}}>\r\n        {total} jurisdicciones operativas organizadas por regi\u00f3n.\r\n      <\/p>\r\n      <div style={{display:\"flex\",alignItems:\"center\",gap:8,marginBottom:24}}>\r\n        <div style={{width:10,height:10,borderRadius:\"50%\",background:green}} \/>\r\n        <span style={{fontSize:13,color:COLORS.gray300}}>Operativo<\/span>\r\n      <\/div>\r\n\r\n      {groups.map(g => (\r\n        <div key={g.label} style={{marginBottom:24}}>\r\n          <div style={{display:\"flex\",alignItems:\"center\",gap:10,marginBottom:12}}>\r\n            <span style={{fontSize:18}}>{g.icon}<\/span>\r\n            <span style={{fontSize:15,fontWeight:700,color:COLORS.white}}>{g.label}<\/span>\r\n            <span style={{fontSize:12,color:green,fontWeight:600}}>({g.countries.length})<\/span>\r\n            <div style={{flex:1,height:1,background:COLORS.navyMid,marginLeft:8}} \/>\r\n          <\/div>\r\n          <div style={{display:\"grid\",gridTemplateColumns:\"repeat(auto-fill, minmax(220px, 1fr))\",gap:8}}>\r\n            {g.countries.map(name => (\r\n              <div key={name} style={{\r\n                display:\"flex\",alignItems:\"center\",gap:10,\r\n                padding:\"11px 16px\",borderRadius:10,\r\n                background:COLORS.navyLight,\r\n                border:`1px solid ${COLORS.navyMid}`,\r\n              }}>\r\n                <div style={{width:8,height:8,borderRadius:\"50%\",background:green,flexShrink:0}} \/>\r\n                <span style={{color:COLORS.gray200,fontSize:14}}>{name}<\/span>\r\n              <\/div>\r\n            ))}\r\n          <\/div>\r\n        <\/div>\r\n      ))}\r\n    <\/div>);\r\n  }\r\n\r\n  function UniversidadDemo() {\r\n    const [activePhase, setActivePhase] = useState(0);\r\n\r\n    const phases = [\r\n      {\r\n        icon: \"\ud83d\udcda\", title: \"\u00daltimo curso de Derecho\", time: \"A\u00f1o 0\",\r\n        desc: \"Est\u00e1s terminando la carrera. Te inscribes como Young Member por 40-50 \u20ac\/a\u00f1o.\",\r\n        detail: \"Recibes credencial internacional con sede en Dubl\u00edn, acceso a webinars y masterclasses, certificados de formaci\u00f3n para tu CV, y networking con abogados de 15+ pa\u00edses.\",\r\n        color: COLORS.blue,\r\n      },\r\n      {\r\n        icon: \"\ud83c\udf93\", title: \"Te grad\u00faas\", time: \"A\u00f1o 1\",\r\n        desc: \"Tienes ya 12+ certificados de formaci\u00f3n internacional y una red profesional activa.\",\r\n        detail: \"Mientras tus compa\u00f1eros de promoci\u00f3n buscan pr\u00e1cticas sin contactos, t\u00fa ya conoces abogados en ejercicio en m\u00faltiples jurisdicciones y entiendes tokenizaci\u00f3n, litigation finance y compliance de IA.\",\r\n        color: COLORS.purple,\r\n      },\r\n      {\r\n        icon: \"\u2696\ufe0f\", title: \"Te colegias\", time: \"A\u00f1o 1-2\",\r\n        desc: \"Pasas autom\u00e1ticamente a Business Member con un 50% de descuento el primer a\u00f1o (75 \u20ac en vez de 150 \u20ac).\",\r\n        detail: \"Ya no eres estudiante: eres miembro profesional. Tu perfil aparece en el directorio. Puedes ser considerado para derivaciones de casos. La transici\u00f3n es autom\u00e1tica al acreditar colegiaci\u00f3n.\",\r\n        color: COLORS.gold,\r\n      },\r\n      {\r\n        icon: \"\ud83d\udccb\", title: \"Primeras derivaciones\", time: \"A\u00f1o 2-3\",\r\n        desc: \"Empiezas a recibir casos a trav\u00e9s de la red. Primero como apoyo, luego como ejecutor.\",\r\n        detail: \"Un abogado senior de la red necesita apoyo en un caso con componente transfronterizo. Te lo asignan. Aprendes, cobras, y generas tu primer historial dentro de Legal Desk.\",\r\n        color: COLORS.green,\r\n      },\r\n      {\r\n        icon: \"\ud83d\ude80\", title: \"Strategic Member\", time: \"A\u00f1o 3+\",\r\n        desc: \"Con 3+ casos ejecutados, asciendes a Strategic Member (300 \u20ac\/a\u00f1o). Prioridad real en derivaciones.\",\r\n        detail: \"Eres abogado con experiencia internacional verificable, perteneces a una red con presencia en 15+ pa\u00edses, y puedes ofrecer a tus clientes capacidades que ning\u00fan otro abogado de tu promoci\u00f3n tiene.\",\r\n        color: COLORS.gold,\r\n      },\r\n    ];\r\n\r\n    return (\r\n      <div>\r\n        <p style={{ color: COLORS.gray300, marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>\r\n          El recorrido de un estudiante desde el \u00faltimo curso hasta convertirse en abogado internacional.\r\n        <\/p>\r\n\r\n        <div style={{ position: \"relative\", marginBottom: 28, paddingLeft: 20 }}>\r\n          <div style={{\r\n            position: \"absolute\", left: 9, top: 0, bottom: 0, width: 2,\r\n            background: `linear-gradient(to bottom, ${COLORS.blue}, ${COLORS.gold})`,\r\n          }} \/>\r\n\r\n          {phases.map((p, i) => (\r\n            <button\r\n              key={i}\r\n              onClick={() => setActivePhase(i)}\r\n              style={{\r\n                display: \"flex\", alignItems: \"flex-start\", gap: 16,\r\n                marginBottom: i < phases.length - 1 ? 8 : 0,\r\n                padding: \"12px 16px\", borderRadius: 12, border: \"none\",\r\n                background: activePhase === i ? `${p.color}15` : \"transparent\",\r\n                cursor: \"pointer\", width: \"100%\", textAlign: \"left\",\r\n                position: \"relative\", transition: \"all 0.3s\",\r\n              }}\r\n            >\r\n              <div style={{\r\n                width: 20, height: 20, borderRadius: \"50%\", flexShrink: 0,\r\n                background: activePhase === i ? p.color : COLORS.navyMid,\r\n                border: `2px solid ${activePhase === i ? p.color : COLORS.gray500}`,\r\n                display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\r\n                fontSize: 10, marginTop: 2, position: \"relative\", zIndex: 1,\r\n                transition: \"all 0.3s\",\r\n              }} \/>\r\n              <div>\r\n                <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, marginBottom: 2 }}>\r\n                  <span style={{ fontSize: 16 }}>{p.icon}<\/span>\r\n                  <span style={{ fontSize: 15, fontWeight: 700, color: activePhase === i ? COLORS.white : COLORS.gray300 }}>{p.title}<\/span>\r\n                  <span style={{ fontSize: 11, color: p.color, fontWeight: 600 }}>{p.time}<\/span>\r\n                <\/div>\r\n                <div style={{ fontSize: 13, color: COLORS.gray300, lineHeight: 1.5 }}>{p.desc}<\/div>\r\n              <\/div>\r\n            <\/button>\r\n          ))}\r\n        <\/div>\r\n\r\n        <div style={{\r\n          background: COLORS.navyLight, borderRadius: 16, padding: 24,\r\n          borderLeft: `4px solid ${phases[activePhase].color}`,\r\n        }}>\r\n          <div style={{ fontSize: 11, color: phases[activePhase].color, fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>\r\n            {phases[activePhase].time} \u2014 {phases[activePhase].title.toUpperCase()}\r\n          <\/div>\r\n          <p style={{ color: COLORS.gray200, fontSize: 15, lineHeight: 1.7, margin: 0 }}>\r\n            {phases[activePhase].detail}\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div style={{\r\n          marginTop: 20, padding: 20, borderRadius: 12,\r\n          background: `${COLORS.gold}10`, border: `1px solid ${COLORS.gold}30`,\r\n        }}>\r\n          <div style={{ color: COLORS.gold, fontWeight: 700, fontSize: 14, marginBottom: 6 }}>EL N\u00daMERO<\/div>\r\n          <div style={{ color: COLORS.gray200, fontSize: 14, lineHeight: 1.6 }}>\r\n            50 \u20ac al a\u00f1o = 4,16 \u20ac al mes. Menos que una cena. A cambio: credencial internacional, formaci\u00f3n profesional, networking en 15+ pa\u00edses, y un camino directo hacia una carrera con alcance global.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  function LegalDeskDemos() {\r\n    const [activeTab, setActiveTab] = useState(\"colab\");\r\n\r\n    const components = {\r\n      colab: ColaboradoresDemo,\r\n      club: ClubDemo,\r\n      intl: InternacionalDemo,\r\n      uni: UniversidadDemo,\r\n    };\r\n\r\n    const ActiveComponent = components[activeTab];\r\n\r\n    return (\r\n      <div style={{\r\n        background: COLORS.navy,\r\n        fontFamily: \"'Public Sans', 'Segoe UI', sans-serif\",\r\n        paddingBottom: 40\r\n      }}>\r\n        <div style={{ maxWidth: 1000, margin: \"0 auto\", padding: \"32px 20px\" }}>\r\n          <div style={{ marginBottom: 32, textAlign: \"center\" }}>\r\n            <div style={{ fontSize: 11, color: COLORS.gold, fontWeight: 700, letterSpacing: 2, marginBottom: 8 }}>\r\n              META CHANNEL LEGAL DESK\r\n            <\/div>\r\n            <h1 style={{ fontSize: 26, fontWeight: 800, color: COLORS.white, margin: \"0 0 8px 0\" }}>\r\n              Ejemplos Interactivos\r\n            <\/h1>\r\n            <p style={{ fontSize: 14, color: COLORS.gray300, margin: 0 }}>\r\n              Descubre de forma pr\u00e1ctica c\u00f3mo estructuramos la colaboraci\u00f3n y los beneficios en cada nivel del ecosistema.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div style={{\r\n            display: \"flex\", gap: 4, marginBottom: 28, flexWrap: \"wrap\",\r\n            background: COLORS.navyLight, borderRadius: 14, padding: 4,\r\n          }}>\r\n            {tabs.map((t) => (\r\n              <button\r\n                key={t.id}\r\n                onClick={() => setActiveTab(t.id)}\r\n                style={{\r\n                  flex: \"1 1 120px\", padding: \"10px 8px\", borderRadius: 10, border: \"none\",\r\n                  background: activeTab === t.id ? COLORS.navyMid : \"transparent\",\r\n                  color: activeTab === t.id ? COLORS.white : COLORS.gray500,\r\n                  cursor: \"pointer\", fontSize: 12, fontWeight: 600,\r\n                  transition: \"all 0.2s\",\r\n                }}\r\n              >\r\n                <span style={{ fontSize: 16, display: \"block\", marginBottom: 2 }}>{t.icon}<\/span>\r\n                {t.label}\r\n              <\/button>\r\n            ))}\r\n          <\/div>\r\n\r\n          <div style={{\r\n            background: `${COLORS.navyLight}80`, borderRadius: 20, padding: 28,\r\n            border: `1px solid ${COLORS.navyMid}`,\r\n          }}>\r\n            <ActiveComponent \/>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  const root = ReactDOM.createRoot(document.getElementById('legal-desk-demos-root'));\r\n  root.render(<LegalDeskDemos \/>);\r\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":"","protected":false},"author":1,"featured_media":0,"parent":37813,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-37968","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/pages\/37968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/comments?post=37968"}],"version-history":[{"count":5,"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/pages\/37968\/revisions"}],"predecessor-version":[{"id":38187,"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/pages\/37968\/revisions\/38187"}],"up":[{"embeddable":true,"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/pages\/37813"}],"wp:attachment":[{"href":"https:\/\/metachannelcorp.com\/es\/wp-json\/wp\/v2\/media?parent=37968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}