{"id":1035,"date":"2026-06-13T11:30:55","date_gmt":"2026-06-13T09:30:55","guid":{"rendered":"https:\/\/victorangeldesign.com\/?page_id=1035"},"modified":"2026-06-13T14:33:39","modified_gmt":"2026-06-13T12:33:39","slug":"briefing-form","status":"publish","type":"page","link":"https:\/\/victorangeldesign.com\/es\/briefing-form\/","title":{"rendered":"briefing form"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-a2fb327f wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<style>\n  .wp-site-blocks,\n  .wp-block-post-content,\n  .is-layout-constrained,\n  .wp-block-group {\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: none !important;\n    --wp--custom--spacing--outer: 0px !important;\n  }\n<\/style>\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>briefing \u2013 v\u00edctor \u00e1ngel<\/title>\n<link rel=\"stylesheet\" href=\"https:\/\/api.fontshare.com\/v2\/css?f[]=satoshi@900,700,500,400&#038;display=swap\">\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --bg:      #ffffff;\n    --ink:     #000000;\n    --muted:   #9E9E9E;\n    --accent:  #200ADF;\n    --border:  #E0E0E0;\n    --sans:    'Satoshi', system-ui, sans-serif;\n  }\n\n  html, body {\n    min-height: 100%;\n    background: var(--bg);\n    color: var(--ink);\n    font-family: var(--sans);\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \/* \u2500\u2500 Progress segments \u2500\u2500 *\/\n  #progress-track {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    height: 2px;\n    display: flex;\n    gap: 3px;\n    z-index: 100;\n    padding: 0 0;\n  }\n\n  .progress-seg {\n    flex: 1;\n    height: 100%;\n    background: var(--border);\n    transition: background 0.4s ease;\n  }\n  .progress-seg.filled { background: var(--accent); }\n\n  \/* \u2500\u2500 Stage \u2500\u2500 *\/\n  #stage {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 24px;\n  }\n\n  \/* \u2500\u2500 Screen \u2500\u2500 *\/\n  .screen {\n    display: none;\n    flex-direction: column;\n    max-width: 100%;\n    width: 100%;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity 0.45s ease, transform 0.45s ease;\n  }\n  .screen.active  { display: flex; }\n  .screen.visible { opacity: 1; transform: translateY(0); }\n\n  \/* \u2500\u2500 Eyebrow \u2500\u2500 *\/\n  .eyebrow {\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: var(--accent);\n    margin-bottom: 20px;\n  }\n\n  \/* \u2500\u2500 Question \u2014 big, blue, uppercase \u2500\u2500 *\/\n  .question {\n    font-weight: 900;\n    font-size: clamp(42px, 7.5vw, 80px);\n    line-height: 1.0;\n    color: var(--accent);\n    margin-bottom: 28px;\n    letter-spacing: -0.01em;\n    text-transform: uppercase;\n  }\n\n  \/* \u2500\u2500 Subtext \u2500\u2500 *\/\n  .subtext {\n    font-size: 24px;\n    color: var(--muted);\n    font-weight: 500;\n    margin-bottom: 40px;\n    line-height: 1.2em;\n    max-width: 480px;\n  }\n\n  \/* \u2500\u2500 Divider above input \u2500\u2500 *\/\n  .field-divider {\n    width: 100%;\n    height: 1px;\n    background: var(--border);\n    margin-bottom: 0;\n  }\n\n  \/* \u2500\u2500 Text input \u2500\u2500 *\/\n  .field-input {\n    width: 100%;\n    background: transparent;\n    border: none;\n    border-bottom: 1px solid var(--border);\n    padding: 18px 0;\n    font-family: var(--sans);\n    font-size: 22px;\n    font-weight: 500;\n    color: var(--ink);\n    outline: none;\n    transition: border-color 0.25s;\n    margin-bottom: 36px;\n  }\n  .field-input:focus { border-bottom-color: var(--ink); }\n  .field-input::placeholder { color: var(--border); }\n\n  textarea.field-input {\n    resize: none;\n    min-height: 110px;\n    line-height: 1.65;\n    padding-top: 14px;\n  }\n\n  \/* \u2500\u2500 Refs multi-entry (S4) \u2500\u2500 *\/\n  .refs-list {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 12px;\n  }\n\n  .ref-entry {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    border-bottom: 1px solid var(--border);\n  }\n\n  .ref-entry .field-input {\n    flex: 1;\n    margin-bottom: 0;\n    border-bottom: none;\n    padding: 16px 0;\n    font-size: 18px;\n  }\n\n  .ref-remove {\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n    border: 1px solid var(--border);\n    border-radius: 50%;\n    background: transparent;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: border-color 0.18s, color 0.18s;\n    padding: 0;\n    line-height: 1;\n  }\n  .ref-remove:hover { border-color: var(--ink); color: var(--ink); }\n\n  .ref-add {\n    background: transparent;\n    border: none;\n    padding: 14px 0 36px;\n    font-family: var(--sans);\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: var(--muted);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: color 0.18s;\n    align-self: flex-start;\n  }\n  .ref-add:hover { color: var(--ink); }\n\n  \/* \u2500\u2500 Choices \u2500\u2500 *\/\n  .choices {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 6px;\n    margin-bottom: 36px;\n  }\n  .choices.single-col { grid-template-columns: 1fr; }\n\n  .choice {\n    padding: 18px 22px;\n    border: 1px solid var(--border);\n    border-radius: 0;\n    cursor: pointer;\n    font-family: var(--sans);\n    font-size: 24px;\n    font-weight: 500;\n    color: var(--muted);\n    background: transparent;\n    text-align: left;\n    transition: border-color 0.18s, background 0.18s, color 0.18s;\n    line-height: 1.4;\n  }\n  .choice:hover { border-color: var(--ink); color: var(--ink); }\n  .choice.selected {\n    border-color: var(--accent);\n    background: var(--accent);\n    color: #ffffff;\n  }\n  .choice .choice-label {\n    display: block;\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    opacity: 0.5;\n    margin-bottom: 5px;\n  }\n  .choice.selected .choice-label { opacity: 0.7; }\n\n  \/* \u2500\u2500 Error \u2500\u2500 *\/\n  .error-msg {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--accent);\n    margin-top: -28px;\n    margin-bottom: 20px;\n    display: none;\n  }\n\n  \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n  .cta {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    background: #D9D9D9;\n    color: #7A7777;\n    border: none;\n    padding: 14px 24px;\n    font-family: var(--sans);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: 0;\n    text-transform: none;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.2s, color 0.2s, transform 0.12s;\n    align-self: flex-start;\n    text-decoration: none;\n  }\n  .cta:hover { background: var(--ink); color: #fff; }\n  .cta:active { transform: scale(0.98); }\n\n  .cta.ghost {\n    background: transparent;\n    color: #7A7777;\n    border: 1px solid #D9D9D9;\n    text-transform: none;\n    letter-spacing: 0;\n    font-size: 18px;\n    font-weight: 500;\n    padding: 14px 24px;\n    border-radius: 4px;\n  }\n  .cta.ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }\n\n  .cta.send {\n    background: var(--accent);\n    color: #fff;\n  }\n  .cta.send:hover { background: var(--ink); color: #fff; }\n\n  \/* \u2500\u2500 Nav row \u2500\u2500 *\/\n  .nav-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n    margin-top: 8px;\n  }\n  .hint {\n    font-size: 18px;\n    color: var(--muted);\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    margin-left: 4px;\n  }\n\n  \/* \u2500\u2500 Welcome screen \u2500\u2500 *\/\n  .welcome-label {\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: var(--accent);\n    margin-bottom: 24px;\n    padding-bottom: 10px;\n    border-bottom: 1.5px solid var(--accent);\n    align-self: flex-start;\n  }\n\n  .welcome-title {\n    font-weight: 900;\n    font-size: clamp(54px, 10vw, 108px);\n    line-height: 0.95;\n    letter-spacing: -0.02em;\n    color: var(--accent);\n    text-transform: uppercase;\n    margin-bottom: 36px;\n  }\n\n  .welcome-sub {\n    font-size: 24px;\n    color: #D9D9D9;\n    font-weight: 500;\n    line-height: 1.1;\n    max-width: 480px;\n    margin-bottom: 44px;\n  }\n\n  .welcome-meta {\n    display: flex;\n    gap: 56px;\n    margin-top: 56px;\n    padding-top: 24px;\n    border-top: 1px solid var(--border);\n  }\n  .welcome-meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .welcome-meta-item span:first-child {\n    font-size: 24px;\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: #D9D9D9;\n  }\n  .welcome-meta-item span:last-child {\n    font-size: 24px;\n    font-weight: 500;\n    color: var(--ink);\n  }\n\n  \/* \u2500\u2500 Final screen \u2500\u2500 *\/\n  .final-title {\n    font-weight: 900;\n    font-size: clamp(44px, 7vw, 80px);\n    line-height: 1.0;\n    letter-spacing: -0.01em;\n    color: var(--accent);\n    text-transform: uppercase;\n    margin-bottom: 20px;\n  }\n\n  .final-sub {\n    font-size: 16px;\n    color: var(--muted);\n    font-weight: 500;\n    line-height: 1.65;\n    max-width: 420px;\n    margin-bottom: 48px;\n  }\n\n  \/* \u2500\u2500 Summary \u2500\u2500 *\/\n  .summary {\n    border-top: 1px solid var(--border);\n    padding-top: 20px;\n    margin-bottom: 40px;\n  }\n  .summary-row {\n    display: flex;\n    gap: 24px;\n    padding: 10px 0;\n    border-bottom: 1px solid var(--border);\n    align-items: flex-start;\n  }\n  .summary-label {\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--muted);\n    min-width: 110px;\n    padding-top: 2px;\n    flex-shrink: 0;\n  }\n  .summary-value {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--ink);\n    line-height: 1.55;\n  }\n\n  \/* \u2500\u2500 Low-budget box \u2500\u2500 *\/\n  .info-box {\n    border-top: 1.5px solid var(--accent);\n    border-bottom: 1px solid var(--border);\n    padding: 24px 0;\n    margin-bottom: 40px;\n  }\n  .info-box p {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--ink);\n    line-height: 1.65;\n  }\n  .info-box p + p {\n    margin-top: 12px;\n    color: var(--muted);\n    font-size: 15px;\n  }\n\n  \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n  @media (max-width: 600px) {\n    #stage { padding: 60px 16px; }\n    .choices { grid-template-columns: 1fr; }\n    .welcome-meta { flex-wrap: wrap; gap: 24px; }\n    .welcome-title { font-size: clamp(40px, 14vw, 72px); }\n    .question { font-size: clamp(34px, 10vw, 60px); }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .screen, .cta, .choice { transition: none; }\n  }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"progress-track\"><\/div>\n\n<div id=\"stage\">\n\n  <!-- S0: Bienvenida -->\n  <div class=\"screen\" id=\"s0\">\n    <span class=\"welcome-label\" style=\"border-width: 0px; padding: 0px\">briefing de proyecto<\/span>\n    <h1 class=\"welcome-title\" style=\"font-weight: 800\">cu\u00e9ntame<br>tu proyecto.<\/h1>\n    <p class=\"welcome-sub\">Unas preguntas para entender bien lo que necesitas. Sin formulismos.<\/p>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"goTo(1)\">Comenzar<\/button>\n      <span class=\"hint\">o pulsa Enter \u21b5<\/span>\n    <\/div>\n    <div class=\"welcome-meta\" style=\"border-width: 0px; padding: 0px\">\n      <div class=\"welcome-meta-item\">\n        <span>Duraci\u00f3n<\/span>\n        <span>~3 min<\/span>\n      <\/div>\n      <div class=\"welcome-meta-item\">\n        <span>Pasos<\/span>\n        <span>7<\/span>\n      <\/div>\n      <div class=\"welcome-meta-item\">\n        <span>Respuesta<\/span>\n        <span>en 48 h<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- S1: Nombre -->\n  <div class=\"screen\" id=\"s1\">\n    <div class=\"eyebrow\">01 \u2014 sobre ti<\/div>\n    <h2 class=\"question\">\u00bfc\u00f3mo quieres<br>que te llame?<\/h2>\n    <input class=\"field-input\" id=\"f-name\" type=\"text\" placeholder=\"tu nombre o el de tu empresa\" autocomplete=\"off\">\n    <p class=\"error-msg\" id=\"err-name\">escribe tu nombre para continuar.<\/p>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"next(1,'f-name',2)\">Continuar<\/button>\n      <span class=\"hint\">o pulsa Enter \u21b5<\/span>\n      <button class=\"cta ghost\" onclick=\"goTo(0)\">\u2190 Atr\u00e1s<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S2: Tipo de proyecto -->\n  <div class=\"screen\" id=\"s2\">\n    <div class=\"eyebrow\">02 \u2014 el proyecto<\/div>\n    <h2 class=\"question\">\u00bfqu\u00e9 tipo de<br>proyecto es?<\/h2>\n    <p class=\"subtext\">Elige el que m\u00e1s se acerque. Siempre podemos matizarlo.<\/p>\n    <div class=\"choices\" id=\"choices-type\">\n      <button class=\"choice\" data-value=\"Identidad visual \/ branding\" onclick=\"selectChoice(this,'choices-type')\">\n        <span class=\"choice-label\">branding<\/span>\n        Identidad visual\n      <\/button>\n      <button class=\"choice\" data-value=\"Dise\u00f1o web\" onclick=\"selectChoice(this,'choices-type')\">\n        <span class=\"choice-label\">digital<\/span>\n        Dise\u00f1o web\n      <\/button>\n      <button class=\"choice\" data-value=\"Editorial \/ print\" onclick=\"selectChoice(this,'choices-type')\">\n        <span class=\"choice-label\">impreso<\/span>\n        Editorial \/ print\n      <\/button>\n      <button class=\"choice\" data-value=\"Direcci\u00f3n de arte\" onclick=\"selectChoice(this,'choices-type')\">\n        <span class=\"choice-label\">creativo<\/span>\n        Direcci\u00f3n de arte\n      <\/button>\n      <button class=\"choice\" data-value=\"Packaging\" onclick=\"selectChoice(this,'choices-type')\">\n        <span class=\"choice-label\">producto<\/span>\n        Packaging\n      <\/button>\n      <button class=\"choice\" data-value=\"Todav\u00eda no lo tengo claro\" onclick=\"selectChoice(this,'choices-type')\">\n        <span class=\"choice-label\">lo vemos juntos<\/span>\n        No lo tengo claro\n      <\/button>\n    <\/div>\n    <p class=\"error-msg\" id=\"err-type\">selecciona una opci\u00f3n para continuar.<\/p>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"nextChoice('choices-type','err-type',3)\">\n        Continuar\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(1)\">\u2190 Atr\u00e1s<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S3: Descripci\u00f3n -->\n  <div class=\"screen\" id=\"s3\">\n    <div class=\"eyebrow\">03 \u2014 la idea<\/div>\n    <h2 class=\"question\" id=\"q3-title\">cu\u00e9ntame<br>el proyecto.<\/h2>\n    <p class=\"subtext\" id=\"q3-sub\">Ya me escribiste algo \u2014 aqu\u00ed puedes desarrollarlo, matizar lo que dijiste o a\u00f1adir lo que no cab\u00eda en tres l\u00edneas.<\/p>\n    <textarea class=\"field-input\" id=\"f-desc\" placeholder=\"contexto, necesidad, lo que imaginas\u2026\"><\/textarea>\n    <p class=\"error-msg\" id=\"err-desc\">unas pocas palabras bastan \u2014 dame una pista.<\/p>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"next(3,'f-desc',4)\">\n        Continuar\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(2)\">\u2190 Atr\u00e1s<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S4: Referencias -->\n  <div class=\"screen\" id=\"s4\">\n    <div class=\"eyebrow\">04 \u2014 referencias<\/div>\n    <h2 class=\"question\">\u00bfalguna<br>referencia?<\/h2>\n    <p class=\"subtext\">Una marca que te gusta, una URL, un estado de \u00e1nimo. A\u00f1ade las que quieras \u2014 o ninguna, tambi\u00e9n est\u00e1 bien.<\/p>\n    <div class=\"refs-list\" id=\"refs-list\">\n      <div class=\"ref-entry\">\n        <input class=\"field-input\" type=\"text\" placeholder=\"URL, marca, sensaci\u00f3n\u2026\" autocomplete=\"off\">\n        <button class=\"ref-remove\" style=\"display:none\" onclick=\"removeRef(this)\" aria-label=\"eliminar\">\u00d7<\/button>\n      <\/div>\n    <\/div>\n    <button class=\"ref-add\" id=\"refs-add-btn\" onclick=\"addRefEntry()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M6 1v10M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><\/svg>\n      a\u00f1adir otra referencia\n    <\/button>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"saveRefsAndGo(5)\">\n        Continuar\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(3)\">\u2190 Atr\u00e1s<\/button>\n      <span class=\"hint\">opcional<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- S5: Plazo -->\n  <div class=\"screen\" id=\"s5\">\n    <div class=\"eyebrow\">05 \u2014 tiempos<\/div>\n    <h2 class=\"question\">\u00bfcu\u00e1ndo lo<br>necesitas?<\/h2>\n    <div class=\"choices single-col\" id=\"choices-timeline\">\n      <button class=\"choice\" data-value=\"Lo antes posible (menos de 2 semanas)\" onclick=\"selectChoice(this,'choices-timeline')\">Lo antes posible \u2014 menos de 2 semanas<\/button>\n      <button class=\"choice\" data-value=\"1\u20132 meses, con algo de margen\" onclick=\"selectChoice(this,'choices-timeline')\">1\u20132 meses, con algo de margen<\/button>\n      <button class=\"choice\" data-value=\"3 meses o m\u00e1s, sin urgencia\" onclick=\"selectChoice(this,'choices-timeline')\">3 meses o m\u00e1s, sin urgencia<\/button>\n      <button class=\"choice\" data-value=\"Sin definir de momento\" onclick=\"selectChoice(this,'choices-timeline')\">Sin definir de momento<\/button>\n    <\/div>\n    <p class=\"error-msg\" id=\"err-timeline\">elige una opci\u00f3n para continuar.<\/p>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"nextChoice('choices-timeline','err-timeline',6)\">\n        Continuar\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(4)\">\u2190 Atr\u00e1s<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S6: Presupuesto -->\n  <div class=\"screen\" id=\"s6\">\n    <div class=\"eyebrow\">06 \u2014 presupuesto<\/div>\n    <h2 class=\"question\">\u00bftienes un<br>presupuesto?<\/h2>\n    <p class=\"subtext\">Saberlo me ayuda a plantear el alcance correcto. Todas las respuestas son v\u00e1lidas.<\/p>\n    <div class=\"choices single-col\" id=\"choices-budget\">\n      <button class=\"choice\" data-value=\"menos de 800\u20ac\" onclick=\"selectChoice(this,'choices-budget')\">Menos de 800 \u20ac<\/button>\n      <button class=\"choice\" data-value=\"800\u20ac\u20132.000\u20ac\" onclick=\"selectChoice(this,'choices-budget')\">800 \u20ac \u2013 2.000 \u20ac<\/button>\n      <button class=\"choice\" data-value=\"2.000\u20ac\u20135.000\u20ac\" onclick=\"selectChoice(this,'choices-budget')\">2.000 \u20ac \u2013 5.000 \u20ac<\/button>\n      <button class=\"choice\" data-value=\"m\u00e1s de 5.000\u20ac\" onclick=\"selectChoice(this,'choices-budget')\">M\u00e1s de 5.000 \u20ac<\/button>\n      <button class=\"choice\" data-value=\"No lo s\u00e9 todav\u00eda\" onclick=\"selectChoice(this,'choices-budget')\">No lo s\u00e9 todav\u00eda<\/button>\n    <\/div>\n    <p class=\"error-msg\" id=\"err-budget\">elige una opci\u00f3n para continuar.<\/p>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"handleBudget()\">\n        Continuar\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(5)\">\u2190 Atr\u00e1s<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S6b: Presupuesto bajo -->\n  <div class=\"screen\" id=\"s6b\">\n    <div class=\"eyebrow\">06 \u2014 presupuesto<\/div>\n    <h2 class=\"question\">gracias por<br>la honestidad.<\/h2>\n    <div class=\"info-box\">\n      <p>Con un presupuesto menor de 800 \u20ac es dif\u00edcil que pueda abordar un proyecto con la dedicaci\u00f3n que merece.<\/p>\n      <p>Si aun as\u00ed quieres contarme el proyecto, adelante \u2014 a veces hay soluciones creativas. Y si en el futuro el momento es diferente, aqu\u00ed estar\u00e9.<\/p>\n    <\/div>\n    <div class=\"nav-row\">\n      <button class=\"cta\" onclick=\"goTo(7)\">\n        Continuar de todas formas\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(6)\">\u2190 Cambiar presupuesto<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S7: Contacto -->\n  <div class=\"screen\" id=\"s7\">\n    <div class=\"eyebrow\">07 \u2014 contacto<\/div>\n    <h2 class=\"question\">\u00bfc\u00f3mo puedo<br>escribirte?<\/h2>\n    <p class=\"subtext\">Con un email es suficiente.<\/p>\n    <input class=\"field-input\" id=\"f-email\" type=\"email\" placeholder=\"tu@email.com\" autocomplete=\"email\">\n    <p class=\"error-msg\" id=\"err-email\">introduce un email v\u00e1lido para continuar.<\/p>\n    <input class=\"field-input\" id=\"f-extra\" type=\"text\" placeholder=\"algo m\u00e1s que quieras a\u00f1adir\u2026 (opcional)\" style=\"margin-top:-18px\">\n    <div class=\"nav-row\">\n      <button class=\"cta send\" onclick=\"submitForm()\">\n        Enviar briefing\n      <\/button>\n      <button class=\"cta ghost\" onclick=\"goTo(6)\">\u2190 Atr\u00e1s<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- S8: Gracias -->\n  <div class=\"screen\" id=\"s8\">\n    <h2 class=\"final-title\" id=\"thanks-title\">gracias.<\/h2>\n    <p class=\"final-sub\">Te respondo en menos de 48 horas. Mientras tanto, puedes echar un vistazo a algunos proyectos recientes.<\/p>\n    <div class=\"summary\" id=\"summary-block\"><\/div>\n    <div class=\"nav-row\">\n      <a class=\"cta send\" href=\"https:\/\/victorangeldesign.com\/projects\/\" target=\"_blank\">\n        Ver proyectos\n      <\/a>\n      <a class=\"cta ghost\" href=\"https:\/\/victorangeldesign.com\">\u2190 Volver a la web<\/a>\n    <\/div>\n  <\/div>\n\n<\/div><!-- \/stage -->\n\n<script>\n  const TOTAL = 7;\n  let current = 0;\n  const data = {};\n\n  \/\/ \u2500\u2500 Progress segments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function buildProgress() {\n    const track = document.getElementById('progress-track');\n    for (let i = 1; i <= TOTAL; i++) {\n      const seg = document.createElement('div');\n      seg.className = 'progress-seg';\n      seg.id = 'seg-' + i;\n      track.appendChild(seg);\n    }\n  }\n\n  function updateProgress(logicalStep) {\n    for (let i = 1; i <= TOTAL; i++) {\n      const seg = document.getElementById('seg-' + i);\n      seg.classList.toggle('filled', i <= logicalStep);\n    }\n  }\n\n  \/\/ \u2500\u2500 goTo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function goTo(n) {\n    const from = document.getElementById('s' + current);\n    const to   = document.getElementById('s' + n);\n    if (!to) return;\n    from.classList.remove('visible');\n    setTimeout(() => {\n      from.classList.remove('active');\n      to.classList.add('active');\n      requestAnimationFrame(() => requestAnimationFrame(() => to.classList.add('visible')));\n      current = n;\n      updateUI();\n      const inp = to.querySelector('input:not([type=hidden]), textarea');\n      if (inp) setTimeout(() => inp.focus(), 320);\n    }, 360);\n  }\n\n  function updateUI() {\n    const isWelcome   = current === 0;\n    const isFinal     = current === 8;\n    const isLowBudget = current === '6b';\n\n    const logicalStep = isWelcome   ? 0\n      : isFinal      ? TOTAL\n      : isLowBudget  ? 6\n      : Math.min(current, TOTAL);\n\n    updateProgress(logicalStep);\n  }\n\n  \/\/ \u2500\u2500 text field step \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function next(screenNum, fieldId, nextScreen) {\n    const field  = document.getElementById(fieldId);\n    const errKey = fieldId.replace('f-', '');\n    const err    = document.getElementById('err-' + errKey);\n    if (field && field.value.trim().length < 1) {\n      if (err) err.style.display = 'block';\n      field.focus();\n      return;\n    }\n    if (err) err.style.display = 'none';\n    if (field) data[fieldId] = field.value.trim();\n    if (fieldId === 'f-name') {\n      const first = field.value.split(' ')[0];\n      document.getElementById('q3-title').innerHTML =\n        'cu\u00e9ntame<br>el proyecto,<br>' + first + '.';\n    }\n    goTo(nextScreen);\n  }\n\n  \/\/ \u2500\u2500 refs multi-entry (S4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function addRefEntry() {\n    const list = document.getElementById('refs-list');\n    if (list.querySelectorAll('.ref-entry').length >= 5) return;\n    const div = document.createElement('div');\n    div.className = 'ref-entry';\n    div.innerHTML =\n      '<input class=\"field-input\" type=\"text\" placeholder=\"URL, marca, sensaci\u00f3n\u2026\" autocomplete=\"off\">' +\n      '<button class=\"ref-remove\" onclick=\"removeRef(this)\" aria-label=\"eliminar\">\u00d7<\/button>';\n    list.appendChild(div);\n    syncRefButtons();\n    div.querySelector('input').focus();\n  }\n\n  function removeRef(btn) {\n    btn.closest('.ref-entry').remove();\n    syncRefButtons();\n  }\n\n  function syncRefButtons() {\n    const entries = document.querySelectorAll('#refs-list .ref-entry');\n    const addBtn  = document.getElementById('refs-add-btn');\n    entries.forEach(e => {\n      e.querySelector('.ref-remove').style.display = entries.length > 1 ? 'flex' : 'none';\n    });\n    addBtn.style.display = entries.length >= 5 ? 'none' : '';\n  }\n\n  function saveRefsAndGo(nextScreen) {\n    const inputs = document.querySelectorAll('#refs-list .ref-entry input');\n    data['f-refs'] = Array.from(inputs).map(i => i.value.trim()).filter(v => v.length > 0);\n    goTo(nextScreen);\n  }\n\n  \/\/ \u2500\u2500 choice step \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function selectChoice(el, groupId) {\n    document.querySelectorAll('#' + groupId + ' .choice')\n      .forEach(c => c.classList.remove('selected'));\n    el.classList.add('selected');\n  }\n\n  function nextChoice(groupId, errId, nextScreen) {\n    const sel = document.querySelector('#' + groupId + ' .choice.selected');\n    const err = document.getElementById(errId);\n    if (!sel) { err.style.display = 'block'; return; }\n    err.style.display = 'none';\n    data[groupId] = sel.dataset.value;\n    goTo(nextScreen);\n  }\n\n  \/\/ \u2500\u2500 budget logic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function handleBudget() {\n    const sel = document.querySelector('#choices-budget .choice.selected');\n    const err = document.getElementById('err-budget');\n    if (!sel) { err.style.display = 'block'; return; }\n    err.style.display = 'none';\n    data['choices-budget'] = sel.dataset.value;\n    goTo(sel.dataset.value === 'menos de 800\u20ac' ? '6b' : 7);\n  }\n\n  \/\/ \u2500\u2500 submit \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function submitForm() {\n    const email = document.getElementById('f-email');\n    const err   = document.getElementById('err-email');\n    const re    = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n    if (!email || !re.test(email.value.trim())) {\n      err.style.display = 'block';\n      email.focus();\n      return;\n    }\n    err.style.display = 'none';\n    data['f-email'] = email.value.trim();\n    data['f-extra'] = document.getElementById('f-extra').value.trim();\n\n    const firstName = (data['f-name'] || '').split(' ')[0];\n    if (firstName) {\n      document.getElementById('thanks-title').textContent = 'gracias, ' + firstName + '.';\n    }\n\n    const refs = Array.isArray(data['f-refs']) && data['f-refs'].length\n      ? data['f-refs'].join(' \u00b7 ')\n      : '\u2014';\n\n    const rows = [\n      { label: 'nombre',      val: data['f-name']           },\n      { label: 'proyecto',    val: data['choices-type']      },\n      { label: 'descripci\u00f3n', val: data['f-desc']            },\n      { label: 'referencias', val: refs                      },\n      { label: 'plazo',       val: data['choices-timeline']  },\n      { label: 'presupuesto', val: data['choices-budget']    },\n      { label: 'email',       val: data['f-email']           },\n      { label: 'notas',       val: data['f-extra'] || '\u2014'   },\n    ];\n\n    document.getElementById('summary-block').innerHTML =\n      rows.map(r => '<div class=\"summary-row\">' +\n        '<span class=\"summary-label\">' + r.label + '<\/span>' +\n        '<span class=\"summary-value\">' + (r.val || '\u2014') + '<\/span>' +\n        '<\/div>').join('');\n\n    \/\/ \u2500\u2500 Formspree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    fetch('https:\/\/formspree.io\/f\/mrevybak', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/json', 'Accept': 'application\/json' },\n      body: JSON.stringify({\n        nombre:      data['f-name']          || '',\n        proyecto:    data['choices-type']     || '',\n        descripcion: data['f-desc']           || '',\n        referencias: Array.isArray(data['f-refs']) ? data['f-refs'].join(' \u00b7 ') : '',\n        plazo:       data['choices-timeline'] || '',\n        presupuesto: data['choices-budget']   || '',\n        email:       data['f-email']          || '',\n        notas:       data['f-extra']          || '',\n      })\n    }).catch(err => console.error('Formspree error:', err));\n\n    goTo(8);\n  }\n\n  \/\/ \u2500\u2500 Enter key \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('keydown', e => {\n    if (e.key !== 'Enter') return;\n    if (document.activeElement.tagName === 'TEXTAREA') return;\n    const id = '' + current;\n    if (id === '0')  goTo(1);\n    if (id === '1')  next(1, 'f-name', 2);\n    if (id === '2')  nextChoice('choices-type', 'err-type', 3);\n    if (id === '3')  next(3, 'f-desc', 4);\n    if (id === '4')  saveRefsAndGo(5);\n    if (id === '5')  nextChoice('choices-timeline', 'err-timeline', 6);\n    if (id === '6')  handleBudget();\n    if (id === '6b') goTo(7);\n    if (id === '7')  submitForm();\n  });\n\n  \/\/ \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  window.addEventListener('load', () => {\n    buildProgress();\n    const s0 = document.getElementById('s0');\n    s0.classList.add('active');\n    requestAnimationFrame(() => requestAnimationFrame(() => s0.classList.add('visible')));\n    updateUI();\n  });\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>briefing \u2013 v\u00edctor \u00e1ngel briefing de proyecto cu\u00e9ntametu proyecto. Unas preguntas para entender bien lo que necesitas. Sin formulismos. Comenzar o pulsa Enter \u21b5 Duraci\u00f3n ~3 min Pasos 7 Respuesta en 48 h 01 \u2014 sobre ti \u00bfc\u00f3mo quieresque te llame? escribe tu nombre para continuar. Continuar o pulsa Enter \u21b5 \u2190 Atr\u00e1s 02 \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1035","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"vangqui","author_link":"https:\/\/victorangeldesign.com\/es\/author\/vangqui\/"},"uagb_comment_info":0,"uagb_excerpt":"briefing \u2013 v\u00edctor \u00e1ngel briefing de proyecto cu\u00e9ntametu proyecto. Unas preguntas para entender bien lo que necesitas. Sin formulismos. Comenzar o pulsa Enter \u21b5 Duraci\u00f3n ~3 min Pasos 7 Respuesta en 48 h 01 \u2014 sobre ti \u00bfc\u00f3mo quieresque te llame? escribe tu nombre para continuar. Continuar o pulsa Enter \u21b5 \u2190 Atr\u00e1s 02 \u2014&hellip;","_links":{"self":[{"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/comments?post=1035"}],"version-history":[{"count":9,"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages\/1035\/revisions"}],"predecessor-version":[{"id":1047,"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages\/1035\/revisions\/1047"}],"wp:attachment":[{"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/media?parent=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}