{"id":2,"date":"2026-01-15T15:12:52","date_gmt":"2026-01-15T14:12:52","guid":{"rendered":"https:\/\/victorangeldesign.com\/?page_id=2"},"modified":"2026-05-18T11:50:01","modified_gmt":"2026-05-18T09:50:01","slug":"briefingform","status":"publish","type":"page","link":"https:\/\/victorangeldesign.com\/es\/briefingform\/","title":{"rendered":"Formulario Briefing"},"content":{"rendered":"\n<div class=\"wp-block-group is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-059bc41c wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Formulario Briefing<\/h2>\n\n\n\n<style>\n:root {\n  --primary: #200adf;\n  --accent: #efff00;\n  --text: #252525;\n  --text-secondary: #7a7777;\n  --surface: #ffffff;\n  --border: #e4e4e7;\n  --shadow-focus: 0 0 0 3px rgba(32, 10, 223, 0.12);\n  --radius: 6px;\n}\n\n\/* \u2500\u2500 FORM CARD \u2500\u2500 *\/\n.form {\n  max-width: 800px;\n  background: var(--surface);\n  border-radius: 12px;\n  border: 1px solid var(--border);\n  padding: 48px;\n  box-sizing: border-box;\n}\n\n\/* \u2500\u2500 SECTIONS \u2500\u2500 *\/\n.form-section {\n  margin-bottom: 48px;\n  padding-bottom: 48px;\n  border-bottom: 1px solid var(--border);\n}\n\n.form-section:last-of-type {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.section-title {\n  font-size: 11px;\n  line-height: 1;\n  color: var(--text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  margin: 0 0 28px 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.section-title::before {\n  content: '';\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  background: var(--primary);\n  transform: rotate(45deg);\n  border-radius: 1px;\n  flex-shrink: 0;\n}\n\n\/* \u2500\u2500 FORM GROUPS \u2500\u2500 *\/\n.form-group {\n  margin-bottom: 24px;\n}\n\n.form-group:last-child {\n  margin-bottom: 0;\n}\n\nlabel {\n  display: block;\n  font-size: 11px;\n  line-height: 1;\n  font-weight: 600;\n  color: var(--text);\n  margin-bottom: 8px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.required {\n  color: var(--primary);\n  margin-left: 2px;\n}\n\n\/* \u2500\u2500 INPUTS \u2500\u2500 *\/\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"number\"],\ninput[type=\"url\"],\ntextarea,\nselect {\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  color: var(--text);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  appearance: none;\n  box-sizing: border-box;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"email\"]:focus,\ninput[type=\"number\"]:focus,\ninput[type=\"url\"]:focus,\ntextarea:focus,\nselect:focus {\n  outline: none;\n  border-color: var(--primary);\n  box-shadow: var(--shadow-focus);\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: #b8b4b4;\n}\n\ntextarea {\n  resize: vertical;\n  min-height: 100px;\n}\n\n.helper-text {\n  font-size: 12px;\n  line-height: 1.4;\n  color: var(--text-secondary);\n  margin-top: 6px;\n}\n\n\/* \u2500\u2500 FILE UPLOAD \u2500\u2500 *\/\n.file-upload {\n  position: relative;\n  width: 100%;\n}\n\n.file-input {\n  display: none;\n}\n\n.file-label {\n  display: flex;\n  align-items: center;\n  padding: 28px 24px;\n  border: 1.5px dashed var(--border);\n  border-radius: var(--radius);\n  background: #fafafa;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  gap: 16px;\n}\n\n.file-label:hover {\n  border-color: var(--primary);\n  background: rgba(32, 10, 223, 0.02);\n}\n\n.file-label.has-file {\n  background: rgba(32, 10, 223, 0.03);\n  border-color: var(--primary);\n  border-style: solid;\n}\n\n.file-icon {\n  opacity: 0.4;\n  flex-shrink: 0;\n}\n\n.file-text p {\n  font-weight: 500;\n  color: var(--text);\n  margin-bottom: 2px;\n}\n\n.file-text span {\n  color: var(--text-secondary);\n}\n\n.file-name {\n  color: var(--primary);\n  font-weight: 500;\n  margin-top: 8px;\n}\n\n\/* \u2500\u2500 COLOR PICKER \u2500\u2500 *\/\n.color-input-wrapper {\n  display: flex;\n  gap: 10px;\n  align-items: flex-end;\n}\n\n.color-input {\n  width: 52px;\n  height: 48px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  cursor: pointer;\n  padding: 3px;\n  background: var(--surface);\n  transition: box-shadow 0.15s ease;\n}\n\n.color-input:focus {\n  outline: none;\n  box-shadow: var(--shadow-focus);\n}\n\n.color-input-field {\n  flex: 1;\n}\n\n\/* \u2500\u2500 CHECKBOXES \u2500\u2500 *\/\n.checkbox-group {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 8px;\n}\n\n.checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  padding: 10px 14px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.checkbox-wrapper:hover {\n  border-color: var(--primary);\n  background: rgba(32, 10, 223, 0.02);\n}\n\n.checkbox-wrapper input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  margin-right: 10px;\n  cursor: pointer;\n  accent-color: var(--primary);\n  flex-shrink: 0;\n}\n\n.checkbox-wrapper label {\n  margin: 0;\n  cursor: pointer;\n  font-size: 12px;\n  line-height: 1.3;\n  text-transform: none;\n  letter-spacing: normal;\n  font-weight: 400;\n  user-select: none;\n}\n\n\/* \u2500\u2500 BRAND SLIDERS \u2500\u2500 *\/\n.scale-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-bottom: 20px;\n  padding: 16px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  transition: border-color 0.15s ease;\n}\n\n.scale-row:last-child {\n  margin-bottom: 0;\n}\n\n.scale-row:focus-within {\n  border-color: var(--primary);\n}\n\n.pole {\n  font-size: 12px;\n  color: var(--text-secondary);\n  font-weight: 500;\n  white-space: nowrap;\n  min-width: 80px;\n  line-height: 1.2;\n}\n\n.pole.right {\n  text-align: right;\n}\n\n.range-track {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.range-value {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--primary);\n  background: rgba(32, 10, 223, 0.08);\n  border-radius: 4px;\n  padding: 2px 8px;\n  min-width: 28px;\n  text-align: center;\n  letter-spacing: 0.5px;\n}\n\ninput[type=\"range\"].brand-slider {\n  width: 100%;\n  height: 4px;\n  padding: 0;\n  border: none;\n  border-radius: 2px;\n  appearance: none;\n  cursor: pointer;\n  background: linear-gradient(to right, var(--primary) 40%, var(--border) 40%);\n  transition: background 0s;\n}\n\ninput[type=\"range\"].brand-slider:focus {\n  outline: none;\n  box-shadow: none;\n}\n\ninput[type=\"range\"].brand-slider::-webkit-slider-thumb {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--primary);\n  border: 2.5px solid white;\n  box-shadow: 0 1px 4px rgba(32, 10, 223, 0.25);\n  transition: box-shadow 0.15s ease;\n}\n\ninput[type=\"range\"].brand-slider:hover::-webkit-slider-thumb,\ninput[type=\"range\"].brand-slider:focus::-webkit-slider-thumb {\n  box-shadow: 0 0 0 4px rgba(32, 10, 223, 0.12);\n}\n\ninput[type=\"range\"].brand-slider::-moz-range-thumb {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--primary);\n  border: 2.5px solid white;\n  box-shadow: 0 1px 4px rgba(32, 10, 223, 0.25);\n}\n\ninput[type=\"range\"].brand-slider::-moz-range-track {\n  height: 4px;\n  border-radius: 2px;\n  background: var(--border);\n  border: none;\n}\n\ninput[type=\"range\"].brand-slider::-moz-range-progress {\n  height: 4px;\n  border-radius: 2px;\n  background: var(--primary);\n}\n\n\/* \u2500\u2500 URL LIST \u2500\u2500 *\/\n.url-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.url-item {\n  display: flex;\n  gap: 8px;\n}\n\n.url-item input { flex: 1; }\n\n.url-remove {\n  padding: 8px 14px;\n  background: transparent;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  cursor: pointer;\n  color: var(--text-secondary);\n  transition: all 0.15s ease;\n}\n\n.url-remove:hover {\n  border-color: #e74c3c;\n  color: #e74c3c;\n  background: rgba(231, 76, 60, 0.04);\n}\n\n\/* \u2500\u2500 CATEGORY LIST \u2500\u2500 *\/\n.category-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.category-item {\n  display: flex;\n  gap: 8px;\n}\n\n.category-item input { flex: 1; }\n\n.category-remove {\n  padding: 8px 14px;\n  background: transparent;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  cursor: pointer;\n  color: var(--text-secondary);\n  transition: all 0.15s ease;\n}\n\n.category-remove:hover {\n  border-color: #e74c3c;\n  color: #e74c3c;\n  background: rgba(231, 76, 60, 0.04);\n}\n\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\n.btn {\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--radius);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.btn-add {\n  width: 100%;\n  margin-top: 8px;\n  background: transparent;\n  color: var(--text-secondary);\n  border: 1px dashed var(--border);\n}\n\n.btn-add:hover {\n  border-color: var(--primary);\n  color: var(--primary);\n  background: rgba(32, 10, 223, 0.02);\n}\n\n.btn-primary {\n  width: 100%;\n  margin-top: 40px;\n  padding: 14px 28px;\n  background: linear-gradient(to right, var(--accent) 50%, var(--primary) 50%);\n  background-size: 200% 100%;\n  background-position: right;\n  color: var(--accent);\n  border-radius: var(--radius);\n  text-transform: none;\n  letter-spacing: normal;\n  position: relative;\n  overflow: hidden;\n  transition: background-position 0.35s ease, color 0.35s ease;\n}\n\n.btn-primary::after {\n  content: ' \u2192';\n  display: inline-block;\n  opacity: 0;\n  transform: translateX(-6px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n\n.btn-primary:hover {\n  background-position: left;\n  color: var(--primary);\n}\n\n.btn-primary:hover::after {\n  opacity: 1;\n  transform: translateX(4px);\n}\n\n.btn-primary:active {\n  transform: scale(0.99);\n}\n\n.btn-primary:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none !important;\n}\n\n.btn-primary:disabled::after {\n  display: none;\n}\n\n\/* \u2500\u2500 SUCCESS \u2500\u2500 *\/\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-10px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n\n.success-message {\n  display: none;\n  align-items: center;\n  gap: 16px;\n  background: #e8f5e9;\n  border: 1px solid #a5d6a7;\n  border-radius: var(--radius);\n  padding: 18px 22px;\n  margin-bottom: 24px;\n}\n\n.success-message.show {\n  display: flex;\n  animation: slideDown 0.3s ease forwards;\n}\n\n.success-icon {\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: #c8e6c9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2e7d32;\n  font-size: 20px;\n  animation: spin 3s linear infinite;\n}\n\n.success-body {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.success-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: #1b5e20;\n  line-height: 1.2;\n}\n\n.success-sub {\n  font-size: 12px;\n  color: #388e3c;\n  line-height: 1.3;\n}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 768px) {\n  .form {\n    padding: 28px 20px;\n  }\n\n  .checkbox-group {\n    grid-template-columns: 1fr;\n  }\n}\n<\/style>\n\n<form class=\"form\" id=\"briefingForm\">\n  <div class=\"success-message\" id=\"successMessage\">\n    <div class=\"success-icon\">\u2699<\/div>\n    <div class=\"success-body\">\n      <p class=\"success-title\">Briefing enviado correctamente<\/p>\n      <p class=\"success-sub\">Estamos comenzando a trabajar en tu proyecto.<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- INFORMACI\u00d3N GENERAL -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Informaci\u00f3n General<\/h2>\n\n    <div class=\"form-group\">\n      <label>Nombre de la empresa <span class=\"required\">*<\/span><\/label>\n      <input type=\"text\" name=\"empresa\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Correo electr\u00f3nico <span class=\"required\">*<\/span><\/label>\n      <input type=\"email\" name=\"email\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Tel\u00e9fono<\/label>\n      <input type=\"text\" name=\"telefono\">\n    <\/div>\n  <\/div>\n\n  <!-- LOGO Y IDENTIDAD -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Logo e Identidad Visual<\/h2>\n\n    <div class=\"form-group\">\n      <label>Logo\/Marca <span class=\"required\">*<\/span><\/label>\n      <div class=\"file-upload\">\n        <input type=\"file\" id=\"logoFile\" class=\"file-input\" accept=\"image\/*\" name=\"logo\">\n        <label for=\"logoFile\" class=\"file-label\">\n          <div class=\"file-icon\">\ud83d\udcc1<\/div>\n          <div class=\"file-text\">\n            <p>Sube tu logo<\/p>\n            <span>PNG, JPG, SVG \u2014 m\u00e1x. 5MB<\/span>\n          <\/div>\n        <\/label>\n        <div class=\"file-name\" id=\"logoName\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- COLORES -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Paleta de Colores<\/h2>\n\n    <div class=\"form-group\">\n      <label>Color principal <span class=\"required\">*<\/span><\/label>\n      <div class=\"color-input-wrapper\">\n        <input type=\"color\" class=\"color-input\" name=\"color_principal\" value=\"#200adf\" required>\n        <div class=\"color-input-field\">\n          <input type=\"text\" id=\"color_principal_hex\" value=\"#200adf\" placeholder=\"#200adf\">\n        <\/div>\n      <\/div>\n      <p class=\"helper-text\">El color que m\u00e1s identifica tu marca<\/p>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Color secundario<\/label>\n      <div class=\"color-input-wrapper\">\n        <input type=\"color\" class=\"color-input\" name=\"color_secundario\" value=\"#efff00\">\n        <div class=\"color-input-field\">\n          <input type=\"text\" id=\"color_secundario_hex\" value=\"#efff00\">\n        <\/div>\n      <\/div>\n      <p class=\"helper-text\">Complementario o de acento<\/p>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Sensaci\u00f3n visual deseada <span class=\"required\">*<\/span><\/label>\n      <div class=\"checkbox-group\">\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_minimalista\" name=\"sensacion\" value=\"Minimalista\">\n          <label for=\"sensacion_minimalista\">Minimalista<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_moderno\" name=\"sensacion\" value=\"Moderno\">\n          <label for=\"sensacion_moderno\">Moderno<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_corporativo\" name=\"sensacion\" value=\"Corporativo\">\n          <label for=\"sensacion_corporativo\">Corporativo<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_playful\" name=\"sensacion\" value=\"L\u00fadico\">\n          <label for=\"sensacion_playful\">L\u00fadico<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_luxury\" name=\"sensacion\" value=\"Luxury\">\n          <label for=\"sensacion_luxury\">Luxury<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_retro\" name=\"sensacion\" value=\"Retro\">\n          <label for=\"sensacion_retro\">Retro<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_energetico\" name=\"sensacion\" value=\"Energ\u00e9tico\">\n          <label for=\"sensacion_energetico\">Energ\u00e9tico<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" id=\"sensacion_sofisticado\" name=\"sensacion\" value=\"Sofisticado\">\n          <label for=\"sensacion_sofisticado\">Sofisticado<\/label>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Comentarios sobre el color<\/label>\n      <textarea name=\"comentarios_color\" placeholder=\"\u00bfTienes colores que definitivamente no quieres? \u00bfAlguna referencia o contexto sobre tu paleta actual?\"><\/textarea>\n      <p class=\"helper-text\">Restricciones, preferencias o cualquier contexto \u00fatil sobre el uso del color<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- REFERENCIAS -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Referencias Visuales<\/h2>\n\n    <div class=\"form-group\">\n      <label>Webs de tiendas que te inspiran<\/label>\n      <p class=\"helper-text\">Pega URLs de tiendas online cuyo dise\u00f1o te gusta<\/p>\n      <div class=\"url-list\" id=\"tiendas-list\">\n        <div class=\"url-item\">\n          <input type=\"url\" class=\"tienda-url\" placeholder=\"https:\/\/ejemplo-tienda.com\">\n          <button type=\"button\" class=\"url-remove\" onclick=\"this.parentElement.remove()\">\u2715<\/button>\n        <\/div>\n      <\/div>\n      <button type=\"button\" class=\"btn btn-add url-add\" onclick=\"addUrlField('tiendas-list')\">+ A\u00f1adir otra tienda<\/button>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Webs con referencias visuales<\/label>\n      <p class=\"helper-text\">Otros sitios cuya est\u00e9tica te gusta (no necesariamente tiendas)<\/p>\n      <div class=\"url-list\" id=\"referencias-list\">\n        <div class=\"url-item\">\n          <input type=\"url\" class=\"referencia-url\" placeholder=\"https:\/\/ejemplo-referencia.com\">\n          <button type=\"button\" class=\"url-remove\" onclick=\"this.parentElement.remove()\">\u2715<\/button>\n        <\/div>\n      <\/div>\n      <button type=\"button\" class=\"btn btn-add url-add\" onclick=\"addUrlField('referencias-list')\">+ A\u00f1adir otra referencia<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- PRODUCTOS -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Productos<\/h2>\n\n    <div class=\"form-group\">\n      <label>\u00bfCu\u00e1ntos productos tendr\u00e1s aproximadamente? <span class=\"required\">*<\/span><\/label>\n      <input type=\"number\" name=\"num_productos\" min=\"1\" placeholder=\"15\" required>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label>Categor\u00edas de productos <span class=\"required\">*<\/span><\/label>\n      <p class=\"helper-text\">Define en cu\u00e1ntas categor\u00edas vas a organizar los productos<\/p>\n      <div class=\"category-list\" id=\"categorias-list\">\n        <div class=\"category-item\">\n          <input type=\"text\" class=\"categoria\" placeholder=\"Ej: Cartas Pok\u00e9mon\">\n          <button type=\"button\" class=\"category-remove\" onclick=\"this.parentElement.remove()\">\u2715<\/button>\n        <\/div>\n      <\/div>\n      <button type=\"button\" class=\"btn btn-add category-add\" onclick=\"addCategoryField()\">+ A\u00f1adir categor\u00eda<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- PALABRAS CLAVE -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Palabras Clave y Adjetivos<\/h2>\n\n    <div class=\"form-group\">\n      <label>Elige 3 palabras que definan tu marca <span class=\"required\">*<\/span><\/label>\n      <p class=\"helper-text\">M\u00e1ximo 3 selecciones<\/p>\n      <div class=\"checkbox-group\">\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Confiable\">\n          <label>Confiable<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Innovador\">\n          <label>Innovador<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Accesible\">\n          <label>Accesible<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Premium\">\n          <label>Premium<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"R\u00e1pido\">\n          <label>R\u00e1pido<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Artesanal\">\n          <label>Artesanal<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Sostenible\">\n          <label>Sostenible<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Exclusivo\">\n          <label>Exclusivo<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Din\u00e1mico\">\n          <label>Din\u00e1mico<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Elegante\">\n          <label>Elegante<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Disruptivo\">\n          <label>Disruptivo<\/label>\n        <\/div>\n        <div class=\"checkbox-wrapper\">\n          <input type=\"checkbox\" class=\"adjetivo\" name=\"adjetivos\" value=\"Personalizado\">\n          <label>Personalizado<\/label>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- POSICIONAMIENTO DE MARCA -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Posicionamiento de Marca<\/h2>\n\n    <div class=\"form-group\">\n      <div class=\"scale-row\">\n        <span class=\"pole left\">Funcional<\/span>\n        <div class=\"range-track\">\n          <input type=\"range\" class=\"brand-slider\" name=\"escala_funcional_estetico\" min=\"0\" max=\"5\" value=\"2\">\n          <span class=\"range-value\" id=\"val-funcional_estetico\">2<\/span>\n        <\/div>\n        <span class=\"pole right\">Est\u00e9tico<\/span>\n      <\/div>\n\n      <div class=\"scale-row\">\n        <span class=\"pole left\">Minimalista<\/span>\n        <div class=\"range-track\">\n          <input type=\"range\" class=\"brand-slider\" name=\"escala_minimalista_abundante\" min=\"0\" max=\"5\" value=\"2\">\n          <span class=\"range-value\" id=\"val-minimalista_abundante\">2<\/span>\n        <\/div>\n        <span class=\"pole right\">Abundante<\/span>\n      <\/div>\n\n      <div class=\"scale-row\">\n        <span class=\"pole left\">Serio<\/span>\n        <div class=\"range-track\">\n          <input type=\"range\" class=\"brand-slider\" name=\"escala_serio_ludico\" min=\"0\" max=\"5\" value=\"2\">\n          <span class=\"range-value\" id=\"val-serio_ludico\">2<\/span>\n        <\/div>\n        <span class=\"pole right\">L\u00fadico<\/span>\n      <\/div>\n\n      <div class=\"scale-row\">\n        <span class=\"pole left\">Tradicional<\/span>\n        <div class=\"range-track\">\n          <input type=\"range\" class=\"brand-slider\" name=\"escala_tradicional_disruptivo\" min=\"0\" max=\"5\" value=\"2\">\n          <span class=\"range-value\" id=\"val-tradicional_disruptivo\">2<\/span>\n        <\/div>\n        <span class=\"pole right\">Disruptivo<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- NOTAS -->\n  <div class=\"form-section\">\n    <h2 class=\"section-title\">Informaci\u00f3n Adicional<\/h2>\n\n    <div class=\"form-group\">\n      <label>Algo m\u00e1s que deba saber<\/label>\n      <textarea name=\"notas\" placeholder=\"Cu\u00e9ntanos cualquier detalle adicional...\"><\/textarea>\n    <\/div>\n  <\/div>\n\n  <button type=\"submit\" class=\"btn btn-primary\">Enviar Briefing<\/button>\n<\/form>\n\n<script>\n\/\/ Brand sliders\nfunction updateSlider(slider) {\n  const val = parseInt(slider.value);\n  const pct = (val \/ 5) * 100;\n  slider.style.background = `linear-gradient(to right, var(--primary) ${pct}%, var(--border) ${pct}%)`;\n  document.getElementById('val-' + slider.name.replace('escala_', '')).textContent = val;\n}\n\ndocument.querySelectorAll('.brand-slider').forEach(slider => {\n  updateSlider(slider);\n  slider.addEventListener('input', () => updateSlider(slider));\n});\n\n\/\/ File upload\ndocument.getElementById('logoFile').addEventListener('change', function() {\n  const name = document.getElementById('logoName');\n  const label = this.parentElement.querySelector('.file-label');\n  if (this.files.length > 0) {\n    name.textContent = this.files[0].name;\n    label.classList.add('has-file');\n  } else {\n    name.textContent = '';\n    label.classList.remove('has-file');\n  }\n});\n\n\/\/ Color sync\ndocument.querySelector('input[name=\"color_principal\"]').addEventListener('input', function() {\n  document.getElementById('color_principal_hex').value = this.value;\n});\ndocument.getElementById('color_principal_hex').addEventListener('change', function() {\n  document.querySelector('input[name=\"color_principal\"]').value = this.value;\n});\n\ndocument.querySelector('input[name=\"color_secundario\"]').addEventListener('input', function() {\n  document.getElementById('color_secundario_hex').value = this.value;\n});\ndocument.getElementById('color_secundario_hex').addEventListener('change', function() {\n  document.querySelector('input[name=\"color_secundario\"]').value = this.value;\n});\n\n\/\/ Add URL field\nfunction addUrlField(listId) {\n  const list = document.getElementById(listId);\n  const newItem = document.createElement('div');\n  newItem.className = 'url-item';\n  newItem.innerHTML = `\n    <input type=\"url\" class=\"${listId === 'tiendas-list' ? 'tienda-url' : 'referencia-url'}\" placeholder=\"https:\/\/ejemplo.com\">\n    <button type=\"button\" class=\"url-remove\" onclick=\"this.parentElement.remove()\">\u2715<\/button>\n  `;\n  list.appendChild(newItem);\n}\n\n\/\/ Add category field\nfunction addCategoryField() {\n  const list = document.getElementById('categorias-list');\n  const newItem = document.createElement('div');\n  newItem.className = 'category-item';\n  newItem.innerHTML = `\n    <input type=\"text\" class=\"categoria\" placeholder=\"Ej: Cartas Pok\u00e9mon\">\n    <button type=\"button\" class=\"category-remove\" onclick=\"this.parentElement.remove()\">\u2715<\/button>\n  `;\n  list.appendChild(newItem);\n}\n\n\/\/ Limit adjetivos to 3\ndocument.querySelectorAll('.adjetivo').forEach(checkbox => {\n  checkbox.addEventListener('change', function() {\n    if (document.querySelectorAll('.adjetivo:checked').length > 3) {\n      this.checked = false;\n      alert('M\u00e1ximo 3 adjetivos');\n    }\n  });\n});\n\n\/\/ Fallback para preview local fuera de WordPress\nif (typeof briefingAjax === 'undefined') {\n  window.briefingAjax = { url: '#', nonce: '' };\n}\n\n\/\/ Form submission\ndocument.getElementById('briefingForm').addEventListener('submit', async function(e) {\n  e.preventDefault();\n\n  const btn = this.querySelector('.btn-primary');\n  btn.disabled = true;\n\n  const fd = new FormData();\n  fd.append('action', 'procesar_briefing');\n  fd.append('nonce',  briefingAjax.nonce);\n\n  \/\/ Campos de texto\n  fd.append('empresa',           this.empresa.value);\n  fd.append('email',             this.email.value);\n  fd.append('telefono',          this.telefono.value);\n  fd.append('num_productos',     this.num_productos.value);\n  fd.append('notas',             this.notas.value);\n  fd.append('color_principal',   this.color_principal.value);\n  fd.append('color_secundario',  this.color_secundario.value);\n  fd.append('comentarios_color', this.comentarios_color.value);\n\n  \/\/ Escalas\n  fd.append('escala_funcional_estetico',     this.escala_funcional_estetico.value);\n  fd.append('escala_minimalista_abundante',  this.escala_minimalista_abundante.value);\n  fd.append('escala_serio_ludico',           this.escala_serio_ludico.value);\n  fd.append('escala_tradicional_disruptivo', this.escala_tradicional_disruptivo.value);\n\n  \/\/ Arrays (PHP recibe como $_POST['sensacion'], etc.)\n  document.querySelectorAll('input[name=\"sensacion\"]:checked')\n    .forEach(el => fd.append('sensacion[]', el.value));\n  document.querySelectorAll('.adjetivo:checked')\n    .forEach(el => fd.append('adjetivos[]', el.value));\n  document.querySelectorAll('.tienda-url')\n    .forEach(el => { if (el.value.trim()) fd.append('tiendas[]', el.value.trim()); });\n  document.querySelectorAll('.referencia-url')\n    .forEach(el => { if (el.value.trim()) fd.append('referencias[]', el.value.trim()); });\n  document.querySelectorAll('.categoria')\n    .forEach(el => { if (el.value.trim()) fd.append('categorias[]', el.value.trim()); });\n\n  \/\/ Logo\n  const logoFile = document.getElementById('logoFile').files[0];\n  if (logoFile) fd.append('logo', logoFile);\n\n  try {\n    const res  = await fetch(briefingAjax.url, { method: 'POST', body: fd });\n    const json = await res.json();\n\n    if (json.success) {\n      const successMsg = document.getElementById('successMessage');\n      successMsg.classList.add('show');\n      successMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      setTimeout(() => {\n        this.reset();\n        successMsg.classList.remove('show');\n        document.querySelectorAll('.brand-slider').forEach(s => updateSlider(s));\n        document.getElementById('logoName').textContent = '';\n        document.querySelector('.file-label').classList.remove('has-file');\n      }, 6000);\n    } else {\n      const msg = json.data?.mensaje || 'Error al enviar. Int\u00e9ntalo de nuevo.';\n      alert(msg);\n    }\n  } catch (err) {\n    alert('Error de conexi\u00f3n. Por favor, int\u00e9ntalo de nuevo.');\n  } finally {\n    btn.disabled = false;\n  }\n});\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Formulario Briefing \u2699 Briefing enviado correctamente Estamos comenzando a trabajar en tu proyecto. Informaci\u00f3n General Nombre de la empresa * Correo electr\u00f3nico * Tel\u00e9fono Logo e Identidad Visual Logo\/Marca * \ud83d\udcc1 Sube tu logo PNG, JPG, SVG \u2014 m\u00e1x. 5MB Paleta de Colores Color principal * El color que m\u00e1s identifica tu marca Color secundario [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-personalizada-fondo-blanco","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-2","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":"Formulario Briefing \u2699 Briefing enviado correctamente Estamos comenzando a trabajar en tu proyecto. Informaci\u00f3n General Nombre de la empresa * Correo electr\u00f3nico * Tel\u00e9fono Logo e Identidad Visual Logo\/Marca * \ud83d\udcc1 Sube tu logo PNG, JPG, SVG \u2014 m\u00e1x. 5MB Paleta de Colores Color principal * El color que m\u00e1s identifica tu marca Color secundario&hellip;","_links":{"self":[{"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages\/2","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=2"}],"version-history":[{"count":22,"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":995,"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/pages\/2\/revisions\/995"}],"wp:attachment":[{"href":"https:\/\/victorangeldesign.com\/es\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}