# Autodiagnóstico — Setup paso a paso para Squarespace Cada bloque está etiquetado con dónde va. Copia/pega tal cual. Diseñado para Squarespace 7.0 y 7.1 (Fluid Engine). Sin dependencias externas. --- ## Resumen del flujo 1. **CSS global** → Design → Custom CSS (una sola vez). 2. **HTML del formulario completo** → un Code Block en la página del autodiagnóstico. 3. **Script de envío** → Settings → Advanced → Code Injection → Footer (una sola vez). 4. **Webhook de Zapier** → recibe la respuesta, calcula score, asigna arquetipo, dispara MailerLite. Sin JavaScript para selección — usamos radio buttons nativos con `:checked` en CSS. Más simple, más accesible, no rompe. --- ## PASO 1 · CSS global **Dónde va:** Design → Custom CSS ```css /* ============================================================ AUTODIAGNÓSTICO DE PRÁCTICA PROFESIONAL Todas las clases prefijadas con adp- para no chocar con el tema. ============================================================ */ :root { --adp-green: #047857; --adp-amber: #D97706; --adp-red: #B91C1C; --adp-green-bg: #ECFDF5; --adp-amber-bg: #FFFBEB; --adp-red-bg: #FEF2F2; --adp-text: #111827; --adp-muted: #6B7280; --adp-border: #E5E7EB; } .adp-container { max-width: 760px; margin: 0 auto; font-family: inherit; color: var(--adp-text); line-height: 1.55; } /* ---------- Instrucciones ---------- */ .adp-instructions { background: #F9FAFB; border: 1px solid var(--adp-border); border-radius: 12px; padding: 20px 24px; margin: 16px 0 24px 0; } .adp-instructions h3 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; } .adp-instructions p { margin: 8px 0; font-size: 15px; } .adp-instructions ul { padding-left: 18px; margin: 8px 0; } .adp-instructions li { margin: 4px 0; } /* ---------- Ejemplo trabajado ---------- */ .adp-example { border-left: 4px solid var(--adp-amber); background: var(--adp-amber-bg); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0 0 0; font-size: 14px; } .adp-example strong { color: var(--adp-amber); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; display: block; margin-bottom: 4px; } /* ---------- Leyenda persistente (sticky) ---------- */ .adp-legend { position: sticky; top: 0; z-index: 10; background: #FFFFFF; border: 1px solid var(--adp-border); border-radius: 12px; padding: 10px 14px; margin: 16px 0 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); font-size: 13px; } .adp-legend-item { display: flex; align-items: center; gap: 6px; } .adp-legend-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .adp-legend-dot.green { background: var(--adp-green); } .adp-legend-dot.amber { background: var(--adp-amber); } .adp-legend-dot.red { background: var(--adp-red); } .adp-legend-label { font-weight: 600; } /* ---------- Encabezado de pilar ---------- */ .adp-pillar-header { margin: 32px 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid var(--adp-border); font-size: 20px; font-weight: 700; color: var(--adp-text); } /* ---------- Ítem ---------- */ .adp-item { border: 1px solid var(--adp-border); border-radius: 12px; padding: 20px 24px; margin: 0 0 16px 0; background: #FFFFFF; } .adp-item-title { font-size: 16px; font-weight: 600; margin: 0 0 6px 0; color: var(--adp-text); } .adp-item-definition { font-size: 13px; color: var(--adp-muted); font-style: italic; margin: 4px 0 14px 0; } /* ---------- Grupo de tres botones (radio nativos + labels estilizados) ---------- */ .adp-rating { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } /* Radio nativo oculto visualmente pero accesible */ .adp-rating input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .adp-rating label { border: 2px solid; background: #FFFFFF; border-radius: 10px; padding: 14px 12px 12px 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 140px; transition: transform 0.05s ease-in-out, box-shadow 0.1s ease-in-out; font-size: 13px; } .adp-rating label:hover { transform: translateY(-1px); } /* Outline por color cuando NO está seleccionado */ .adp-rating label.red { border-color: var(--adp-red); color: var(--adp-red); } .adp-rating label.amber { border-color: var(--adp-amber); color: var(--adp-amber); } .adp-rating label.green { border-color: var(--adp-green); color: var(--adp-green); } .adp-pill-row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } .adp-emoji { font-size: 18px; } .adp-num { font-weight: 800; } .adp-anchor { color: var(--adp-text); line-height: 1.45; font-weight: 400; } /* Estado seleccionado — la regla crítica */ .adp-rating input[type="radio"]:checked + label { color: #FFFFFF; border-width: 3px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-1px); } .adp-rating input[type="radio"]:checked + label.red { background: var(--adp-red); } .adp-rating input[type="radio"]:checked + label.amber { background: var(--adp-amber); } .adp-rating input[type="radio"]:checked + label.green { background: var(--adp-green); } .adp-rating input[type="radio"]:checked + label .adp-anchor { color: #FFFFFF; } .adp-rating input[type="radio"]:checked + label::after { content: "✓"; align-self: flex-end; margin-top: -6px; font-size: 14px; font-weight: 800; } /* Foco accesible (teclado) */ .adp-rating input[type="radio"]:focus-visible + label { outline: 3px solid #2563EB; outline-offset: 2px; } /* ---------- Campos de texto / nombre / email ---------- */ .adp-field { display: block; margin: 0 0 16px 0; } .adp-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--adp-text); } .adp-field input, .adp-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--adp-border); border-radius: 8px; font-size: 15px; font-family: inherit; background: #FFFFFF; box-sizing: border-box; } .adp-field textarea { min-height: 90px; resize: vertical; } /* ---------- Botón de envío ---------- */ .adp-submit { display: block; width: 100%; margin: 32px 0 16px 0; padding: 16px 24px; background: var(--adp-text); color: #FFFFFF; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.15s ease; } .adp-submit:hover { opacity: 0.9; } .adp-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Mensajes de estado ---------- */ .adp-msg { padding: 12px 16px; border-radius: 8px; margin: 16px 0; font-size: 14px; } .adp-msg.success { background: var(--adp-green-bg); color: var(--adp-green); border: 1px solid var(--adp-green); } .adp-msg.error { background: var(--adp-red-bg); color: var(--adp-red); border: 1px solid var(--adp-red); } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .adp-rating { grid-template-columns: 1fr; } .adp-legend { grid-template-columns: 1fr; } .adp-rating label { min-height: 0; } } ``` --- ## PASO 2 · HTML del formulario **Dónde va:** un Code Block en la página del autodiagnóstico (donde tienes ahora el formulario actual; reemplázalo). > **Importante:** este es el patrón completo. Tienes que repetir el bloque `

` por cada uno de los ~35 ítems de tu autoevaluación. Más abajo te dejo la plantilla pelada para repetir, y dos ítems modelo ya rellenados. ```html

Cómo funciona esta autoevaluación

Esta autoevaluación toma entre 8 y 12 minutos. Cubre los 5 pilares de una práctica psicoterapéutica sostenible: atracción, conversión, entrega clínica, finanzas y estilo de vida.

En cada ítem, eliges uno de tres niveles:

• 🟢 Sólido (3) — Lo aplico de forma consistente.
• 🟡 Atención (2) — Lo aplico con esfuerzo o de forma irregular.
• 🔴 Crítico (1) — No lo aplico aún o evito hacerlo.

Sé honesta contigo misma. El dashboard que vas a recibir solo es útil si refleja tu situación real, no la idealizada.

Ejemplo de cómo llenar un ítem María, terapeuta con 8 años de práctica, en el ítem "Establezco rapport rápido con mis consultantes" eligió 🟡 Atención (2) porque establece rapport con la mayoría pero le cuesta más trabajo con adolescentes y parejas. Honesto, específico, accionable.

🟢 Sólido (3)

🟡 Atención (2)

🔴 Crítico (1)

Nombre

Correo electrónico

Pilar 1 · Atracción del consultante ideal

¿Tengo claro mi consultante ideal?

🔴Crítico(1) Atiendo a quien llegue. No tengo un avatar definido o creo que definirlo me cerraría puertas. 🟡Atención(2) Tengo una idea general pero vaga ("mujeres profesionistas con ansiedad"). Si me pidieran detalles, llenaría con generalidades. 🟢Sólido(3) Puedo describir a mi consultante ideal en 2–3 frases concretas: edad, contexto vital, motivo de consulta, qué buscan, qué los frena. No titubeo.

Pilar 3 · Entrega profesional

Rapport — ¿Cómo evalúas tus habilidades para establecer rapport?

Rapport: la sintonía emocional inicial que permite que el consultante se sienta escuchado y abierto a trabajar.

🔴Crítico(1) Me cuesta trabajo conectar. Las rupturas no las identifico hasta que el consultante deja la terapia. 🟡Atención(2) Establezco rapport con la mayoría pero me cuesta más con ciertos perfiles. Las rupturas a veces las noto en supervisión, no en el momento. 🟢Sólido(3) Establezco rapport rápido (primeros 2–5 minutos) con la mayoría. Cuando hay ruptura, la noto en el momento y la reparo dentro de la sesión.

Generar mi dashboard

``` --- ## PASO 3 · Script de envío **Dónde va:** Settings → Advanced → Code Injection → Footer ```html ``` --- ## PASO 4 · Webhook de Zapier (la mecánica del backend) **Crea en Zapier:** 1. **Trigger:** *Webhooks by Zapier → Catch Hook*. Copia la URL que te da y pégala en `ADP_WEBHOOK_URL` arriba. 2. **Action 1 — Code by Zapier (Python o JS):** recibe el payload, calcula los scores por pilar, asigna arquetipo. Pseudocódigo: ``` pillar_1 = (rating-consultante-ideal + rating-pvu + rating-marketing) / 9 * 100 pillar_2 = (rating-comunicacion + rating-opciones-pago + rating-proceso-pago) / 9 * 100 pillar_3 = (suma de los 16 ítems clínicos) / 48 * 100 pillar_4 = (suma de los 5 ítems financieros) / 15 * 100 pillar_5 = (suma de los 5 ítems de estilo de vida) / 15 * 100 if pillar_3 >= 70 and (pillar_1 + pillar_2 + pillar_4) / 3 < 50: archetype = "A_clinica_solitaria" elif all pilares < 60: archetype = "B_emprendedora_construccion" elif overall_avg >= 75: archetype = "D_sostenible_avanzada" else: archetype = "C_consolidada_con_bloqueos" ``` 3. **Action 2 — Google Sheets:** registrar fila con email, nombre, scores, arquetipo, timestamp. (Para tu análisis futuro.) 4. **Action 3 — MailerLite (o tu ESP):** suscribir el email + agregar tag con el nombre del arquetipo. 5. **Automation en MailerLite:** una automatización por arquetipo que dispara el email correspondiente cuando se agrega el tag. --- ## PASO 5 · Plan de prueba antes de lanzar 1. Llenar el formulario con respuestas de prueba que disparen cada arquetipo (4 envíos: uno mayoritariamente rojo, uno mixto, uno con un solo pilar débil, uno verde generalizado). 2. Verificar en Zapier que el payload se recibe correctamente y el código calcula bien. 3. Confirmar que el tag llega a MailerLite y la automatización dispara el email correcto. 4. Confirmar que el email se ve bien en Gmail, Outlook y móvil. 5. Solo entonces, enviar a 3–5 beta-testers reales. --- ## Notas de Squarespace - **Squarespace 7.1 con Fluid Engine:** los Code Blocks van dentro de "Add Block → Code." El CSS de "Design → Custom CSS" aplica al sitio entero. - **Squarespace 7.0:** mismo flujo. Code Block desde el menú de inserción de bloques en cualquier página. - **Cache:** después de pegar el script, fuerza un hard reload (Cmd+Shift+R) para que se cargue. Squarespace cachea el footer agresivamente. - **HTTPS:** la URL del webhook debe ser HTTPS. Zapier siempre lo es. - **Bloqueadores de scripts:** algunos usuarios con ad-blockers fuertes pueden ver el formulario pero no el envío. Mostrar siempre el mensaje de error con un fallback (p.ej., "si no funciona, escríbenos a contacto@…"). - **Squarespace Form Block nativo:** evítalo para esto. No permite radios estilizados. Mejor el patrón aquí descrito. --- ## Lo que falta para que esto vaya en producción 1. **Reescribir los anclajes de los ~25 ítems restantes** usando los 8 ejemplos del documento `autodiagnostico_rediseno.md` como plantilla. Calculo 2–3 horas de trabajo concentrado. 2. **Definir las cut-points exactas de los 4 arquetipos** — la lógica de pseudocódigo arriba es indicativa; tú como clínica afinas los umbrales. 3. **Escribir los 4 emails de resultado** en español clínico (Tarea #10 en tu lista). 4. **Configurar la automatización en MailerLite** (Tarea #11). 5. **Beta-test con 3–5 terapeutas reales** antes del lanzamiento público (Tarea #12).