{"id":5315,"date":"2026-05-16T16:29:06","date_gmt":"2026-05-16T16:29:06","guid":{"rendered":"https:\/\/ramoadigital.com\/?page_id=5315"},"modified":"2026-05-22T17:38:07","modified_gmt":"2026-05-22T17:38:07","slug":"web-development","status":"publish","type":"page","link":"https:\/\/ramoadigital.com\/en\/servicos\/desenvolvimento-web\/","title":{"rendered":"Web Development"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5315\" class=\"elementor elementor-5315\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0aff6df e-con-full e-flex e-con e-parent\" data-id=\"0aff6df\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5dafee5 elementor-widget elementor-widget-html\" data-id=\"5dafee5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"ramoa-page-hero\" aria-labelledby=\"ramoaPageHeroTitle\">\n  <div class=\"ramoa-page-hero__glow\" aria-hidden=\"true\"><\/div>\n  <div class=\"ramoa-page-hero__grid\" aria-hidden=\"true\"><\/div>\n  <div class=\"ramoa-page-hero__rings\" aria-hidden=\"true\"><\/div>\n  <div class=\"ramoa-page-hero__inner\">\n    <nav class=\"ramoa-page-hero__breadcrumb\" aria-label=\"Breadcrumb\">\n      <a href=\"\/\">Home<\/a>\n            <span aria-hidden=\"true\">\/<\/span>\n      <a href=\"\/servicos\/\">Servi\u00e7os<\/a>\n      <span aria-hidden=\"true\">\/<\/span>\n      <span>Desenvolvimento Web<\/span>\n    <\/nav>\n    <span class=\"ramoa-page-hero__chip\">Desenvolvimento Web<\/span>\n     <h1 class=\"ramoa-page-hero__title\" id=\"ramoaPageHeroTitle\">\n  Sites & Landing Pages <br> que convertem visitas em clientes.\n    <\/h1>\n    <p class=\"ramoa-page-hero__lead\">\n  Cria\u00e7\u00e3o de sites institucionais, landing pages e lojas virtuais <br>pensados para explicar, gerar confian\u00e7a e <span>transformar acessos em oportunidades reais de neg\u00f3cio.<\/span>    <\/p>\n  <\/div>\n<\/section>\n\n<style>\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\n     RAMOA \u2014 INTERNAL PAGE HERO \/ BREADCRUMB\n     Background inspirado na ramoa-discovery-section\n     com rede quadriculada e predomin\u00e2ncia azul dark\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 *\/\n\n  .ramoa-page-hero,\n  .ramoa-page-hero * {\n    box-sizing: border-box;\n  }\n\n  .ramoa-page-hero {\n    --ramoa-bg-1: #070210;\n    --ramoa-bg-2: #071022;\n    --ramoa-bg-3: #0b0218;\n    --ramoa-pink: #ff2fda;\n    --ramoa-purple: #a855f7;\n    --ramoa-blue: #2dd4ff;\n    --ramoa-deep-blue: #011129;\n\n    position: relative;\n    width: 100%;\n    min-height: clamp(320px, 42vh, 480px);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding:\n      clamp(128px, 16vh, 168px)\n      clamp(18px, 5vw, 72px)\n      clamp(72px, 10vh, 110px);\n\n    overflow: hidden;\n    isolation: isolate;\n\n    color: #ffffff;\n\n    background:\n      radial-gradient(\n        120% 80% at 82% 8%,\n        rgba(45, 212, 255, 0.13) 0%,\n        rgba(18, 28, 77, 0.22) 30%,\n        rgba(11, 2, 24, 0) 62%\n      ),\n      radial-gradient(\n        90% 68% at 8% 88%,\n        rgba(45, 212, 255, 0.085) 0%,\n        rgba(1, 17, 41, 0.24) 34%,\n        rgba(11, 2, 24, 0) 64%\n      ),\n      radial-gradient(\n        80% 60% at 50% 48%,\n        rgba(89, 75, 231, 0.080) 0%,\n        rgba(1, 17, 41, 0.18) 36%,\n        rgba(11, 2, 24, 0) 68%\n      ),\n      radial-gradient(\n        70% 56% at 16% 18%,\n        rgba(255, 47, 218, 0.045) 0%,\n        rgba(255, 47, 218, 0.016) 34%,\n        rgba(11, 2, 24, 0) 68%\n      ),\n      linear-gradient(\n        180deg,\n        #070210 0%,\n        #071022 38%,\n        #050914 72%,\n        #0b0218 100%\n      );\n  }\n\n  .ramoa-page-hero::after {\n    content: \"\";\n    position: absolute;\n    inset: auto 0 0 0;\n\n    height: 1px;\n\n    background:\n      linear-gradient(\n        90deg,\n        transparent,\n        rgba(45, 212, 255, 0.22),\n        rgba(89, 75, 231, 0.24),\n        rgba(255, 47, 218, 0.16),\n        transparent\n      );\n\n    box-shadow:\n      0 -1px 20px rgba(45, 212, 255, 0.12),\n      0 -1px 34px rgba(89, 75, 231, 0.10);\n\n    pointer-events: none;\n    z-index: 3;\n  }\n\n  .ramoa-page-hero__glow {\n    position: absolute;\n    inset: 0;\n\n    background:\n      radial-gradient(\n        ellipse at 50% 42%,\n        rgba(45, 212, 255, 0.070),\n        rgba(89, 75, 231, 0.060) 34%,\n        rgba(11, 2, 24, 0) 66%\n      ),\n      radial-gradient(\n        ellipse at 50% 92%,\n        rgba(1, 17, 41, 0.60),\n        rgba(1, 17, 41, 0.22) 34%,\n        rgba(11, 2, 24, 0) 68%\n      ),\n      linear-gradient(\n        180deg,\n        rgba(7, 2, 16, 0.10) 0%,\n        rgba(7, 16, 34, 0.10) 44%,\n        rgba(11, 2, 24, 0.46) 100%\n      );\n\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .ramoa-page-hero__grid {\n    position: absolute;\n    inset: 0;\n\n    background-image:\n      linear-gradient(\n        transparent 95%,\n        rgba(45, 212, 255, 0.105) 95%\n      ),\n      linear-gradient(\n        90deg,\n        transparent 95%,\n        rgba(45, 212, 255, 0.105) 95%\n      ),\n      linear-gradient(\n        transparent 95%,\n        rgba(168, 85, 247, 0.055) 95%\n      ),\n      linear-gradient(\n        90deg,\n        transparent 95%,\n        rgba(168, 85, 247, 0.055) 95%\n      );\n\n    background-size:\n      48px 48px,\n      48px 48px,\n      96px 96px,\n      96px 96px;\n\n    background-position: center center;\n\n    mask-image:\n      radial-gradient(\n        ellipse at center,\n        #000 18%,\n        rgba(0, 0, 0, 0.82) 42%,\n        rgba(0, 0, 0, 0.44) 68%,\n        transparent 92%\n      );\n    -webkit-mask-image:\n      radial-gradient(\n        ellipse at center,\n        #000 18%,\n        rgba(0, 0, 0, 0.82) 42%,\n        rgba(0, 0, 0, 0.44) 68%,\n        transparent 92%\n      );\n\n    opacity: 0.46;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  \/* Removido visualmente para evitar c\u00edrculos\/rings no background *\/\n  .ramoa-page-hero__rings {\n    display: none !important;\n  }\n\n  .ramoa-page-hero__inner {\n    position: relative;\n    z-index: 2;\n\n    width: min(1120px, 100%);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n\n  \/* Breadcrumb *\/\n  .ramoa-page-hero__breadcrumb {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 9px;\n\n    margin-bottom: 18px;\n\n    color: rgba(255, 255, 255, 0.58);\n\n    font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    font-size: 12px;\n    line-height: 1;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  .ramoa-page-hero__breadcrumb a {\n    color: rgba(255, 255, 255, 0.66);\n    text-decoration: none;\n\n    transition: color 0.22s ease;\n  }\n\n  .ramoa-page-hero__breadcrumb a:hover {\n    color: #2dd4ff;\n  }\n\n  .ramoa-page-hero__breadcrumb span:last-child {\n    color: rgba(241, 131, 199, 0.92);\n  }\n\n  \/* Chip *\/\n  .ramoa-page-hero__chip {\n    display: inline-flex;\n    width: fit-content;\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 18px;\n    padding: 8px 15px;\n\n    border-radius: 999px;\n    border: 1px solid rgba(255, 47, 218, 0.62);\n\n    color: rgba(255, 255, 255, 0.94);\n\n    background:\n      linear-gradient(\n        135deg,\n        rgba(45, 212, 255, 0.12),\n        rgba(89, 75, 231, 0.30) 46%,\n        rgba(255, 47, 218, 0.16)\n      );\n\n    box-shadow:\n      0 0 18px rgba(45, 212, 255, 0.12),\n      0 0 22px rgba(255, 47, 218, 0.22),\n      0 0 34px rgba(89, 75, 231, 0.18),\n      inset 0 0 14px rgba(255, 255, 255, 0.055);\n\n    font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    font-size: 10px;\n    line-height: 1;\n    font-weight: 900;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n  }\n\n  \/* T\u00edtulo *\/\n  .ramoa-page-hero__title {\n    margin: 0;\n\n    color: #ffffff;\n\n    font-family: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    font-size: 48px;\n    line-height: 1.2em;\n    font-weight: 600;\n    letter-spacing: -0.045em;\n\n    text-shadow:\n      0 0 14px rgba(45, 212, 255, 0.16),\n      0 0 24px rgba(89, 75, 231, 0.20),\n      0 2px 16px rgba(5, 0, 11, 0.74);\n  }\n\n  .ramoa-page-hero__title::after {\n    content: \"\";\n    display: block;\n\n    width: 72px;\n    height: 2px;\n\n    margin: 24px auto 0;\n\n    background: linear-gradient(\n      90deg,\n      transparent,\n      #ff2fda,\n      #a855f7,\n      #2dd4ff,\n      transparent\n    );\n\n    box-shadow:\n      0 0 14px rgba(45, 212, 255, 0.30),\n      0 0 16px rgba(255, 47, 218, 0.32),\n      0 0 24px rgba(89, 75, 231, 0.20);\n  }\n\n  \/* Descri\u00e7\u00e3o *\/\n  .ramoa-page-hero__lead {\n    position: relative;\n    max-width: 780px;\n\n    margin: 26px auto 0;\n    padding: 14px 24px;\n\n    color: rgba(255, 255, 255, 0.76);\n\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    font-size: clamp(14px, 1.08vw, 17px);\n    line-height: 1.68;\n    font-weight: 450;\n    letter-spacing: 0.006em;\n\n    text-align: center;\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(255, 255, 255, 0.042) 0%,\n        rgba(255, 255, 255, 0.018) 100%\n      );\n\n    border: 1px solid rgba(45, 212, 255, 0.105);\n    border-radius: 18px;\n\n    box-shadow:\n      0 14px 38px rgba(1, 17, 41, 0.30),\n      0 0 22px rgba(45, 212, 255, 0.060),\n      0 0 22px rgba(255, 47, 218, 0.040),\n      inset 0 0 0 1px rgba(255, 255, 255, 0.026);\n\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n\n    text-shadow:\n      0 1px 18px rgba(1, 17, 41, 0.56);\n  }\n\n  .ramoa-page-hero__lead::before {\n    content: \"\";\n    position: absolute;\n\n    left: 50%;\n    top: -1px;\n\n    width: 48%;\n    height: 1px;\n\n    transform: translateX(-50%);\n\n    background:\n      linear-gradient(\n        90deg,\n        transparent,\n        rgba(255, 47, 218, 0.62),\n        rgba(168, 85, 247, 0.58),\n        rgba(45, 212, 255, 0.58),\n        transparent\n      );\n\n    box-shadow:\n      0 0 12px rgba(45, 212, 255, 0.26),\n      0 0 12px rgba(255, 47, 218, 0.22),\n      0 0 18px rgba(89, 75, 231, 0.16);\n\n    pointer-events: none;\n  }\n\n  .ramoa-page-hero__lead span {\n    color: transparent;\n\n    background:\n      linear-gradient(\n        90deg,\n        #ff2fda,\n        #a855f7 58%,\n        #2dd4ff\n      );\n\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n    font-weight: 800;\n    white-space: nowrap;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 767px) {\n    .ramoa-page-hero {\n      min-height: clamp(300px, 46vh, 420px);\n\n      padding:\n        112px\n        18px\n        68px;\n    }\n\n    .ramoa-page-hero__grid {\n      opacity: 0.36;\n\n      background-size:\n        42px 42px,\n        42px 42px,\n        84px 84px,\n        84px 84px;\n    }\n\n    .ramoa-page-hero__breadcrumb {\n      flex-wrap: wrap;\n      margin-bottom: 14px;\n      font-size: 10px;\n      letter-spacing: 0.07em;\n    }\n\n    .ramoa-page-hero__chip {\n      margin-bottom: 16px;\n      padding: 7px 13px;\n      font-size: 10px;\n      letter-spacing: 0.13em;\n    }\n\n    .ramoa-page-hero__title {\n      font-size: clamp(38px, 12vw, 48px);\n      line-height: 1.14em;\n      font-weight: 400 !important;\n      letter-spacing: -0.04em;\n    }\n\n    .ramoa-page-hero__title::after {\n      width: 58px;\n      margin-top: 20px;\n    }\n\n    .ramoa-page-hero__lead {\n      max-width: 94%;\n      margin-top: 22px;\n      padding: 14px 18px;\n\n      font-size: 14px;\n      line-height: 1.62;\n\n      border-radius: 16px;\n    }\n\n    .ramoa-page-hero__lead::before {\n      width: 68%;\n    }\n\n    .ramoa-page-hero__rings {\n      display: none !important;\n    }\n  }\n\n  \/* Reduced Motion *\/\n  @media (prefers-reduced-motion: reduce) {\n    .ramoa-page-hero__breadcrumb a {\n      transition: none;\n    }\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-58f1abe e-con-full e-flex e-con e-child\" data-id=\"58f1abe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-71ae2ce e-con-full e-flex e-con e-child\" data-id=\"71ae2ce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b59cb8 elementor-widget elementor-widget-html\" data-id=\"5b59cb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  RAMOA \u2014 LETREIRO 1 (apenas HTML)\n  \n  Pr\u00e9-requisito: o CSS+JS global da marquee precisa estar carregado\n  na p\u00e1gina (ramoa-marquee-global.html).\n  \n  Para variar a lista de termos, basta editar os <span> abaixo \u2014\n  n\u00e3o precisa mexer em CSS ou JS.\n-->\n<div class=\"ramoa-marquee\" aria-label=\"Servi\u00e7os RAMOA\">\n  <div class=\"ramoa-marquee-track\">\n    <span>DESENVOLVIMENTO WEB<\/span>\n    <span>IDENTIDADE VISUAL<\/span>\n    <span>SOFTWARE SOB MEDIDA<\/span>\n    <span>LOJA VIRTUAL<\/span>\n    <span>TR\u00c1FEGO PAGO<\/span>\n    <span>WORDPRESS<\/span>\n    <span>REDES SOCIAIS<\/span>\n    <span>LANDING PAGES<\/span>\n    <span>SEO<\/span>\n    <span>INFRAESTRUTURA DIGITAL<\/span>\n    <span>CRM &amp; ERP<\/span>\n    <span>GOOGLE ADS<\/span>\n  <\/div>\n<\/div>\n\n<!--\n  RAMOA \u2014 MARQUEE \/ SERVICES STRIP \u2014 CSS GLOBAL (v2)\n  \n  COLE ESTE BLOCO UMA \u00daNICA VEZ na p\u00e1gina (em \"Custom CSS\" do tema,\n  Elementor \u2192 Site Settings \u2192 Custom CSS, ou no header HTML widget).\n  \n  Ele serve TODOS os letreiros da p\u00e1gina (.ramoa-marquee), bastando\n  cada letreiro ter sua pr\u00f3pria <div class=\"ramoa-marquee\">\u2026<\/div>\n  com a lista de termos espec\u00edfica.\n  \n  Por que separar:\n  - DRY: lista de estilos definida uma vez, manuten\u00e7\u00e3o centralizada\n  - Performance: o CSS \u00e9 cacheado pelo browser (se inserido via tema)\n  - Visual consistente entre todos os letreiros da p\u00e1gina\n-->\n\n<style>\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\n   RAMOA \u2014 MARQUEE \/ SERVICES STRIP (estilos globais)\n   Dark blue tech + neon cyan\/purple\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 *\/\n\n.ramoa-marquee {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 18% 50%,\n      rgba(45, 212, 255, 0.10) 0%,\n      rgba(45, 212, 255, 0.035) 26%,\n      transparent 58%\n    ),\n    radial-gradient(\n      circle at 82% 50%,\n      rgba(89, 75, 231, 0.12) 0%,\n      rgba(89, 75, 231, 0.040) 30%,\n      transparent 62%\n    ),\n    linear-gradient(\n      90deg,\n      rgba(1, 17, 41, 0.94) 0%,\n      rgba(12, 28, 68, 0.88) 34%,\n      rgba(18, 28, 77, 0.82) 50%,\n      rgba(12, 28, 68, 0.88) 66%,\n      rgba(1, 17, 41, 0.94) 100%\n    );\n\n  padding: 14px 0;\n\n  border-top: 1px solid rgba(45, 212, 255, 0.26);\n  border-bottom: 1px solid rgba(89, 75, 231, 0.28);\n\n  box-shadow:\n    0 0 18px rgba(45, 212, 255, 0.10),\n    0 0 30px rgba(89, 75, 231, 0.08),\n    inset 0 1px 0 rgba(255, 255, 255, 0.045),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.030);\n\n  contain: layout paint style;\n}\n\n\/* brilho horizontal sutil *\/\n.ramoa-marquee::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent 0%,\n      rgba(45, 212, 255, 0.075) 28%,\n      rgba(255, 255, 255, 0.040) 50%,\n      rgba(89, 75, 231, 0.085) 72%,\n      transparent 100%\n    );\n\n  opacity: 0.70;\n  pointer-events: none;\n}\n\n\/* fade nas laterais *\/\n.ramoa-marquee::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(1, 17, 41, 0.98) 0%,\n      rgba(1, 17, 41, 0.72) 6%,\n      transparent 16%,\n      transparent 84%,\n      rgba(1, 17, 41, 0.72) 94%,\n      rgba(1, 17, 41, 0.98) 100%\n    );\n\n  pointer-events: none;\n  z-index: 2;\n}\n\n.ramoa-marquee-track {\n  position: relative;\n  z-index: 1;\n\n  display: flex;\n  align-items: center;\n  width: max-content;\n\n  animation: ramoaMarqueeMove 26s linear infinite;\n  will-change: transform;\n  animation-play-state: paused;\n}\n\n\/* Track s\u00f3 anima quando a marquee est\u00e1 vis\u00edvel na viewport *\/\n.ramoa-marquee.is-visible .ramoa-marquee-track {\n  animation-play-state: running;\n}\n\n.ramoa-marquee-track span {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  margin-right: 46px;\n\n  color: rgba(235, 246, 255, 0.88);\n\n  font-family: \"Inter\", sans-serif;\n  font-size: 14px;\n  font-weight: 750;\n  text-transform: uppercase;\n  letter-spacing: 0.13em;\n  white-space: nowrap;\n\n  text-shadow:\n    0 0 10px rgba(45, 212, 255, 0.24),\n    0 0 18px rgba(89, 75, 231, 0.16);\n}\n\n.ramoa-marquee-track span::after {\n  content: \"\u2022\";\n\n  margin-left: 46px;\n\n  color: #2dd4ff;\n\n  text-shadow:\n    0 0 8px rgba(45, 212, 255, 0.85),\n    0 0 16px rgba(89, 75, 231, 0.38),\n    0 0 22px rgba(241, 131, 199, 0.18);\n\n  opacity: 0.92;\n}\n\n\/* Pequeno destaque alternado para dar vida sem ficar rosa demais *\/\n.ramoa-marquee-track span:nth-child(3n) {\n  color: rgba(219, 225, 255, 0.90);\n\n  text-shadow:\n    0 0 10px rgba(89, 75, 231, 0.32),\n    0 0 18px rgba(45, 212, 255, 0.14);\n}\n\n.ramoa-marquee-track span:nth-child(4n)::after {\n  color: #8b7cff;\n\n  text-shadow:\n    0 0 8px rgba(89, 75, 231, 0.80),\n    0 0 14px rgba(45, 212, 255, 0.28);\n}\n\n@keyframes ramoaMarqueeMove {\n  from { transform: translate3d(0, 0, 0); }\n  to   { transform: translate3d(-50%, 0, 0); }\n}\n\n\/* Pausa no hover *\/\n.ramoa-marquee:hover .ramoa-marquee-track {\n  animation-play-state: paused;\n}\n\n\/* Mobile *\/\n@media (max-width: 767px) {\n  .ramoa-marquee {\n    padding: 12px 0;\n  }\n\n  .ramoa-marquee-track {\n    animation-duration: 22s;\n  }\n\n  .ramoa-marquee-track span {\n    font-size: 12px;\n    letter-spacing: 0.11em;\n    margin-right: 34px;\n  }\n\n  .ramoa-marquee-track span::after {\n    margin-left: 34px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ramoa-marquee-track {\n    animation: none !important;\n  }\n}\n<\/style>\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\u2550\u2550\u2550\u2550\n  JS GLOBAL \u2014 tamb\u00e9m cole UMA \u00daNICA VEZ na p\u00e1gina.\n  Ele inicializa TODOS os .ramoa-marquee da p\u00e1gina automaticamente.\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\n-->\n<script>\n(function(){\n  \/\/ Espera o DOM estar pronto antes de procurar pelos letreiros.\n  \/\/ Importante: este <script> pode estar inserido ANTES dos\n  \/\/ .ramoa-marquee na p\u00e1gina (ex: cole o CSS+JS no header e os\n  \/\/ letreiros nas sections do meio). Sem este wait, o querySelectorAll\n  \/\/ retornaria 0 elementos e nenhum letreiro seria inicializado.\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n\n  function init(){\n    var marquees = document.querySelectorAll('.ramoa-marquee');\n    if (!marquees.length) return;\n\n  \/\/ Fallback p\/ browsers sem IntersectionObserver: anima sempre.\n  var hasIO = ('IntersectionObserver' in window);\n  var io = null;\n\n  if (hasIO) {\n    io = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n        } else {\n          entry.target.classList.remove('is-visible');\n        }\n      });\n    }, { rootMargin: '120px 0px', threshold: 0 });\n  }\n\n  marquees.forEach(function(marquee){\n    var track = marquee.querySelector('.ramoa-marquee-track');\n    if (!track) return;\n\n    \/\/ ===== 1) Duplica\u00e7\u00e3o autom\u00e1tica da lista para o loop visual =====\n    \/\/ S\u00f3 duplica se ainda n\u00e3o foi duplicado (evita rodar 2x se o script\n    \/\/ for chamado mais de uma vez por algum motivo).\n    if (!marquee.dataset.ramoaCloned) {\n      var originals = Array.prototype.slice.call(track.children);\n      originals.forEach(function(node){\n        var clone = node.cloneNode(true);\n        clone.setAttribute('aria-hidden', 'true');\n        track.appendChild(clone);\n      });\n      marquee.dataset.ramoaCloned = '1';\n    }\n\n    \/\/ ===== 2) Pause-offscreen via IntersectionObserver =====\n    if (hasIO) {\n      io.observe(marquee);\n    } else {\n      marquee.classList.add('is-visible');\n    }\n  });\n\n  \/\/ ===== 3) Pause em aba inativa (Page Visibility API) =====\n  \/\/ Aplica a TODOS os tracks da p\u00e1gina de uma vez.\n  document.addEventListener('visibilitychange', function(){\n    var tracks = document.querySelectorAll('.ramoa-marquee-track');\n    tracks.forEach(function(track){\n      if (document.hidden) {\n        track.style.animationPlayState = 'paused';\n      } else {\n        track.style.animationPlayState = '';\n      }\n    });\n  });\n  } \/\/ end of init()\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dfee841 e-con-full e-flex e-con e-parent\" data-id=\"dfee841\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a56286 elementor-widget elementor-widget-html\" data-id=\"0a56286\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- RAMOA Digital \u2014 \/servicos\/desenvolvimento-web (conte\u00fado abaixo do hero) -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .rdw {\n    --ramoa-bg-deep:    #070210;\n    --ramoa-bg-blue:    #071022;\n    --ramoa-bg-dark:    #050914;\n    --ramoa-bg-purple:  #0b0218;\n    --ramoa-cyan:       #2dd4ff;\n    --ramoa-blue:       #594be7;\n    --ramoa-pink:       #ff2fda;\n    --ramoa-purple:     #a855f7;\n    --ramoa-text:       rgba(255,255,255,0.92);\n    --ramoa-text-soft:  rgba(255,255,255,0.72);\n    --ramoa-text-faint: rgba(255,255,255,0.55);\n    --ramoa-font: \"Outfit\",\"Inter\",-apple-system,system-ui,sans-serif;\n\n    font-family: var(--ramoa-font);\n    color: var(--ramoa-text);\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n  }\n  .rdw *, .rdw *::before, .rdw *::after { box-sizing: border-box; }\n\n  \/* Section base *\/\n  .rdw-section {\n    position: relative;\n    padding: clamp(72px, 10vh, 120px) clamp(18px, 5vw, 72px);\n    overflow: hidden;\n  }\n  .rdw-padrao {\n    background: linear-gradient(180deg, #070210 0%, #071022 50%, #050914 100%);\n  }\n  .rdw-destaque {\n    isolation: isolate;\n    background:\n      radial-gradient(80% 60% at 50% 0%, rgba(45,212,255,0.10), transparent 65%),\n      radial-gradient(60% 50% at 100% 100%, rgba(89,75,231,0.08), transparent 65%),\n      radial-gradient(50% 40% at 0% 100%, rgba(255,47,218,0.05), transparent 65%),\n      linear-gradient(180deg, #070210 0%, #071022 50%, #050914 100%);\n  }\n  .rdw-grade::before {\n    content: \"\";\n    position: absolute; inset: 0;\n    background-image:\n      linear-gradient(transparent 95%, rgba(45,212,255,0.10) 95%),\n      linear-gradient(90deg, transparent 95%, rgba(45,212,255,0.10) 95%);\n    background-size: 48px 48px;\n    -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,0.6) 50%, transparent 90%);\n            mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,0.6) 50%, transparent 90%);\n    opacity: 0.30;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .rdw-container {\n    position: relative;\n    z-index: 1;\n    max-width: 1180px;\n    margin: 0 auto;\n  }\n\n  \/* Eyebrow *\/\n  .rdw-eyebrow {\n    display: inline-flex; align-items: center; gap: 10px;\n    font-size: 10.5px;\n    font-weight: 900;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    color: var(--ramoa-cyan);\n    padding: 7px 14px;\n    border: 1px solid rgba(45,212,255,0.30);\n    border-radius: 999px;\n    background: rgba(45,212,255,0.05);\n    margin-bottom: 22px;\n  }\n  .rdw-eyebrow::before {\n    content: \"\";\n    width: 6px; height: 6px;\n    border-radius: 50%;\n    background: var(--ramoa-cyan);\n    box-shadow: 0 0 10px var(--ramoa-cyan);\n    animation: rdw-pulse 1.6s ease-in-out infinite;\n  }\n  @keyframes rdw-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.45; transform: scale(0.8); }\n  }\n\n  .rdw-h2 {\n    font-size: clamp(28px, 3.4vw, 44px);\n    font-weight: 600;\n    letter-spacing: -0.02em;\n    line-height: 1.15;\n    margin: 0 0 20px;\n    color: var(--ramoa-text);\n  }\n  .rdw-grad {\n    background: linear-gradient(90deg, var(--ramoa-cyan), var(--ramoa-purple));\n    -webkit-background-clip: text;\n            background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  .rdw-lede {\n    font-size: 15.5px;\n    line-height: 1.65;\n    color: var(--ramoa-text-soft);\n    max-width: 760px;\n    margin: 0 0 44px;\n  }\n\n  \/* Micro cards (sec 1) *\/\n  .rdw-micro {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 22px;\n  }\n  .rdw-mcard {\n    padding: 28px 24px;\n    border-radius: 20px;\n    background: rgba(255,255,255,0.025);\n    border: 1px solid rgba(255,255,255,0.07);\n    transition: transform .35s ease, border-color .35s ease, background .35s ease;\n  }\n  .rdw-mcard:hover {\n    transform: translateY(-4px);\n    border-color: rgba(45,212,255,0.35);\n    background: rgba(45,212,255,0.04);\n  }\n  .rdw-icon {\n    width: 44px; height: 44px;\n    display: inline-flex; align-items: center; justify-content: center;\n    border-radius: 12px;\n    background: rgba(45,212,255,0.08);\n    border: 1px solid rgba(45,212,255,0.25);\n    color: var(--ramoa-cyan);\n    margin-bottom: 18px;\n    box-shadow: 0 0 20px rgba(45,212,255,0.25);\n  }\n  .rdw-icon svg { width: 22px; height: 22px; }\n  .rdw-mcard h3 {\n    margin: 0 0 8px;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--ramoa-text);\n  }\n  .rdw-mcard p {\n    margin: 0;\n    font-size: 14.5px;\n    line-height: 1.6;\n    color: var(--ramoa-text-soft);\n  }\n\n  \/* Tipos grid (sec 2) *\/\n  .rdw-tipos {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 24px;\n  }\n  .rdw-tcard {\n    position: relative;\n    padding: 32px 28px;\n    border-radius: 22px;\n    background: rgba(255,255,255,0.03);\n    border: 1px solid rgba(255,255,255,0.08);\n    transition: transform .35s ease, border-color .35s ease, background .35s ease;\n  }\n  .rdw-tcard:hover {\n    transform: translateY(-4px);\n    border-color: rgba(45,212,255,0.40);\n    background: rgba(45,212,255,0.045);\n  }\n  .rdw-tnum {\n    font-size: 13px;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    color: var(--ramoa-cyan);\n    margin-bottom: 10px;\n  }\n  .rdw-tcard h3 {\n    margin: 0 0 12px;\n    font-size: 22px;\n    font-weight: 700;\n  }\n  .rdw-tcard p {\n    margin: 0 0 18px;\n    font-size: 15px;\n    line-height: 1.65;\n    color: var(--ramoa-text-soft);\n  }\n  .rdw-tags {\n    display: flex; flex-wrap: wrap; gap: 8px;\n  }\n  .rdw-tag {\n    font-size: 11.5px;\n    font-weight: 600;\n    letter-spacing: 0.04em;\n    padding: 5px 11px;\n    border-radius: 999px;\n    background: rgba(45,212,255,0.06);\n    border: 1px solid rgba(45,212,255,0.20);\n    color: var(--ramoa-text-soft);\n  }\n\n  \/* Diferenciais (sec 3) *\/\n  .rdw-difs {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 22px;\n  }\n  .rdw-dcard {\n    display: flex; gap: 18px;\n    padding: 26px;\n    border-radius: 20px;\n    background: rgba(255,255,255,0.025);\n    border: 1px solid rgba(255,255,255,0.08);\n    transition: transform .35s ease, border-color .35s ease;\n  }\n  .rdw-dcard:hover {\n    transform: translateY(-3px);\n    border-color: rgba(45,212,255,0.35);\n  }\n  .rdw-dcard .rdw-icon { flex-shrink: 0; margin-bottom: 0; }\n  .rdw-dcard h3 {\n    margin: 0 0 8px;\n    font-size: 18px;\n    font-weight: 700;\n  }\n  .rdw-dcard p {\n    margin: 0;\n    font-size: 14.5px;\n    line-height: 1.6;\n    color: var(--ramoa-text-soft);\n  }\n\n  \/* Timeline (sec 4) *\/\n  .rdw-timeline {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 28px;\n    margin-top: 50px;\n  }\n  .rdw-timeline::before {\n    content: \"\";\n    position: absolute;\n    top: 28px;\n    left: 8%;\n    right: 8%;\n    height: 2px;\n    background: linear-gradient(90deg,\n      transparent 0%,\n      var(--ramoa-cyan) 20%,\n      var(--ramoa-purple) 80%,\n      transparent 100%);\n    background-size: 200% 100%;\n    animation: rdw-flow 6s linear infinite;\n    z-index: 0;\n  }\n  @keyframes rdw-flow {\n    0% { background-position: 0% 50%; }\n    100% { background-position: 200% 50%; }\n  }\n  .rdw-step {\n    position: relative;\n    z-index: 1;\n    text-align: center;\n    padding: 0 6px;\n  }\n  .rdw-step-num {\n    position: relative;\n    width: 56px; height: 56px;\n    margin: 0 auto 18px;\n    display: flex; align-items: center; justify-content: center;\n    border-radius: 50%;\n    background: var(--ramoa-bg-dark);\n    border: 1px solid rgba(45,212,255,0.40);\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--ramoa-cyan);\n    box-shadow: 0 0 24px rgba(45,212,255,0.20);\n  }\n  .rdw-step h3 {\n    margin: 0 0 8px;\n    font-size: 18px;\n    font-weight: 700;\n  }\n  .rdw-step p {\n    margin: 0;\n    font-size: 14px;\n    line-height: 1.55;\n    color: var(--ramoa-text-soft);\n  }\n\n  \/* Perfis (sec 5) *\/\n  .rdw-perfis {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 22px;\n  }\n  .rdw-perfil {\n    padding: 32px 26px;\n    border-radius: 22px;\n    background: rgba(255,255,255,0.025);\n    border: 1px solid rgba(255,255,255,0.08);\n    text-align: left;\n    transition: transform .35s ease, border-color .35s ease;\n  }\n  .rdw-perfil:hover {\n    transform: translateY(-4px);\n    border-color: rgba(45,212,255,0.35);\n  }\n  .rdw-perfil h3 {\n    margin: 0 0 10px;\n    font-size: 19px;\n    font-weight: 700;\n  }\n  .rdw-perfil p {\n    margin: 0;\n    font-size: 14.5px;\n    line-height: 1.6;\n    color: var(--ramoa-text-soft);\n  }\n\n  \/* FAQ (sec 6) *\/\n  .rdw-faq { max-width: 860px; margin-top: 10px; }\n  .rdw-q {\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 16px;\n    background: rgba(255,255,255,0.025);\n    margin-bottom: 12px;\n    transition: border-color .3s ease, background .3s ease;\n  }\n  .rdw-q[open] {\n    border-color: rgba(45,212,255,0.35);\n    background: rgba(45,212,255,0.035);\n  }\n  .rdw-q summary {\n    list-style: none;\n    cursor: pointer;\n    padding: 20px 24px;\n    display: flex; align-items: center; justify-content: space-between;\n    gap: 18px;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--ramoa-text);\n  }\n  .rdw-q summary::-webkit-details-marker { display: none; }\n  .rdw-q-icon {\n    width: 26px; height: 26px;\n    flex-shrink: 0;\n    border-radius: 50%;\n    border: 1px solid rgba(45,212,255,0.40);\n    color: var(--ramoa-cyan);\n    display: flex; align-items: center; justify-content: center;\n    transition: transform .3s ease;\n  }\n  .rdw-q[open] .rdw-q-icon { transform: rotate(45deg); }\n  .rdw-q-body {\n    padding: 0 24px 22px;\n    font-size: 14.5px;\n    line-height: 1.7;\n    color: var(--ramoa-text-soft);\n  }\n\n  \/* CTA final (sec 7) *\/\n  .rdw-cta {\n    position: relative;\n    max-width: 820px;\n    margin: 0 auto;\n    padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);\n    border-radius: 28px;\n    background:\n      radial-gradient(80% 100% at 50% 0%, rgba(45,212,255,0.08), transparent 70%),\n      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));\n    text-align: center;\n    overflow: hidden;\n    isolation: isolate;\n  }\n  .rdw-cta::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: 28px;\n    padding: 1.5px;\n    background: conic-gradient(from 0deg,\n      var(--ramoa-cyan), var(--ramoa-purple), var(--ramoa-pink), var(--ramoa-cyan));\n    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n    -webkit-mask-composite: xor;\n            mask-composite: exclude;\n    animation: rdw-spin 9s linear infinite;\n    z-index: -1;\n  }\n  @keyframes rdw-spin {\n    to { transform: rotate(360deg); }\n  }\n  .rdw-cta h3 {\n    margin: 0 0 16px;\n    font-size: clamp(24px, 3vw, 34px);\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  }\n  .rdw-cta p {\n    margin: 0 0 30px;\n    font-size: 15.5px;\n    line-height: 1.65;\n    color: var(--ramoa-text-soft);\n    max-width: 560px;\n    margin-left: auto; margin-right: auto;\n  }\n  .rdw-btn {\n    display: inline-flex; align-items: center; gap: 12px;\n    padding: 15px 28px;\n    border-radius: 999px;\n    border: 1px solid rgba(45,212,255,0.45);\n    background: rgba(45,212,255,0.04);\n    color: var(--ramoa-text);\n    font-family: var(--ramoa-font);\n    font-size: 14.5px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-decoration: none;\n    transition: all .3s ease;\n  }\n  .rdw-btn:hover {\n    background: rgba(45,212,255,0.10);\n    border-color: var(--ramoa-cyan);\n    box-shadow: 0 0 30px rgba(45,212,255,0.30);\n  }\n  .rdw-btn-dot {\n    width: 8px; height: 8px;\n    border-radius: 50%;\n    background: var(--ramoa-cyan);\n    box-shadow: 0 0 12px var(--ramoa-cyan);\n    animation: rdw-pulse 1.6s ease-in-out infinite;\n  }\n  .rdw-btn svg {\n    width: 16px; height: 16px;\n    transition: transform .3s ease;\n  }\n  .rdw-btn:hover svg { transform: translateX(4px); }\n\n  \/* Responsive *\/\n  @media (max-width: 960px) {\n    .rdw-micro, .rdw-tipos, .rdw-difs, .rdw-perfis {\n      grid-template-columns: 1fr;\n    }\n    .rdw-timeline {\n      grid-template-columns: 1fr;\n      gap: 32px;\n    }\n    .rdw-timeline::before {\n      top: 0; bottom: 0;\n      left: 28px; right: auto;\n      width: 2px; height: auto;\n      background: linear-gradient(180deg,\n        transparent 0%,\n        var(--ramoa-cyan) 20%,\n        var(--ramoa-purple) 80%,\n        transparent 100%);\n    }\n    .rdw-step { text-align: left; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }\n    .rdw-step-num { margin: 0; }\n    .rdw-dcard { flex-direction: column; }\n  }\n<\/style>\n\n<div class=\"rdw\">\n\n  <!-- SECTION 1 -->\n  <section class=\"rdw-section rdw-padrao\">\n    <div class=\"rdw-container\">\n      <span class=\"rdw-eyebrow\">O QUE FAZEMOS<\/span>\n      <h2 class=\"rdw-h2\">Seu site \u00e9 seu <span class=\"rdw-grad\">vendedor 24 horas<\/span> por dia. Fa\u00e7a com que ele venda.<\/h2>\n      <p class=\"rdw-lede\">Um site bem constru\u00eddo n\u00e3o \u00e9 s\u00f3 visual: \u00e9 estrutura, performance, conte\u00fado e estrat\u00e9gia trabalhando juntos. Na RAMOA, criamos sites institucionais, landing pages e lojas virtuais pensados para gerar resultado real, n\u00e3o apenas presen\u00e7a online.<\/p>\n\n      <div class=\"rdw-micro\">\n        <div class=\"rdw-mcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg><\/div>\n          <h3>Performance<\/h3>\n          <p>Sites r\u00e1pidos, otimizados e prontos para receber tr\u00e1fego pago e org\u00e2nico.<\/p>\n        <\/div>\n        <div class=\"rdw-mcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg><\/div>\n          <h3>SEO t\u00e9cnico<\/h3>\n          <p>Estrutura preparada para o Google ler, entender e ranquear sua marca.<\/p>\n        <\/div>\n        <div class=\"rdw-mcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><circle cx=\"12\" cy=\"12\" r=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"1.5\"\/><\/svg><\/div>\n          <h3>Convers\u00e3o<\/h3>\n          <p>Cada elemento posicionado para transformar visitas em contatos qualificados.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 2 -->\n  <section class=\"rdw-section rdw-padrao rdw-grade\">\n    <div class=\"rdw-container\">\n      <span class=\"rdw-eyebrow\">O QUE CONSTRU\u00cdMOS<\/span>\n      <h2 class=\"rdw-h2\">Da p\u00e1gina \u00fanica ao ecossistema digital completo.<\/h2>\n      <p class=\"rdw-lede\">Cada neg\u00f3cio tem um momento, um p\u00fablico e um objetivo. A RAMOA desenvolve diferentes tipos de site, sempre com a mesma base t\u00e9cnica e o mesmo cuidado com performance, design e estrat\u00e9gia.<\/p>\n\n      <div class=\"rdw-tipos\">\n        <article class=\"rdw-tcard\">\n          <div class=\"rdw-tnum\">01<\/div>\n          <h3>Sites Institucionais<\/h3>\n          <p>Para empresas que precisam apresentar sua marca, servi\u00e7os e diferenciais com autoridade e clareza. Ideal para B2B, consultorias e profissionais liberais.<\/p>\n          <div class=\"rdw-tags\"><span class=\"rdw-tag\">Apresenta\u00e7\u00e3o<\/span><span class=\"rdw-tag\">Autoridade<\/span><span class=\"rdw-tag\">B2B<\/span><\/div>\n        <\/article>\n        <article class=\"rdw-tcard\">\n          <div class=\"rdw-tnum\">02<\/div>\n          <h3>Landing Pages<\/h3>\n          <p>P\u00e1ginas focadas em convers\u00e3o para campanhas de tr\u00e1fego pago. Estrutura otimizada para uma \u00fanica oferta, com hierarquia visual que conduz o visitante \u00e0 a\u00e7\u00e3o.<\/p>\n          <div class=\"rdw-tags\"><span class=\"rdw-tag\">Google Ads<\/span><span class=\"rdw-tag\">Meta Ads<\/span><span class=\"rdw-tag\">Capta\u00e7\u00e3o<\/span><\/div>\n        <\/article>\n        <article class=\"rdw-tcard\">\n          <div class=\"rdw-tnum\">03<\/div>\n          <h3>Lojas Virtuais<\/h3>\n          <p>E-commerce completo para vender online com seguran\u00e7a, integra\u00e7\u00e3o de pagamento e fluxo de checkout otimizado para reduzir abandono de carrinho.<\/p>\n          <div class=\"rdw-tags\"><span class=\"rdw-tag\">E-commerce<\/span><span class=\"rdw-tag\">Pagamentos<\/span><span class=\"rdw-tag\">Log\u00edstica<\/span><\/div>\n        <\/article>\n        <article class=\"rdw-tcard\">\n          <div class=\"rdw-tnum\">04<\/div>\n          <h3>Plataformas Sob Medida<\/h3>\n          <p>Sites com funcionalidades personalizadas: \u00e1reas de membro, integra\u00e7\u00f5es com sistemas, automa\u00e7\u00f5es e regras de neg\u00f3cio espec\u00edficas do seu modelo.<\/p>\n          <div class=\"rdw-tags\"><span class=\"rdw-tag\">Custom<\/span><span class=\"rdw-tag\">Integra\u00e7\u00f5es<\/span><span class=\"rdw-tag\">Automa\u00e7\u00e3o<\/span><\/div>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 3 -->\n  <section class=\"rdw-section rdw-destaque\">\n    <div class=\"rdw-container\">\n      <span class=\"rdw-eyebrow\">POR QUE RAMOA<\/span>\n      <h2 class=\"rdw-h2\">N\u00e3o fazemos sites bonitos. Fazemos sites <span class=\"rdw-grad\">que funcionam<\/span>.<\/h2>\n      <p class=\"rdw-lede\">Est\u00e9tica importa, mas n\u00e3o basta. Veja o que diferencia um site RAMOA de uma entrega comum de ag\u00eancia.<\/p>\n\n      <div class=\"rdw-difs\">\n        <div class=\"rdw-dcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg><\/div>\n          <div>\n            <h3>Pensado para escalar com tr\u00e1fego pago<\/h3>\n            <p>Estrutura, velocidade e tags preparadas para campanhas no Google, Meta e LinkedIn desde o primeiro dia.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"rdw-dcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg><\/div>\n          <div>\n            <h3>SEO t\u00e9cnico aplicado no c\u00f3digo<\/h3>\n            <p>Sem\u00e2ntica HTML, schema markup, sitemap e otimiza\u00e7\u00f5es que fazem diferen\u00e7a real no ranqueamento org\u00e2nico.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"rdw-dcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><\/div>\n          <div>\n            <h3>Velocidade real, n\u00e3o s\u00f3 de teste<\/h3>\n            <p>Otimiza\u00e7\u00f5es de imagens, c\u00f3digo limpo e arquitetura leve para sites r\u00e1pidos em qualquer dispositivo e conex\u00e3o.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"rdw-dcard\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg><\/div>\n          <div>\n            <h3>Time integrado, sem terceiriza\u00e7\u00e3o<\/h3>\n            <p>Engenharia, design e estrat\u00e9gia conversam dentro do mesmo time. Sem ru\u00eddo, sem retrabalho, sem promessas perdidas.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 4 -->\n  <section class=\"rdw-section rdw-padrao\">\n    <div class=\"rdw-container\">\n      <span class=\"rdw-eyebrow\">NOSSO PROCESSO<\/span>\n      <h2 class=\"rdw-h2\">Um m\u00e9todo claro, do briefing \u00e0 publica\u00e7\u00e3o.<\/h2>\n      <p class=\"rdw-lede\">Todo desenvolvimento web da RAMOA segue 4 etapas estruturadas para reduzir retrabalho, alinhar expectativas e entregar um site pronto para crescer com sua empresa.<\/p>\n\n      <div class=\"rdw-timeline\">\n        <div class=\"rdw-step\">\n          <div class=\"rdw-step-num\">01<\/div>\n          <div>\n            <h3>Descoberta<\/h3>\n            <p>Entendemos seu p\u00fablico, seus concorrentes, seus objetivos e a jornada ideal do seu cliente.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"rdw-step\">\n          <div class=\"rdw-step-num\">02<\/div>\n          <div>\n            <h3>Arquitetura<\/h3>\n            <p>Definimos p\u00e1ginas, fluxos, hierarquia de informa\u00e7\u00e3o e refer\u00eancias de design alinhadas \u00e0 estrat\u00e9gia.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"rdw-step\">\n          <div class=\"rdw-step-num\">03<\/div>\n          <div>\n            <h3>Constru\u00e7\u00e3o<\/h3>\n            <p>Desenvolvemos o site com c\u00f3digo limpo, design responsivo e otimiza\u00e7\u00f5es t\u00e9cnicas desde a primeira linha.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"rdw-step\">\n          <div class=\"rdw-step-num\">04<\/div>\n          <div>\n            <h3>Lan\u00e7amento<\/h3>\n            <p>Publicamos, testamos em diferentes dispositivos e acompanhamos os primeiros dias no ar com ajustes finos.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 5 -->\n  <section class=\"rdw-section rdw-padrao\">\n    <div class=\"rdw-container\">\n      <span class=\"rdw-eyebrow\">PARA QUEM \u00c9<\/span>\n      <h2 class=\"rdw-h2\">Sites sob medida para diferentes momentos do seu neg\u00f3cio.<\/h2>\n      <p class=\"rdw-lede\">A RAMOA atende empresas que enxergam o site como ferramenta de crescimento, n\u00e3o como custo.<\/p>\n\n      <div class=\"rdw-perfis\">\n        <div class=\"rdw-perfil\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\/><\/svg><\/div>\n          <h3>Empresas em estrutura\u00e7\u00e3o digital<\/h3>\n          <p>Para quem est\u00e1 montando a presen\u00e7a online com base s\u00f3lida desde o in\u00edcio.<\/p>\n        <\/div>\n        <div class=\"rdw-perfil\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><polyline points=\"17 6 23 6 23 12\"\/><\/svg><\/div>\n          <h3>Neg\u00f3cios que investem em tr\u00e1fego pago<\/h3>\n          <p>Para quem precisa de p\u00e1ginas otimizadas para Google Ads e Meta Ads.<\/p>\n        <\/div>\n        <div class=\"rdw-perfil\">\n          <div class=\"rdw-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"23 4 23 10 17 10\"\/><polyline points=\"1 20 1 14 7 14\"\/><path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"\/><\/svg><\/div>\n          <h3>Marcas em renova\u00e7\u00e3o<\/h3>\n          <p>Para empresas com site desatualizado que limita convers\u00e3o e credibilidade.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 6 \u2014 FAQ -->\n  <section class=\"rdw-section rdw-padrao\">\n    <div class=\"rdw-container\">\n      <span class=\"rdw-eyebrow\">D\u00daVIDAS COMUNS<\/span>\n      <h2 class=\"rdw-h2\">Perguntas frequentes sobre desenvolvimento web.<\/h2>\n\n      <div class=\"rdw-faq\">\n        <details class=\"rdw-q\">\n          <summary>Quanto tempo leva para entregar um site completo?\n            <span class=\"rdw-q-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/span>\n          <\/summary>\n          <div class=\"rdw-q-body\">Sites institucionais ficam prontos em m\u00e9dia entre 4 e 6 semanas. Landing pages em 2 a 3 semanas. Lojas virtuais e plataformas sob medida variam conforme o escopo definido na descoberta.<\/div>\n        <\/details>\n        <details class=\"rdw-q\">\n          <summary>O site \u00e9 otimizado para Google e mobile?\n            <span class=\"rdw-q-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/span>\n          <\/summary>\n          <div class=\"rdw-q-body\">Sim. Todos os sites da RAMOA s\u00e3o entregues com SEO t\u00e9cnico aplicado, design responsivo, otimiza\u00e7\u00e3o de velocidade e estrutura preparada para indexa\u00e7\u00e3o no Google.<\/div>\n        <\/details>\n        <details class=\"rdw-q\">\n          <summary>Posso editar o site sozinho depois da entrega?\n            <span class=\"rdw-q-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/span>\n          <\/summary>\n          <div class=\"rdw-q-body\">Sim. Entregamos o site em CMS amig\u00e1vel para edi\u00e7\u00e3o, com treinamento da sua equipe para atualizar textos, imagens e se\u00e7\u00f5es sem depender da ag\u00eancia.<\/div>\n        <\/details>\n        <details class=\"rdw-q\">\n          <summary>Voc\u00eas fazem integra\u00e7\u00e3o com Google Ads, Meta Ads e analytics?\n            <span class=\"rdw-q-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/span>\n          <\/summary>\n          <div class=\"rdw-q-body\">Sim. Todo site RAMOA \u00e9 entregue com tags de tr\u00e1fego, pixel do Meta, Google Analytics e Google Tag Manager configurados e prontos para campanhas.<\/div>\n        <\/details>\n        <details class=\"rdw-q\">\n          <summary>O dom\u00ednio e a hospedagem ficam comigo?\n            <span class=\"rdw-q-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/span>\n          <\/summary>\n          <div class=\"rdw-q-body\">Sim. Todo o dom\u00ednio, hospedagem e arquivos do site s\u00e3o registrados em seu nome, com acesso completo. A RAMOA tamb\u00e9m oferece suporte de infraestrutura, mas a propriedade \u00e9 sempre sua.<\/div>\n        <\/details>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 7 \u2014 CTA -->\n  <section class=\"rdw-section rdw-destaque\">\n    <div class=\"rdw-container\">\n      <div class=\"rdw-cta\">\n        <h3>Pronto para colocar no ar um site que trabalha pelo seu neg\u00f3cio?<\/h3>\n        <p>Conte sobre seu projeto e mostramos como podemos te ajudar a construir um site preparado para vender, ranquear e crescer. Resposta em at\u00e9 24 horas \u00fateis.<\/p>\n        <a class=\"rdw-btn\" href=\"\/contato\">\n          <span class=\"rdw-btn-dot\"><\/span>\n          Vamos Conversar\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Home \/ Servi\u00e7os \/ Desenvolvimento Web Desenvolvimento Web Sites &#038; Landing Pages que convertem visitas em clientes. Cria\u00e7\u00e3o de sites institucionais, landing pages e lojas virtuais pensados para explicar, gerar confian\u00e7a e transformar acessos em oportunidades reais de neg\u00f3cio. DESENVOLVIMENTO WEB IDENTIDADE VISUAL SOFTWARE SOB MEDIDA LOJA VIRTUAL TR\u00c1FEGO PAGO WORDPRESS REDES SOCIAIS LANDING PAGES [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5315","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/5315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/comments?post=5315"}],"version-history":[{"count":19,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/5315\/revisions"}],"predecessor-version":[{"id":5450,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/5315\/revisions\/5450"}],"up":[{"embeddable":true,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/1947"}],"wp:attachment":[{"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/media?parent=5315"}],"curies":[{"name":"Wordpress","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}