{"id":12260,"date":"2025-09-26T13:38:38","date_gmt":"2025-09-26T13:38:38","guid":{"rendered":"https:\/\/caixamagica.pt\/?page_id=12260"},"modified":"2026-07-14T14:19:25","modified_gmt":"2026-07-14T14:19:25","slug":"ux-ui-design-hub","status":"publish","type":"page","link":"https:\/\/caixamagica.pt\/pt\/ux-ui-design-hub\/","title":{"rendered":"UX\/UI Design Hub"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"12260\" class=\"elementor elementor-12260\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-42458fa0 elementor-section-full_width py-5 elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"42458fa0\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default container my-2 py-md-2 py-lg-5\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5391b61f\" data-id=\"5391b61f\" data-element_type=\"column\">\n\t\t\t<div class=\"p-0 elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d4b6352 code-block elementor-widget elementor-widget-html\" data-id=\"d4b6352\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =======================================================\n     SHARED STYLES\n     Adiciona isto UMA VEZ em:\n     Elementor \u2192 Settings \u2192 Custom CSS\n     (ou num widget HTML no topo da primeira p\u00e1gina)\n     ======================================================= -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');\n\n:root {\n  --cms-font:    \"Red Hat Display\", sans-serif;\n  --cms-blue:    #2170F2;\n  --cms-dark:    #131022;\n  --cms-body:    #585c7b;\n  --cms-gray-1:  #f3f6ff;\n  --cms-gray-3:  #e2e5f1;\n  --cms-gray-5:  #b4b7c9;\n  --cms-gray-8:  #3e4265;\n  --cms-white:   #ffffff;\n  --cms-radius:  8px;\n  --cms-max:     1160px;\n}\n\n\/* Reset scoped ao prefixo cms- *\/\n.cms * { box-sizing: border-box; }\n.cms {\n  font-family: var(--cms-font);\n  font-size: 1rem;\n  line-height: 1.6;\n  color: var(--cms-body);\n}\n.cms h1, .cms h2, .cms h3, .cms h4 {\n  font-family: var(--cms-font);\n  font-weight: 800;\n  color: var(--cms-dark);\n  line-height: 1.2;\n  margin: 0;\n}\n.cms p { margin: 0 0 1rem; }\n.cms p:last-child { margin-bottom: 0; }\n.cms a { color: var(--cms-blue); text-decoration: none; }\n.cms a:hover { text-decoration: underline; }\n.cms ul { list-style: none; padding: 0; margin: 0; }\n\n\/* \u2500\u2500 BLEED WRAPPER\n   Escapa do padding da coluna Elementor e cobre o fundo completo \u2500\u2500 *\/\n.cms-bleed {\n  margin-left:  calc(-50vw + 50%);\n  margin-right: calc(-50vw + 50%);\n  padding-left:  calc(50vw - 50%);\n  padding-right: calc(50vw - 50%);\n}\n\n\/* \u2500\u2500 INNER \u2014 limita a largura do conte\u00fado \u2500\u2500 *\/\n.cms-inner {\n  max-width: var(--cms-max);\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n\n\/* \u2500\u2500 SECTION PADDING \u2500\u2500 *\/\n.cms-section        { padding: 5rem 0; }\n.cms-section-sm     { padding: 3rem 0; }\n.cms-section-xs     { padding: 2rem 0; }\n\n\/* \u2500\u2500 BACKGROUNDS \u2500\u2500 *\/\n.cms-bg-white  { background: var(--cms-white); }\n.cms-bg-light  { background: var(--cms-gray-1); }\n.cms-bg-dark   { background: var(--cms-dark); }\n.cms-bg-blue   { background: var(--cms-blue); }\n\n\/* \u2500\u2500 EYEBROW \u2500\u2500 *\/\n.cms-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--cms-blue);\n  margin-bottom: 1rem;\n  font-family: var(--cms-font);\n}\n.cms-eyebrow::before {\n  content: \"\";\n  display: block;\n  width: 20px;\n  height: 2px;\n  background: var(--cms-blue);\n  flex-shrink: 0;\n}\n.cms-eyebrow-white { color: rgba(255,255,255,0.7); }\n.cms-eyebrow-white::before { background: rgba(255,255,255,0.7); }\n\n\/* \u2500\u2500 HEADINGS \u2500\u2500 *\/\n.cms-h1 {\n  font-size: clamp(2rem, 5vw, 3.25rem);\n  letter-spacing: -0.03em;\n  margin-bottom: 1.5rem;\n}\n.cms-h1 span { color: var(--cms-blue); }\n\n.cms-h2 {\n  font-size: clamp(1.6rem, 3.5vw, 2.5rem);\n  letter-spacing: -0.02em;\n  margin-bottom: 1rem;\n}\n.cms-h2-white { color: #fff; }\n\n\/* \u2500\u2500 LEAD \u2500\u2500 *\/\n.cms-lead {\n  font-size: clamp(0.95rem, 2vw, 1.05rem);\n  color: var(--cms-body);\n  max-width: 660px;\n  line-height: 1.75;\n  margin-bottom: 3rem;\n}\n.cms-lead-white { color: rgba(255,255,255,0.7); }\n\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\n.cms-btn {\n  display: inline-block;\n  background: var(--cms-blue) !important;\n  background-color: var(--cms-blue) !important;\n  color: #fff !important;\n  font-family: var(--cms-font);\n  font-size: 0.95rem;\n  font-weight: 700;\n  padding: 0.8rem 1.75rem;\n  border-radius: var(--cms-radius);\n  text-decoration: none !important;\n  transition: opacity .2s;\n  white-space: nowrap;\n  border: none;\n}\n.cms-btn:hover,\n.cms-btn:visited,\n.cms-btn:focus,\n.cms-btn:active {\n  opacity: 0.88;\n  color: #fff !important;\n  background: var(--cms-blue) !important;\n  background-color: var(--cms-blue) !important;\n  text-decoration: none !important;\n}\n\n.cms-btn-outline {\n  display: inline-block;\n  border: 2px solid var(--cms-gray-3) !important;\n  color: var(--cms-dark) !important;\n  font-family: var(--cms-font);\n  font-size: 0.95rem;\n  font-weight: 700;\n  padding: 0.75rem 1.75rem;\n  border-radius: var(--cms-radius);\n  text-decoration: none !important;\n  transition: border-color .2s, color .2s;\n  white-space: nowrap;\n  background: transparent !important;\n}\n.cms-btn-outline:hover,\n.cms-btn-outline:focus {\n  border-color: var(--cms-blue) !important;\n  color: var(--cms-blue) !important;\n  text-decoration: none !important;\n  background: transparent !important;\n}\n\n.cms-btn-white {\n  display: inline-block;\n  background: #fff !important;\n  background-color: #fff !important;\n  color: var(--cms-blue) !important;\n  font-family: var(--cms-font);\n  font-size: 1rem;\n  font-weight: 700;\n  padding: 0.9rem 2rem;\n  border-radius: var(--cms-radius);\n  text-decoration: none !important;\n  transition: opacity .2s;\n  border: none;\n}\n.cms-btn-white:hover,\n.cms-btn-white:visited,\n.cms-btn-white:focus,\n.cms-btn-white:active {\n  opacity: 0.9;\n  color: var(--cms-blue) !important;\n  background: #fff !important;\n  text-decoration: none !important;\n}\n\n\/* \u2500\u2500 HERO LAYOUT \u2500\u2500 *\/\n.cms-hero-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 4rem;\n  align-items: center;\n}\n.cms-hero-img {\n  border-radius: 16px;\n  overflow: hidden;\n  background: transparent;\n  aspect-ratio: 1 \/ 1;\n}\n.cms-hero-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.cms-hero-actions {\n  display: flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-top: 2rem;\n}\n\n\/* \u2500\u2500 CARDS \u2500\u2500 *\/\n.cms-card-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.25rem;\n}\n.cms-card-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 1.25rem;\n}\n.cms-card {\n  border: 1px solid var(--cms-gray-3);\n  border-radius: 12px;\n  padding: 1.75rem;\n  background: var(--cms-white);\n  transition: box-shadow .2s, border-color .2s;\n}\n.cms-card:hover {\n  box-shadow: 0 8px 32px rgba(33,112,242,0.08);\n  border-color: var(--cms-blue);\n}\n.cms-card-num {\n  font-size: 0.7rem;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--cms-blue);\n  margin-bottom: 1rem;\n  display: block;\n  font-family: var(--cms-font);\n}\n.cms-card h3 { font-size: 1rem; margin-bottom: 0.6rem; }\n.cms-card p { font-size: 0.875rem; color: var(--cms-body); line-height: 1.65; }\n\n\/* Dark card *\/\n.cms-card-dark {\n  background: rgba(255,255,255,0.06);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 10px;\n  padding: 1.5rem;\n}\n.cms-card-dark h4 {\n  font-size: 0.9rem;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 0.4rem;\n  font-family: var(--cms-font);\n}\n.cms-card-dark p {\n  font-size: 0.85rem;\n  color: rgba(255,255,255,0.5);\n  line-height: 1.6;\n  margin: 0;\n}\n\n\/* \u2500\u2500 NUMBERED PROCESS LIST \u2500\u2500 *\/\n.cms-process-list {\n  border: 1px solid var(--cms-gray-3);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.cms-process-item {\n  display: grid;\n  grid-template-columns: 64px 1fr;\n  border-bottom: 1px solid var(--cms-gray-3);\n  background: var(--cms-white);\n}\n.cms-process-item:last-child { border-bottom: none; }\n.cms-process-num {\n  background: var(--cms-gray-1);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 1.5rem 0;\n  border-right: 1px solid var(--cms-gray-3);\n  font-size: 1.25rem;\n  font-weight: 800;\n  color: var(--cms-blue);\n  font-family: var(--cms-font);\n}\n.cms-process-content { padding: 1.5rem 1.75rem; }\n.cms-process-content h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }\n.cms-process-content p { font-size: 0.875rem; color: var(--cms-body); line-height: 1.65; }\n\n\/* \u2500\u2500 CAPABILITY ROWS \u2500\u2500 *\/\n.cms-capability-row {\n  display: grid;\n  grid-template-columns: 200px 1fr;\n  gap: 2.5rem;\n  padding: 2rem 0;\n  border-bottom: 1px solid var(--cms-gray-3);\n  align-items: start;\n}\n.cms-capability-row:last-child { border-bottom: none; }\n.cms-cap-label {\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--cms-dark);\n  font-family: var(--cms-font);\n  padding-top: 2px;\n}\n.cms-cap-body p { font-size: 0.9rem; color: var(--cms-body); line-height: 1.75; }\n.cms-cap-body p + p { margin-top: 0.75rem; }\n\n\/* \u2500\u2500 TWO COL LAYOUT \u2500\u2500 *\/\n.cms-two-col {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 5rem;\n  align-items: start;\n}\n\n\/* \u2500\u2500 STACK TAGS \u2500\u2500 *\/\n.cms-stack-group { margin-bottom: 2rem; }\n.cms-stack-label {\n  font-size: 0.68rem;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--cms-gray-5);\n  display: block;\n  margin-bottom: 0.75rem;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid var(--cms-gray-3);\n  font-family: var(--cms-font);\n}\n.cms-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n.cms-tag {\n  font-size: 0.8rem;\n  font-weight: 600;\n  background: var(--cms-white);\n  color: var(--cms-gray-8);\n  border: 1px solid var(--cms-gray-3);\n  padding: 0.35rem 0.85rem;\n  border-radius: 20px;\n  font-family: var(--cms-font);\n}\n\n\/* \u2500\u2500 AEO DEFINITION BLOCK \u2500\u2500 *\/\n.cms-aeo {\n  font-size: 0.9rem;\n  line-height: 1.8;\n  max-width: 800px;\n  padding: 1.5rem 1.75rem;\n  background: var(--cms-white);\n  border-left: 3px solid var(--cms-blue);\n  border-radius: var(--cms-radius);\n  color: var(--cms-body);\n}\n.cms-aeo strong {\n  color: var(--cms-dark);\n  display: block;\n  margin-bottom: 0.4rem;\n  font-size: 0.95rem;\n}\n\n\/* \u2500\u2500 CLIENTS \u2500\u2500 *\/\n.cms-clients { display: flex; flex-wrap: wrap; gap: 0.6rem; }\n.cms-client {\n  font-size: 0.85rem;\n  font-weight: 700;\n  color: var(--cms-gray-8);\n  background: var(--cms-white);\n  border: 1px solid var(--cms-gray-3);\n  padding: 0.45rem 1rem;\n  border-radius: 20px;\n  font-family: var(--cms-font);\n}\n\n\/* \u2500\u2500 FAQ \u2500\u2500 *\/\n.cms-faq-list { max-width: 760px; }\ndetails.cms-faq { border-bottom: 1px solid var(--cms-gray-3); }\ndetails.cms-faq summary {\n  list-style: none;\n  cursor: pointer;\n  font-family: var(--cms-font);\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--cms-dark);\n  padding: 1.25rem 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  user-select: none;\n}\ndetails.cms-faq summary::-webkit-details-marker { display: none; }\ndetails.cms-faq summary::after {\n  content: \"+\";\n  font-size: 1.3rem;\n  font-weight: 300;\n  color: var(--cms-gray-5);\n  flex-shrink: 0;\n  line-height: 1;\n}\ndetails.cms-faq[open] summary::after { content: \"\u2212\"; }\n.cms-faq-body { padding-bottom: 1.25rem; max-width: 700px; }\n.cms-faq-body p { font-size: 0.9rem; color: var(--cms-body); line-height: 1.75; }\n\n\/* \u2500\u2500 CTA BAND \u2500\u2500 *\/\n.cms-cta-inner {\n  text-align: center;\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n.cms-cta-inner h2 { color: #fff; margin-bottom: 1rem; }\n.cms-cta-inner p { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 2.5rem; }\n\n\/* \u2500\u2500 DARK SECTION HELPERS \u2500\u2500 *\/\n.cms-dark-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--cms-blue);\n  margin-bottom: 1rem;\n  font-family: var(--cms-font);\n}\n.cms-dark-eyebrow::before {\n  content: \"\";\n  display: block;\n  width: 20px;\n  height: 2px;\n  background: var(--cms-blue);\n}\n.cms-diff-point {\n  border-left: 2px solid var(--cms-blue);\n  padding-left: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n.cms-diff-point:last-child { margin-bottom: 0; }\n.cms-diff-point h4 {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 0.3rem;\n  font-family: var(--cms-font);\n}\n.cms-diff-point p {\n  font-size: 0.82rem;\n  color: rgba(255,255,255,0.5);\n  line-height: 1.6;\n  margin: 0;\n}\n\n\/* \u2500\u2500 ENGAGEMENT CARDS \u2500\u2500 *\/\n.cms-engage-list {\n  list-style: none;\n  border-top: 1px solid var(--cms-gray-3);\n  padding-top: 1.25rem;\n  margin-top: 1.25rem;\n}\n.cms-engage-list li {\n  font-size: 0.875rem;\n  color: var(--cms-body);\n  padding: 0.3rem 0;\n  display: flex;\n  gap: 0.5rem;\n  align-items: flex-start;\n}\n.cms-engage-list li::before {\n  content: \"\u2192\";\n  color: var(--cms-blue);\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   RESPONSIVE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* Tablet \u2014 768px *\/\n@media (max-width: 768px) {\n\n  .cms-section     { padding: 4rem 0; }\n  .cms-section-sm  { padding: 2.5rem 0; }\n\n  .cms-hero-grid {\n    grid-template-columns: 1fr;\n    gap: 2.5rem;\n  }\n  .cms-hero-img { display: none; }\n\n  .cms-h1 { margin-bottom: 1rem; }\n\n  .cms-card-grid-3,\n  .cms-card-grid-2 { grid-template-columns: 1fr 1fr; gap: 1rem; }\n\n  .cms-two-col { grid-template-columns: 1fr; gap: 3rem; }\n\n  .cms-capability-row {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n    padding: 1.5rem 0;\n  }\n\n  .cms-process-item { grid-template-columns: 52px 1fr; }\n  .cms-process-num { font-size: 1rem; padding: 1.25rem 0; }\n  .cms-process-content { padding: 1.25rem 1.25rem; }\n}\n\n\/* Mobile \u2014 480px *\/\n@media (max-width: 480px) {\n\n  .cms-section     { padding: 3rem 0; }\n  .cms-section-sm  { padding: 2rem 0; }\n  .cms-section-xs  { padding: 1.5rem 0; }\n\n  .cms-inner { padding: 0 1rem; }\n\n  .cms-card-grid-3,\n  .cms-card-grid-2 { grid-template-columns: 1fr; gap: 0; }\n\n  .cms-hero-actions { flex-direction: column; align-items: flex-start; }\n  .cms-btn, .cms-btn-outline { width: 100%; text-align: center; }\n\n  .cms-h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }\n  .cms-h2 { font-size: clamp(1.4rem, 6vw, 2rem); }\n\n  .cms-lead { margin-bottom: 2rem; font-size: 0.95rem; }\n\n  details.cms-faq summary { font-size: 0.875rem; padding: 1rem 0; }\n\n  .cms-tag { font-size: 0.75rem; padding: 0.3rem 0.7rem; }\n\n  .cms-cta-inner p { font-size: 0.95rem; }\n  .cms-btn-white { width: auto; padding: 0.85rem 1.75rem; }\n\n  \/* \u2500\u2500 MOBILE ACCORDION \u2014 cards, process, capabilities, stack, dark cards \u2500\u2500 *\/\n\n  \/* Esconde conte\u00fado dos cards em mobile \u2014 o JS transforma em <details> *\/\n  .cms-mob-accordion .cms-card-body,\n  .cms-mob-accordion .cms-process-content > p,\n  .cms-mob-accordion .cms-cap-body,\n  .cms-mob-accordion .cms-stack-tags,\n  .cms-mob-accordion .cms-card-dark > p { display: none; }\n\n  \/* Estilo do summary gerado pelo JS *\/\n  .cms-mob-summary {\n    list-style: none;\n    cursor: pointer;\n    font-family: var(--cms-font);\n    font-size: 0.9rem;\n    font-weight: 700;\n    color: var(--cms-dark);\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 0.75rem;\n    user-select: none;\n    border-bottom: 1px solid var(--cms-gray-3);\n  }\n  .cms-mob-summary::-webkit-details-marker { display: none; }\n  .cms-mob-summary::after {\n    content: \"+\";\n    font-size: 1.2rem;\n    font-weight: 300;\n    color: var(--cms-gray-5);\n    flex-shrink: 0;\n    line-height: 1;\n  }\n  details[open] > .cms-mob-summary::after { content: \"\u2212\"; }\n\n  \/* Conte\u00fado aberto \u2014 preserva os estilos visuais originais *\/\n  .cms-mob-body {\n    padding: 1rem 1.25rem 1.25rem;\n    border-bottom: 1px solid var(--cms-gray-3);\n    background: var(--cms-white);\n    border-left: 3px solid var(--cms-blue);\n    border-radius: 0 0 var(--cms-radius) var(--cms-radius);\n  }\n  .cms-mob-body p {\n    font-size: 0.875rem;\n    color: var(--cms-body);\n    line-height: 1.7;\n    margin-bottom: 0.5rem;\n  }\n  .cms-mob-body p:last-child { margin-bottom: 0; }\n\n  \/* Tags dentro do acorde\u00e3o aberto *\/\n  .cms-mob-body .cms-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    padding-top: 0.25rem;\n  }\n\n  \/* Dark section \u2014 corpo do acorde\u00e3o diferente *\/\n  .cms-bg-dark .cms-mob-body {\n    background: rgba(255,255,255,0.06);\n    border-color: var(--cms-blue);\n    border-left-width: 3px;\n  }\n  .cms-bg-dark .cms-mob-body p { color: rgba(255,255,255,0.65); }\n  .cms-bg-dark .cms-mob-summary { color: #fff; border-color: rgba(255,255,255,0.15); }\n  .cms-bg-dark .cms-mob-summary::after { color: rgba(255,255,255,0.4); }\n\n  \/* Cards em mobile: flat, sem border pr\u00f3pria (o acorde\u00e3o assume) *\/\n  .cms-mob-accordion .cms-card {\n    border-radius: 0;\n    border: none;\n    padding: 0;\n    box-shadow: none;\n    background: transparent;\n  }\n  .cms-mob-accordion .cms-card:hover { box-shadow: none; border-color: transparent; }\n  .cms-mob-accordion .cms-card-num { display: none; }\n\n  \/* Process list flat em mobile *\/\n  .cms-mob-accordion .cms-process-list {\n    border: none;\n    border-radius: 0;\n    border-top: 1px solid var(--cms-gray-3);\n  }\n  .cms-mob-accordion .cms-process-item { display: block; border: none; }\n  .cms-mob-accordion .cms-process-num { display: none; }\n  .cms-mob-accordion .cms-process-content { padding: 0; }\n\n  \/* Capability rows flat *\/\n  .cms-mob-accordion .cms-capability-row { display: block; padding: 0; border: none; }\n  .cms-mob-accordion .cms-cap-label { display: none; }\n\n  \/* Stack groups \u2014 elimina margem e espa\u00e7os fantasma *\/\n  .cms-mob-accordion .cms-stack-group { margin-bottom: 0; }\n  .cms-mob-accordion .cms-stack-label { display: none; }\n  .cms-mob-accordion .cms-two-col { gap: 0; }\n\n  \/* Dark cards flat *\/\n  .cms-mob-accordion .cms-card-dark {\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    padding: 0;\n  }\n  .cms-mob-accordion .cms-card-dark h4 { display: none; }\n}\n.elementor-section.py-5 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n.elementor-container.py-lg-5,\n.elementor-container.py-md-2 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.elementor-container.my-2 {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n.elementor-widget-wrap.elementor-element-populated {\n  padding: 0 !important;\n}\n.cms-faq-list details.cms-faq:last-child {\n  border-bottom: none;\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MOBILE ACCORDION SCRIPT\n     Converte cards, process steps, capabilities, stack e dark\n     cards em <details> em ecr\u00e3s \u2264 480px.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function () {\n  var BREAKPOINT = 480;\n\n  function getTitle(el) {\n    \/* Tenta extrair o t\u00edtulo do elemento de v\u00e1rias formas *\/\n    var h3 = el.querySelector('h3');\n    if (h3) return h3.textContent.trim();\n    var h4 = el.querySelector('h4');\n    if (h4) return h4.textContent.trim();\n    var num = el.querySelector('.cms-card-num');\n    if (num) return num.textContent.trim();\n    var lbl = el.querySelector('.cms-cap-label');\n    if (lbl) return lbl.textContent.trim();\n    var slbl = el.querySelector('.cms-stack-label');\n    if (slbl) return slbl.textContent.trim();\n    var pnum = el.querySelector('.cms-process-num');\n    if (pnum) {\n      var pcontent = el.querySelector('.cms-process-content h3');\n      return pcontent ? pnum.textContent.trim() + ' \u2014 ' + pcontent.textContent.trim() : pnum.textContent.trim();\n    }\n    return '\u2014';\n  }\n\n  function getBody(el) {\n    \/* Extrai o conte\u00fado em texto\/HTML *\/\n    var body = el.querySelector('.cms-card-body');\n    if (body) return body.innerHTML;\n\n    \/* Process item: pega no <p> dentro de .cms-process-content *\/\n    var pc = el.querySelector('.cms-process-content');\n    if (pc) {\n      var ps = pc.querySelectorAll('p');\n      if (ps.length) return Array.from(ps).map(function(p){ return p.outerHTML; }).join('');\n    }\n\n    \/* Capability row: pega no .cms-cap-body *\/\n    var cb = el.querySelector('.cms-cap-body');\n    if (cb) return cb.innerHTML;\n\n    \/* Stack group: pega nas tags *\/\n    var st = el.querySelector('.cms-stack-tags');\n    if (st) return st.outerHTML;\n\n    \/* Dark card: pega no <p> *\/\n    var dp = el.querySelector('p');\n    if (dp) return dp.outerHTML;\n\n    \/* Fallback: todo o innerHTML menos o h3\/h4\/num *\/\n    return el.innerHTML;\n  }\n\n  function buildAccordion(container) {\n    \/* Selecciona todos os elementos convert\u00edveis dentro do container *\/\n    var selectors = [\n      '.cms-card-grid-3 > .cms-card',\n      '.cms-card-grid-2 > .cms-card',\n      '.cms-process-item',\n      '.cms-capability-row',\n      '.cms-stack-group',\n      '.cms-card-dark'\n    ];\n\n    selectors.forEach(function(sel) {\n      container.querySelectorAll(sel).forEach(function(el) {\n        \/* J\u00e1 foi convertido *\/\n        if (el.dataset.mobileAccordion) return;\n        el.dataset.mobileAccordion = '1';\n\n        var title = getTitle(el);\n        var bodyHtml = getBody(el);\n\n        \/* Cria o <details> *\/\n        var details = document.createElement('details');\n        var summary = document.createElement('summary');\n        summary.className = 'cms-mob-summary';\n        summary.textContent = title;\n\n        var bodyDiv = document.createElement('div');\n        bodyDiv.className = 'cms-mob-body';\n        bodyDiv.innerHTML = bodyHtml;\n\n        details.appendChild(summary);\n        details.appendChild(bodyDiv);\n\n        \/* Substitui o elemento original *\/\n        el.parentNode.insertBefore(details, el);\n        el.style.display = 'none';\n        el.dataset.mobileHidden = '1';\n      });\n    });\n\n    container.classList.add('cms-mob-accordion');\n  }\n\n  function destroyAccordion(container) {\n    \/* Restaura os elementos originais *\/\n    container.querySelectorAll('[data-mobile-hidden=\"1\"]').forEach(function(el) {\n      el.style.display = '';\n      delete el.dataset.mobileHidden;\n      delete el.dataset.mobileAccordion;\n    });\n    container.querySelectorAll('details').forEach(function(d) {\n      if (d.querySelector('.cms-mob-summary')) d.remove();\n    });\n    container.classList.remove('cms-mob-accordion');\n  }\n\n  var activeBreakpoint = null;\n\n  function applyBreakpoint() {\n    var isMobile = window.innerWidth <= BREAKPOINT;\n\n    if (isMobile && activeBreakpoint !== 'mobile') {\n      activeBreakpoint = 'mobile';\n      document.querySelectorAll('.cms').forEach(buildAccordion);\n    } else if (!isMobile && activeBreakpoint === 'mobile') {\n      activeBreakpoint = 'desktop';\n      document.querySelectorAll('.cms').forEach(destroyAccordion);\n    }\n  }\n\n  \/* Corre no load e no resize *\/\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', applyBreakpoint);\n  } else {\n    applyBreakpoint();\n  }\n\n  var resizeTimer;\n  window.addEventListener('resize', function () {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(applyBreakpoint, 150);\n  });\n})();\n<\/script>\n\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc7b6ed code-block elementor-widget elementor-widget-html\" data-id=\"cc7b6ed\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 01 HERO\n     Fundo: branco\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-section\">\n  <div class=\"cms-inner\">\n    <div class=\"cms-hero-grid\">\n      <div>\n        <span class=\"cms-eyebrow\">UX\/UI Design Hub<\/span>\n        <h2 class=\"cms-h1\" style=\"font-size:clamp(2rem,5vw,3.25rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:1.5rem;color:var(--cms-dark);\">\n          Design aquilo<br><span style=\"color:var(--cms-blue);\">navios como projetados<\/span>\n        <\/h2>\n        <p style=\"font-size:1.05rem;line-height:1.75;color:var(--cms-body);max-width:520px;\">\n          Projetamos interfaces para plataformas web, m\u00f3veis e autom\u00f3veis. O trabalho baseia-se em pesquisa de utilizador, \u00e9 constru\u00eddo segundo normas de acessibilidade e especificado com detalhe suficiente para que a equipa de engenharia o possa construir sem necessidade de interpreta\u00e7\u00e3o.\n        <\/p>\n        <div class=\"cms-hero-actions\">\n          <a href=\"https:\/\/caixamagica.pt\/pt\/vamos-conversar\/\" class=\"cms-btn\">Iniciar um projeto<\/a>\n          <a href=\"https:\/\/caixamagica.pt\/pt\/casos-sucesso\/\" class=\"cms-btn-outline\">Veja o nosso trabalho<\/a>\n        <\/div>\n      <\/div>\n      <div class=\"cms-hero-img\">\n        <img decoding=\"async\" src=\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/Img_UX_UI.png\" alt=\"Caixa M\u00e1gica Hub de Design UX\/UI\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96da6df code-block elementor-widget elementor-widget-html\" data-id=\"96da6df\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 03 PLATFORMS\n     Fundo: branco\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-white cms-section\">\n  <div class=\"cms-inner\">\n    <span class=\"cms-eyebrow\">Plataformas<\/span>\n    <h2 class=\"cms-h2\">O que projetamos<\/h2>\n   <h3 style=\"font-size:1.05rem;font-weight:700;color:var(--cms-dark);margin-bottom:0.75rem;font-family:var(--cms-font);\">De portais \u00e0 escala do cidad\u00e3o a interfaces homem-m\u00e1quina (HMI) autom\u00f3veis<\/h3>\n<p style=\"font-size:0.95rem;line-height:1.75;color:var(--cms-body);margin-bottom:2rem;\">O nosso trabalho de UX\/UI abrange plataformas do setor p\u00fablico utilizadas por milh\u00f5es de cidad\u00e3os, aplica\u00e7\u00f5es m\u00f3veis para trabalhadores de campo, ferramentas empresariais de back-office e interfaces humano-m\u00e1quina em ve\u00edculos. Em cada caso, as restri\u00e7\u00f5es de design s\u00e3o espec\u00edficas do contexto. Como resultado, projetamos para a plataforma desde o in\u00edcio, em vez de adaptar uma abordagem gen\u00e9rica.<\/p>\n    <div class=\"cms-card-grid-2\">\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">01<\/span>\n        <h3>Plataformas Web<\/h3>\n        <p>De sites de marketing a portais empresariais complexos com acesso baseado em fun\u00e7\u00f5es, suporte multil\u00edngue e fluxos trans.<\/p>\n      <\/div>\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">02<\/span>\n        <h3>Aplica\u00e7\u00f5es M\u00f3veis<\/h3>\n        <p>Interfaces nativas e cross-platform para Android e iOS. Projetamos tendo em conta as limita\u00e7\u00f5es do telem\u00f3vel: espa\u00e7o de ecr\u00e3 limitado, intera\u00e7\u00f5es por toque, conectividade vari\u00e1vel. Um bom design m\u00f3vel n\u00e3o \u00e9 um design de desktop comprimido. \u00c9 uma experi\u00eancia criada para a forma como as pessoas utilizam um dispositivo, muitas vezes distra\u00eddas, muitas vezes em movimento.<\/p>\n      <\/div>\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">03<\/span>\n        <h3>Software Empresarial<\/h3>\n        <p>Ferramentas de back-office, pain\u00e9is operacionais, sistemas de gest\u00e3o de dados e interfaces de fluxo de trabalho. Estes s\u00e3o ambientes onde os utilizadores passam oito horas por dia. A prioridade \u00e9 a efici\u00eancia e a clareza: reduzir a carga cognitiva, minimizar as taxas de erro e tornar os dados complexos leg\u00edveis sem necessidade de forma\u00e7\u00e3o.<\/p>\n      <\/div>\n      <div class=\"cms-card\">\n        <span class=\"cms-card-num\">04<\/span>\n        <h3>Interface Homem-M\u00e1quina Autom\u00f3vel<\/h3>\n        <p>Projeto de interfaces humano-m\u00e1quina para sistemas autom\u00f3veis, uma disciplina especializada com as suas pr\u00f3prias restri\u00e7\u00f5es de seguran\u00e7a e padr\u00f5es de intera\u00e7\u00e3o. Trabalh\u00e1mos com normas de tempo de consulta, redu\u00e7\u00e3o de distra\u00e7\u00e3o, a integra\u00e7\u00e3o de controlos t\u00e1teis e f\u00edsicos, e o desafio de projetar para utilizadores que n\u00e3o conseguem olhar para o ecr\u00e3 por mais do que um momento.<\/p>\n      <\/div>\n    <\/div>\n\n    <div style=\"margin-top:1.25rem;padding:1.75rem;background:var(--cms-gray-1);border-radius:12px;\">\n      <h3 style=\"font-size:1rem;margin-bottom:0.6rem;\">Sistemas de Design<\/h3>\n      <p style=\"font-size:0.875rem;color:var(--cms-body);line-height:1.75;\">Para clientes que constroem em escala, criamos bibliotecas de componentes e sistemas de design que fornecem \u00e0s equipas de desenvolvimento um conjunto consistente e reutiliz\u00e1vel de blocos de constru\u00e7\u00e3o. Um sistema de design bem constru\u00eddo reduz a lacuna entre design e desenvolvimento, mant\u00e9m o produto visualmente consistente \u00e0 medida que cresce e significa que novos ecr\u00e3s podem ser constru\u00eddos sem a necessidade de um designer rever todas as decis\u00f5es. Constru\u00edmos estes em Figma com documenta\u00e7\u00e3o completa dos componentes e trabalhamos com engenharia para garantir que o sistema mapeia claramente para o seu framework escolhido.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fb7ca4 code-block elementor-widget elementor-widget-html\" data-id=\"9fb7ca4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 04 PROCESS\n     Fundo: #f3f6ff\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-light cms-section\">\n  <div class=\"cms-inner\">\n    <span class=\"cms-eyebrow\">Processo<\/span>\n    <h2 class=\"cms-h2\">Como projetamos<\/h2>\n   <h3 style=\"font-size:1.05rem;font-weight:700;color:var(--cms-dark);margin-bottom:0.75rem;font-family:var(--cms-font);\">Porque testar cedo \u00e9 importante<\/h3>\n<p style=\"font-size:0.95rem;line-height:1.75;color:var(--cms-body);margin-bottom:2rem;\">Um problema de usabilidade detetado na fase de wireframe demora uma hora a ser corrigido por um designer. O mesmo problema detetado ap\u00f3s o desenvolvimento leva semanas a ser resolvido e arrisca desestabilizar componentes que j\u00e1 estavam a funcionar. Na pr\u00e1tica, isto significa que realizamos sess\u00f5es de usabilidade em todas as fases \u2014 n\u00e3o apenas no final, quando a corre\u00e7\u00e3o de problemas \u00e9 dispendiosa.<\/p>\n\n    <div class=\"cms-process-list\">\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">01<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Pesquisa de Utilizador<\/h3>\n          <p>Falamos com as pessoas que v\u00e3o usar o produto. Para software empresarial, isso significa sess\u00f5es com equipas de opera\u00e7\u00f5es, agentes de apoio ao cliente ou trabalhadores de campo que viver\u00e3o na.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">02<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Arquitetura da Informa\u00e7\u00e3o<\/h3>\n          <p>Antes de nos preocuparmos com a apar\u00eancia, mapeamos como o conte\u00fado e a funcionalidade devem ser organizados. Acertar na estrutura \u00e9 o que separa um produto que as pessoas conseguem navegar de um que requer forma\u00e7\u00e3o. Testes de \u00e1rvore e \"card sorting\" com utilizadores reais validam a IA antes de nos comprometermos com ela.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">03<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Wireframes e Prototipagem<\/h3>\n          <p>Prot\u00f3tipos interativos que podem ser testados antes do in\u00edcio do desenvolvimento. Sess\u00f5es de usabilidade na fase de wireframe detetam problemas estruturais e de fluxo enquanto ainda s\u00e3o baratos de corrigir. O prot\u00f3tipo \u00e9 suficientemente pr\u00f3ximo do produto real, de modo que os utilizadores se confundem de formas \u00fateis e reveladoras.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">04<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Design e Especifica\u00e7\u00e3o de Alta Fidelidade<\/h3>\n          <p>Design visual, especifica\u00e7\u00f5es de componentes, notas de intera\u00e7\u00e3o para comportamentos n\u00e3o standard e um guia de estilo. A acessibilidade \u00e9 concebida nesta fase: contraste de cores WCAG 2.1 AA, navega\u00e7\u00e3o por teclado, compatibilidade com leitores de ecr\u00e3, tamanhos de alvo de toque. N\u00e3o \u00e9 uma lista de verifica\u00e7\u00e3o que executamos no final.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"cms-process-item\">\n        <div class=\"cms-process-num\">05<\/div>\n        <div class=\"cms-process-content\">\n          <h3>Implementa\u00e7\u00e3o QA<\/h3>\n          <p>Revisamos a interface desenvolvida antes do lan\u00e7amento para verificar se a implementa\u00e7\u00e3o corresponde \u00e0 inten\u00e7\u00e3o do design. Isto \u00e9 padr\u00e3o em todos os projetos. Os designs n\u00e3o s\u00e3o lan\u00e7ados como foram concebidos sem este passo, pois a lacuna entre um ficheiro Figma e uma interface renderizada \u00e9 onde residem a maioria das inconsist\u00eancias visuais.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2578bb code-block elementor-widget elementor-widget-html\" data-id=\"e2578bb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"cms cms-bleed cms-bg-dark cms-section\">\r\n  <div class=\"cms-inner\">\r\n    <span class=\"cms-dark-eyebrow\">Porque \u00e9 que importa<\/span>\r\n    <h2 class=\"cms-h2 cms-h2-white\">Designers que trabalham com os engenheiros que constroem<\/h2>\r\n    <div class=\"cms-two-col\" style=\"margin-top:2.5rem;\">\r\n      <div>\r\n        <p style=\"font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.75;\">Designers que apenas desenham, sem trabalhar em conjunto com engenheiros na produ\u00e7\u00e3o, desenvolvem h\u00e1bitos que tornam a implementa\u00e7\u00e3o mais dif\u00edcil. Os estados de intera\u00e7\u00e3o ficam por contabilizar. As anima\u00e7\u00f5es especificadas s\u00e3o caras de construir. Os componentes s\u00e3o criados sem pensar em como escalam com diferentes comprimentos de dados e tamanhos de ecr\u00e3.<\/p>\r\n        <p style=\"font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.75;margin-top:0.75rem;\">Os nossos designers sabem o que est\u00e1 a ser constru\u00eddo, por quem e em que estrutura. O resultado \u00e9 uma entrega sem atritos e interfaces que s\u00e3o realmente lan\u00e7adas da forma como foram concebidas.<\/p>\r\n        <p style=\"font-size:0.9rem;color:rgba(255,255,255,0.65);line-height:1.75;margin-top:0.75rem;\">Para clientes que trabalham com a sua pr\u00f3pria equipa de desenvolvimento, fornecemos entreg\u00e1veis em Figma com o n\u00edvel de especifica\u00e7\u00e3o que elimina a necessidade de adivinhar.<\/p>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>Design consciente do framework<\/h4>\r\n          <p>Projetamos com o modelo de componentes do Angular, React ou Vue. Os componentes s\u00e3o realistas de implementar, n\u00e3o esbo\u00e7os aspiracionais que precisam de reengenharia antes de poderem ser lan\u00e7ados.<\/p>\r\n        <\/div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>WCAG 2.1 AA como norma<\/h4>\r\n          <p>A acessibilidade est\u00e1 integrada em todas as especifica\u00e7\u00f5es: contraste de cores, navega\u00e7\u00e3o por teclado, compatibilidade com leitores de ecr\u00e3, alvos de toque. N\u00e3o \u00e9 uma lista de verifica\u00e7\u00e3o p\u00f3s-lan\u00e7amento.<\/p>\r\n        <\/div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>Melhoria incremental dispon\u00edvel<\/h4>\r\n          <p>Avaliamos a interface existente, identificamos os problemas de maior impacto e redesenhamos fluxos espec\u00edficos sem necessitar de uma reconstru\u00e7\u00e3o total. Melhorias mensur\u00e1veis com menor risco e custo.<\/p>\r\n        <\/div>\r\n        <div class=\"cms-diff-point\">\r\n          <h4>QA p\u00f3s-constru\u00e7\u00e3o inclu\u00edda<\/h4>\r\n          <p>Revisamos a interface constru\u00edda antes do lan\u00e7amento. \u00c9 assim que os designs s\u00e3o lan\u00e7ados conforme projetados, e \u00e9 padr\u00e3o em todos os projetos.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46b3502 code-block elementor-widget elementor-widget-html\" data-id=\"46b3502\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 07 FAQ\n     Fundo: #f3f6ff\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-light cms-section\">\n  <div class=\"cms-inner\">\n    <span class=\"cms-eyebrow\">Perguntas Frequentes<\/span>\n    <h2 class=\"cms-h2\">Perguntas frequentes<\/h2>\n    <p class=\"cms-lead\">Que clientes costumam perguntar antes de iniciar um projeto de design.<\/p>\n    <div class=\"cms-faq-list\">\n      <details class=\"cms-faq\">\n        <summary>Qual \u00e9 a diferen\u00e7a entre design UX e design UI?<\/summary>\n        <div class=\"cms-faq-body\"><p>O design UX (User Experience) foca-se em como um produto funciona: a estrutura da informa\u00e7\u00e3o, o fluxo das tarefas e se os utilizadores conseguem atingir os seus objetivos de forma eficiente. O.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Como aborda a acessibilidade?<\/summary>\n        <div class=\"cms-faq-body\"><p>Concebemos com base no padr\u00e3o WCAG 2.1 AA. Para projetos do setor p\u00fablico em Portugal e na UE, concebemos de acordo com os requisitos de acessibilidade mais rigorosos impostos pela legisla\u00e7\u00e3o europeia. A acessibilidade \u00e9 integrada desde o in\u00edcio: r\u00e1cios de contraste de cores, percursos de navega\u00e7\u00e3o por teclado, etiquetas para leitores de ecr\u00e3 e tamanhos de alvos de toque fazem parte de todas as especifica\u00e7\u00f5es.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Realiza pesquisa de utilizador antes de projetar?<\/summary>\n        <div class=\"cms-faq-body\"><p>Sim, sempre. Para uma plataforma empresarial de grande dimens\u00e3o, isso pode significar entrevistas estruturadas com 15 a 20 utilizadores, card sorting, tree testing e v\u00e1rias rondas de testes de usabilidade. Para uma remodela\u00e7\u00e3o focada, podem ser cinco sess\u00f5es de usabilidade moderadas com utilizadores existentes. A abordagem adapta-se ao projeto, mas a investiga\u00e7\u00e3o do utilizador nunca \u00e9 dispensada. As decis\u00f5es de design tomadas sem o contributo do utilizador s\u00e3o suposi\u00e7\u00f5es.<\/p><\/div>\n    <\/details>\n      <h3 style=\"font-size:1.2rem;font-weight:800;color:var(--cms-dark);margin-top:1.5rem;margin-bottom:0;font-family:var(--cms-font);\">Processo de trabalho e entreg\u00e1veis<\/h3>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>\u00c9 poss\u00edvel melhorar um produto existente sem o reconstruir do zero?<\/summary>\n        <div class=\"cms-faq-body\"><p>Sim, e este \u00e9 um dos nossos projetos mais comuns. Analisamos a interface existente, identificamos os problemas de maior impacto e redesenhamos componentes ou fluxos espec\u00edficos. Isto resulta em melhorias mensur\u00e1veis, sem o risco e o custo de uma reconstru\u00e7\u00e3o completa.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Como \u00e9 que trabalha com a nossa equipa de desenvolvimento?<\/summary>\n        <div class=\"cms-faq-body\"><p>Entregamos ficheiros Figma com especifica\u00e7\u00f5es completas de componentes, notas de intera\u00e7\u00e3o para comportamentos n\u00e3o standard, um guia de estilos e um invent\u00e1rio de componentes. Se a sua equipa utiliza React, Angular ou Vue, desenhamos de acordo com o modelo de componentes desse framework. Uma revis\u00e3o de QA da interface constru\u00edda antes do lan\u00e7amento est\u00e1 inclu\u00edda em todos os projetos.<\/p><\/div>\n      <\/details>\n      <details class=\"cms-faq\">\n        <summary>Quanto custa um envolvimento de design e quanto tempo demora?<\/summary>\n        <div class=\"cms-faq-body\"><p>Uma auditoria UX e redesign de uma \u00e1rea de produto espec\u00edfica demora tipicamente 4 a 8 semanas. Um envolvimento completo de design de produto, desde a pesquisa de utilizador at\u00e9 a um sistema de design completo, demora 3 a 6 meses dependendo da complexidade do produto. Definimos o \u00e2mbito de cada projeto individualmente ap\u00f3s uma chamada inicial.<\/p><\/div>\n      <\/details>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-432de55 code-block elementor-widget elementor-widget-html\" data-id=\"432de55\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     UX\/UI DESIGN HUB \u2014 08 CTA\n     Fundo: #2170F2\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"cms cms-bleed cms-bg-blue cms-section cms-no-gap\">\n  <div class=\"cms-cta-inner\">\n    <h2 class=\"cms-h2 cms-h2-white\">Tem um produto para desenhar?<\/h2>\n    <p>Informe-nos o que est\u00e1 a construir e quem o ir\u00e1 utilizar. Responderemos dentro de um dia \u00fatil.<\/p>\n    <a href=\"https:\/\/caixamagica.pt\/pt\/vamos-conversar\/\" class=\"cms-btn-white\">Vamos conversar<\/a>\n  <\/div>\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5102321 code-block elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"5102321\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n<script type=\"application\/ld+json\">{\n    \"@context\": \"https:\\\/\\\/schema.org\",\n    \"@graph\": [\n        {\n            \"@type\": \"WebPage\",\n            \"@id\": \"https:\\\/\\\/caixamagica.pt\\\/ux-ui-design-hub\\\/#webpage\",\n            \"url\": \"https:\\\/\\\/caixamagica.pt\\\/ux-ui-design-hub\\\/\",\n            \"inLanguage\": \"pt-PT\",\n            \"name\": \"Hub de Design UX\\\/UI - Experi\\u00eancia do Utilizador - Caixa M\\u00e1gica\",\n            \"description\": \"Consultoria especializada em UX\\\/UI Design, focada em criar interfaces intuitivas e acess\\u00edveis para ecossistemas de software complexos.\",\n            \"breadcrumb\": {\n                \"@type\": \"BreadcrumbList\",\n                \"itemListElement\": [\n                    {\n                        \"@type\": \"ListItem\",\n                        \"position\": 1,\n                        \"name\": \"Home\",\n                        \"item\": \"https:\\\/\\\/caixamagica.pt\\\/\"\n                    },\n                    {\n                        \"@type\": \"ListItem\",\n                        \"position\": 2,\n                        \"name\": \"UX\\\/UI Design Hub\"\n                    }\n                ]\n            }\n        },\n        {\n            \"@type\": \"Service\",\n            \"name\": \"Servi\\u00e7os de UX\\\/UI Design e Consultoria\",\n            \"serviceType\": \"User Experience and Interface Design\",\n            \"provider\": {\n                \"@id\": \"https:\\\/\\\/caixamagica.pt\\\/#organization\"\n            },\n            \"description\": \"Design centrado no utilizador, cria\\u00e7\\u00e3o de Design Systems e auditorias de usabilidade para produtos digitais de alta performance.\",\n            \"knowsAbout\": [\n                \"User-Centered Design (UCD)\",\n                \"Design Thinking\",\n                \"Design Systems\",\n                \"Accessibility (WCAG)\",\n                \"Prototyping & Wireframing\",\n                \"Usability Testing\"\n            ],\n            \"hasOfferCatalog\": {\n                \"@type\": \"OfferCatalog\",\n                \"name\": \"Cat\\u00e1logo UX\\\/UI\",\n                \"itemListElement\": [\n                    {\n                        \"@type\": \"Offer\",\n                        \"itemOffered\": {\n                            \"@type\": \"Service\",\n                            \"name\": \"Auditorias de Usabilidade\"\n                        }\n                    },\n                    {\n                        \"@type\": \"Offer\",\n                        \"itemOffered\": {\n                            \"@type\": \"Service\",\n                            \"name\": \"Cria\\u00e7\\u00e3o de Design Systems Escal\\u00e1veis\"\n                        }\n                    },\n                    {\n                        \"@type\": \"Offer\",\n                        \"itemOffered\": {\n                            \"@type\": \"Service\",\n                            \"name\": \"Design de Interfaces para Web e Mobile\"\n                        }\n                    }\n                ]\n            }\n        }\n    ]\n}<\/script>\r\n\r\n\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>UX\/UI Design Hub Design thatships as designed We design interfaces for web, mobile, and automotive platforms. The work is grounded in user research, built to accessibility standards and specified in enough detail that the engineering team can build it without interpretation. Start a project See our work Platforms What we design From citizen-scale portals to [&hellip;]<\/p>","protected":false},"author":6,"featured_media":8496,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-12260","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX\/UI Design Hub | Web, Mobile &amp; Automotive<\/title>\n<meta name=\"description\" content=\"Caixa M\u00e1gica&#039;s UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/caixamagica.pt\/pt\/ux-ui-design-hub\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX\/UI Design Hub | Web, Mobile &amp; Automotive\" \/>\n<meta property=\"og:description\" content=\"Caixa M\u00e1gica&#039;s UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/caixamagica.pt\/pt\/ux-ui-design-hub\/\" \/>\n<meta property=\"og:site_name\" content=\"Caixa M\u00e1gica Software\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CaixaMagicaSoftware\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-14T14:19:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2025\/09\/Img_UX_UI-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/\",\"url\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/\",\"name\":\"UX\/UI Design Hub | Web, Mobile & Automotive\",\"isPartOf\":{\"@id\":\"https:\/\/caixamagica.pt\/#website\"},\"datePublished\":\"2025-09-26T13:38:38+00:00\",\"dateModified\":\"2026-07-14T14:19:25+00:00\",\"description\":\"Caixa M\u00e1gica's UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.\",\"breadcrumb\":{\"@id\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/caixamagica.pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX\/UI Design Hub\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/caixamagica.pt\/#website\",\"url\":\"https:\/\/caixamagica.pt\/\",\"name\":\"Caixa M\u00e1gica Software\",\"description\":\"Caixa Magica Software create technological solutions in the areas of mobile, web, and automotive, with over 19 years of experience in developing for various market segments.\",\"publisher\":{\"@id\":\"https:\/\/caixamagica.pt\/#organization\"},\"alternateName\":\"CMS\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/caixamagica.pt\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/caixamagica.pt\/#organization\",\"name\":\"Caixa M\u00e1gica Software\",\"alternateName\":\"CMS\",\"url\":\"https:\/\/caixamagica.pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png\",\"contentUrl\":\"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png\",\"width\":512,\"height\":512,\"caption\":\"Caixa M\u00e1gica Software\"},\"image\":{\"@id\":\"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/CaixaMagicaSoftware\",\"https:\/\/www.instagram.com\/caixamagicasoftware\/\",\"https:\/\/www.linkedin.com\/company\/caixa-magica-software\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX\/UI Design Hub | Web, Mobile e Autom\u00f3vel","description":"O Hub de Design UX\/UI da Caixa M\u00e1gica cria interfaces para web, mobile e autom\u00f3vel. Inclui pesquisa de utilizador, prototipagem e acessibilidade.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/caixamagica.pt\/pt\/ux-ui-design-hub\/","og_locale":"pt_PT","og_type":"article","og_title":"UX\/UI Design Hub | Web, Mobile & Automotive","og_description":"Caixa M\u00e1gica's UX\/UI Design Hub creates interfaces for web, mobile and automotive. User research, prototyping and accessibility included.","og_url":"https:\/\/caixamagica.pt\/pt\/ux-ui-design-hub\/","og_site_name":"Caixa M\u00e1gica Software","article_publisher":"https:\/\/www.facebook.com\/CaixaMagicaSoftware","article_modified_time":"2026-07-14T14:19:25+00:00","og_image":[{"width":900,"height":900,"url":"https:\/\/caixamagica.pt\/wp-content\/uploads\/2025\/09\/Img_UX_UI-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/","url":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/","name":"UX\/UI Design Hub | Web, Mobile e Autom\u00f3vel","isPartOf":{"@id":"https:\/\/caixamagica.pt\/#website"},"datePublished":"2025-09-26T13:38:38+00:00","dateModified":"2026-07-14T14:19:25+00:00","description":"O Hub de Design UX\/UI da Caixa M\u00e1gica cria interfaces para web, mobile e autom\u00f3vel. Inclui pesquisa de utilizador, prototipagem e acessibilidade.","breadcrumb":{"@id":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/caixamagica.pt\/ux-ui-design-hub\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/caixamagica.pt\/ux-ui-design-hub\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/caixamagica.pt\/"},{"@type":"ListItem","position":2,"name":"UX\/UI Design Hub"}]},{"@type":"WebSite","@id":"https:\/\/caixamagica.pt\/#website","url":"https:\/\/caixamagica.pt\/","name":"Caixa M\u00e1gica Software","description":"A Caixa M\u00e1gica Software cria solu\u00e7\u00f5es tecnol\u00f3gicas nas \u00e1reas mobile, web e autom\u00f3vel, com mais de 19 anos de experi\u00eancia no desenvolvimento para diversos segmentos de mercado.","publisher":{"@id":"https:\/\/caixamagica.pt\/#organization"},"alternateName":"CMS","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/caixamagica.pt\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/caixamagica.pt\/#organization","name":"Caixa M\u00e1gica Software","alternateName":"CMS","url":"https:\/\/caixamagica.pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/","url":"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png","contentUrl":"https:\/\/caixamagica.pt\/wp-content\/uploads\/2023\/09\/cropped-Favicon-CMS-v2.png","width":512,"height":512,"caption":"Caixa M\u00e1gica Software"},"image":{"@id":"https:\/\/caixamagica.pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CaixaMagicaSoftware","https:\/\/www.instagram.com\/caixamagicasoftware\/","https:\/\/www.linkedin.com\/company\/caixa-magica-software"]}]}},"_links":{"self":[{"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/pages\/12260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/comments?post=12260"}],"version-history":[{"count":97,"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/pages\/12260\/revisions"}],"predecessor-version":[{"id":14298,"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/pages\/12260\/revisions\/14298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/media\/8496"}],"wp:attachment":[{"href":"https:\/\/caixamagica.pt\/pt\/wp-json\/wp\/v2\/media?parent=12260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}