{"id":1949,"date":"2026-03-10T21:20:28","date_gmt":"2026-03-10T21:20:28","guid":{"rendered":"https:\/\/ramoadigital.com\/?page_id=1949"},"modified":"2026-05-22T17:38:03","modified_gmt":"2026-05-22T17:38:03","slug":"projects","status":"publish","type":"page","link":"https:\/\/ramoadigital.com\/en\/projetos\/","title":{"rendered":"Projects"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1949\" class=\"elementor elementor-1949\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f352b0 e-con-full e-flex e-con e-parent\" data-id=\"6f352b0\" 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-f1f026c elementor-widget elementor-widget-html\" data-id=\"f1f026c\" 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\n  <div class=\"ramoa-page-hero__inner\">\n    <nav class=\"ramoa-page-hero__breadcrumb\" aria-label=\"Breadcrumb\">\n      <a href=\"\/en\/\">Home<\/a>\n      <span aria-hidden=\"true\">\/<\/span>\n      <span>Projects<\/span>\n    <\/nav>\n\n    <span class=\"ramoa-page-hero__chip\">Projects<\/span>\n\n    <h1 class=\"ramoa-page-hero__title\" id=\"ramoaPageHeroTitle\">\n     Website and brand portfolio <br>and digital projects\n    <\/h1>\n\n    <p class=\"ramoa-page-hero__lead\">\n  Discover the digital projects developed by RAMOA: websites, platforms, identities <br>visuals that helped businesses grow and <span>gain market relevance<\/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;\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-0cb57a9 e-con-full e-flex e-con e-child\" data-id=\"0cb57a9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-95196cf e-con-full e-flex e-con e-child\" data-id=\"95196cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c008a0 elementor-widget elementor-widget-html\" data-id=\"8c008a0\" 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=\"RAMOA Services\">\n  <div class=\"ramoa-marquee-track\">\n    <span>Web Development<\/span>\n    <span>VISUAL IDENTITY<\/span>\n    <span>Custom software<\/span>\n    <span>Online store<\/span>\n    <span>PAID TRAFFIC<\/span>\n    <span>WORDPRESS<\/span>\n    <span>SOCIAL MEDIA<\/span>\n    <span>LANDING PAGES<\/span>\n    <span>SEO<\/span>\n    <span>DIGITAL INFRASTRUCTURE<\/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-005c61f e-con-full e-flex e-con e-parent\" data-id=\"005c61f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-211b876 elementor-widget elementor-widget-html\" data-id=\"211b876\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  RAMOA Digital \u2014 Section \"Nosso Portf\u00f3lio\" (v3 \u2014 alinhada ao Elementor Kit)\n  Self-contained: HTML + CSS + JS puro. Pronto para Elementor.\n\n  AJUSTES NESTA VERS\u00c3O:\n  1) Classes\/IDs do TEMPLATE renomeados de \"ramoa-services-*\" para \"rdig-pf-*\"\n     (e id \"ramoaServicesSection\" para \"rdigPfSection\") para evitar colis\u00e3o com\n     CSS global do tema\/Elementor\/plugins do WordPress. Classes espec\u00edficas do\n     portfolio (ramoa-portfolio__*, ramoa-card*) permanecem como estavam.\n  2) Tipografia do <h2> alinhada com o Elementor Kit (typography 5d167aa):\n       font-family: \"Outfit\", Sans-serif\n       font-size: 39px (mobile: 32px)\n       font-weight: 600\n       line-height: 1.2em\n       letter-spacing: -0.5px\n     For\u00e7ada com !important em todos os blocos (regra base, mobile e overrides).\n-->\n<section class=\"ramoa-portfolio-section rdig-pf-section\" id=\"rdigPfSection\" aria-label=\"Projects delivered by RAMOA Digital\">\n  <div class=\"rdig-pf-edge-fade\" aria-hidden=\"true\"><\/div>\n\n  <!-- Background layers: grade respirante + glows neon discretos -->\n  <div class=\"ramoa-portfolio__bg\" aria-hidden=\"true\">\n    <div class=\"ramoa-portfolio__grid\"><\/div>\n    <div class=\"ramoa-portfolio__glow ramoa-portfolio__glow--a\"><\/div>\n    <div class=\"ramoa-portfolio__glow ramoa-portfolio__glow--b\"><\/div>\n  <\/div>\n\n  <div class=\"ramoa-portfolio__container rdig-pf-inner\">\n\n    <div class=\"rdig-pf-stack\">\n\n      <!-- FAIXA 1: CASE EM DESTAQUE (Koelln) + bloco contextual lateral -->\n      <div class=\"ramoa-portfolio__grid-cards rdig-pf-grid rdig-pf-grid--featured\" role=\"list\" aria-label=\"Featured case\">\n\n        <!-- BLOCO CONTEXTUAL (30% \u00e0 direita do Koelln) -->\n        <aside class=\"rdig-pf-context\" aria-label=\"About Our Projects\">\n          <span class=\"rdig-pf-context__eyebrow\">About Our Projects<\/span>\n          <h2 class=\"rdig-pf-context__title\">\n            Each client has a <strong>different story<\/strong>.\n          <\/h2>\n          <p class=\"rdig-pf-context__text\">\n            Before any line of code or design, we dive into the client's context: their audience, their market, their challenges, and the real business moment. Each project is born from this strategic listening, uniting aesthetics, technology, and positioning to create a digital presence with its own identity, clear messaging, and growth potential.\n          <\/p>\n        <\/aside>\n\n      <!-- CARD 1 \u2014 Koelln Advocacia -->\n      <article class=\"ramoa-card ramoa-card--koelln ramoa-card--featured\" role=\"listitem\"\n        style=\"          --c-accent-1:#B69561;          --c-accent-2:#FFF3D6;          --c-deep:#2B2118;          --c-bg-1:#3a2a18;          --c-bg-2:#13090a;          --c-tag-bg:rgba(182,149,97,.18);          --c-tag-border:rgba(255,243,214,.22);          --c-cat:#F3DFBA;          --photo-pos:75% 18%;          --photo-scale:.86;        \">\n        <a class=\"ramoa-card__link\" href=\"https:\/\/koellnadvogada.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open Koelln Law Project\">\n          <span class=\"ramoa-card__open\" aria-hidden=\"true\">\n            <svg viewbox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n          <\/span>\n\n          <div class=\"ramoa-card__media\">\n            <img decoding=\"async\" class=\"ramoa-card__mark\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/sandra-koelln-advocacia-monograma-sk.png\" alt=\"\" aria-hidden=\"true\">\n            <img decoding=\"async\" class=\"ramoa-card__photo\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/sandra-koelln-advogada.png\" alt=\"Sandra Koelln, attorney-at-law\">\n            <div class=\"ramoa-card__panel\">\n              <span class=\"ramoa-card__panel-eyebrow\">International advocacy<\/span>\n              <span class=\"ramoa-card__panel-title\">Brazil \u00b7 Germany \u00b7 Portugal<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"ramoa-card__body\">\n            <span class=\"ramoa-card__category\">Institutional website<\/span>\n            <h3 class=\"ramoa-card__title\">Koelln Law Firm<\/h3>\n            <p class=\"ramoa-card__desc\">RAMOA structured the digital presence of an international law firm, creating a bilingual institutional website, a cohesive visual identity, and a blog optimized to be found by those seeking legal support between Brazil, Germany, and Portugal.<\/p>\n            <ul class=\"ramoa-card__tags\">\n              <li>Institutional website<\/li>\n              <li>Visual identity<\/li>\n              <li>Blog<\/li>\n              <li>Found on Google<\/li>\n            <\/ul>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <\/div>\n      <!-- \/FAIXA 1 -->\n\n      <!-- FAIXA 2: CASES SECUND\u00c1RIOS (3 menores) -->\n      <div class=\"ramoa-portfolio__grid-cards rdig-pf-grid rdig-pf-grid--secondary\" role=\"list\" aria-label=\"Other delivered projects\">\n\n      <!-- CARD 2 \u2014 Mari Hoffmann \/ Liebe -->\n      <article class=\"ramoa-card ramoa-card--mari ramoa-card--compact\" role=\"listitem\"\n        style=\"          --c-accent-1:#E36813;          --c-accent-2:#FFC53F;          --c-deep:#512E24;          --c-bg-1:#3a1f1a;          --c-bg-2:#181313;          --c-tag-bg:rgba(227,104,19,.16);          --c-tag-border:rgba(255,197,63,.25);          --c-cat:#FFC53F;          --photo-pos:78% center;          --photo-scale:.92;        \">\n        <a class=\"ramoa-card__link\" href=\"https:\/\/mari-hoffmann.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open Project Love \u2014 The Foundation for Everything\">\n          <span class=\"ramoa-card__open\" aria-hidden=\"true\">\n            <svg viewbox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n          <\/span>\n\n          <div class=\"ramoa-card__media\">\n            <img decoding=\"async\" class=\"ramoa-card__mark\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/marca-mari-hoffmann.png\" alt=\"\" aria-hidden=\"true\">\n            <img decoding=\"async\" class=\"ramoa-card__photo ramoa-card__photo--contain\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/exemplar-livro-liebe.png\" alt=\"Book Love \u2013 The Foundation for Everything\">\n            <div class=\"ramoa-card__panel\">\n              <span class=\"ramoa-card__panel-eyebrow\">Author's book<\/span>\n              <span class=\"ramoa-card__panel-title\">Identity, message, and purchase<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"ramoa-card__body\">\n            <span class=\"ramoa-card__category\">Landing page<\/span>\n            <h3 class=\"ramoa-card__title\">Love\u2014The Foundation for Everything<\/h3>\n            <p class=\"ramoa-card__desc\">Landing page to present the book, strengthen the author's identity, and direct readers to purchase channels.<\/p>\n            <ul class=\"ramoa-card__tags\">\n              <li>Landing page<\/li>\n              <li>Visual identity<\/li>\n              <li>SEO<\/li>\n              <li>Amazon \u00b7 Novum \u00b7 Thalia<\/li>\n            <\/ul>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- CARD 3 \u2014 Gabrielle Coelho -->\n      <article class=\"ramoa-card ramoa-card--gabi ramoa-card--compact\" role=\"listitem\"\n        style=\"          --c-accent-1:#6F2F79;          --c-accent-2:#E4B2D3;          --c-deep:#2B1744;          --c-bg-1:#3a1f5a;          --c-bg-2:#150a2e;          --c-tag-bg:rgba(172,191,221,.16);          --c-tag-border:rgba(228,178,211,.28);          --c-cat:#E4B2D3;          --photo-pos:78% 18%;          --photo-scale:.82;        \">\n        <a class=\"ramoa-card__link\" href=\"https:\/\/psicogabriellecoelho.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open project Psychologist Gabrielle Coelho\">\n          <span class=\"ramoa-card__open\" aria-hidden=\"true\">\n            <svg viewbox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n          <\/span>\n\n          <div class=\"ramoa-card__media\">\n            <img decoding=\"async\" class=\"ramoa-card__mark\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/marca-psicologa-gabriele-coelho-scaled.png\" alt=\"\" aria-hidden=\"true\">\n            <img decoding=\"async\" class=\"ramoa-card__photo\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/psicologa-gabriele-coelho-livros.png\" alt=\"Psychologist Gabrielle Coelho\">\n            <div class=\"ramoa-card__panel\">\n              <span class=\"ramoa-card__panel-eyebrow\">Emotional care<\/span>\n              <span class=\"ramoa-card__panel-title\">Clarity, welcome, and trust<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"ramoa-card__body\">\n            <span class=\"ramoa-card__category\">Landing page<\/span>\n            <h3 class=\"ramoa-card__title\">Psychologist Gabrielle Coelho<\/h3>\n            <p class=\"ramoa-card__desc\">Professional landing page to present online psychological support with clarity and authority.<\/p>\n            <ul class=\"ramoa-card__tags\">\n              <li>Landing page<\/li>\n              <li>Visual identity<\/li>\n              <li>Qualified lead<\/li>\n            <\/ul>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <!-- CARD 4 \u2014 Portal Despertar Essencial -->\n      <article class=\"ramoa-card ramoa-card--portal ramoa-card--compact\" role=\"listitem\"\n        style=\"          --c-accent-1:#205074;          --c-accent-2:#5BBE6B;          --c-deep:#0E084E;          --c-bg-1:#143a5a;          --c-bg-2:#08102a;          --c-tag-bg:rgba(32,80,116,.28);          --c-tag-border:rgba(243,223,186,.22);          --c-cat:#F3DFBA;          --photo-pos:78% 18%;          --photo-scale:.72;        \">\n        <a class=\"ramoa-card__link\" href=\"https:\/\/portaldespertaressencial.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open project Essential Awakening Portal\">\n          <span class=\"ramoa-card__open\" aria-hidden=\"true\">\n            <svg viewbox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"\/><path d=\"M8 7h9v9\"\/><\/svg>\n          <\/span>\n\n          <div class=\"ramoa-card__media\">\n            <img decoding=\"async\" class=\"ramoa-card__mark\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/marca-portal-despertar-essencial.png\" alt=\"\" aria-hidden=\"true\">\n            <img decoding=\"async\" class=\"ramoa-card__photo\" src=\"https:\/\/ramoadigital.com\/wp-content\/uploads\/2026\/05\/cida-gomes-teraputa-holistica.png\" alt=\"Cida Gomes, holistic therapist\">\n            <div class=\"ramoa-card__panel\">\n              <span class=\"ramoa-card__panel-eyebrow\">Therapeutic portal<\/span>\n              <span class=\"ramoa-card__panel-title\">Care, balance, and digital presence<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"ramoa-card__body\">\n            <span class=\"ramoa-card__category\">Site + Content<\/span>\n            <h3 class=\"ramoa-card__title\">Essential Awakening Portal<\/h3>\n            <p class=\"ramoa-card__desc\">A clear and welcoming site to present therapeutic services and structure the brand's digital presence.<\/p>\n            <ul class=\"ramoa-card__tags\">\n              <li>Professional website<\/li>\n              <li>Social networks<\/li>\n              <li>Visual identity<\/li>\n            <\/ul>\n          <\/div>\n        <\/a>\n      <\/article>\n\n      <\/div>\n      <!-- \/FAIXA 2 -->\n\n    <\/div>\n    <!-- \/STACK -->\n  <\/div>\n<\/section>\n\n<style>\n  .ramoa-portfolio-section{\n    --rp-black:#020101;\n    --rp-purple-deep:#0B0218;\n    --rp-purple:#594BE7;\n    --rp-magenta:#FF2FDA;\n    --rp-pink:#F183C7;\n    --rp-cyan:#2DD4FF;\n    --rp-blue-deep:#050914;\n    --rp-white:#FFFFFF;\n\n    position:relative;\n    isolation:isolate;\n    overflow:hidden;\n    padding:clamp(64px,8vw,120px) 0;\n    \/* Paleta alinhada \u00e0 home\/sobre: predomin\u00e2ncia de azul profundo,\n       glows neon como detalhe \u2014 nunca como cor dominante.\n       Sequ\u00eancia de camadas (de baixo pra cima):\n       1. base linear vertical em azul\/preto\n       2. glow cyan no topo central (frio, equilibra os demais)\n       3. glow roxo discreto no canto inferior esquerdo\n       4. glow rosa MUITO sutil no canto inferior direito (assinatura RAMOA) *\/\n    background:\n      radial-gradient(60% 50% at 50% 0%, rgba(45,212,255,0.12), transparent 65%),\n      radial-gradient(50% 40% at 0% 100%, rgba(89,75,231,0.10), transparent 65%),\n      radial-gradient(45% 40% at 100% 100%, rgba(255,47,218,0.06), transparent 65%),\n      linear-gradient(180deg, #070210 0%, #0b0218 30%, #050914 70%, #070210 100%);\n    color:var(--rp-white);\n    font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    -webkit-font-smoothing:antialiased;\n  }\n\n  .ramoa-portfolio__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}\n  .ramoa-portfolio__glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.32;}\n  \/* Glow A: cyan no canto superior esquerdo (introduz o frio) *\/\n  .ramoa-portfolio__glow--a{width:480px;height:480px;left:-140px;top:-140px;background:radial-gradient(circle, rgba(45,212,255,0.38), transparent 65%);}\n  \/* Glow B: rosa MUITO discreto no canto inferior direito (s\u00f3 assinatura) *\/\n  .ramoa-portfolio__glow--b{width:520px;height:520px;right:-180px;bottom:-180px;background:radial-gradient(circle, rgba(255,47,218,0.22), transparent 65%);opacity:.28;}\n  .ramoa-portfolio__grid{\n    position:absolute;inset:0;\n    background-image:\n      linear-gradient(rgba(45,212,255,0.06) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(45,212,255,0.06) 1px, transparent 1px);\n    background-size: 48px 48px, 48px 48px;\n    \/* M\u00e1scara dupla: radial central + diagonal que faz a grade\n       \"aparecer e sumir\" em zonas conforme os glows pulsam *\/\n    -webkit-mask-image:\n      radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,0.55) 55%, transparent 88%),\n      linear-gradient(120deg, transparent 0%, #000 35%, #000 65%, transparent 100%);\n            mask-image:\n      radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,0.55) 55%, transparent 88%),\n      linear-gradient(120deg, transparent 0%, #000 35%, #000 65%, transparent 100%);\n    -webkit-mask-composite: source-in;\n            mask-composite: intersect;\n    opacity:.22;\n    animation: rdig-pf-grid-breathe 16s ease-in-out infinite;\n    will-change: opacity;\n  }\n\n  @keyframes rdig-pf-grid-breathe {\n    0%, 100% { opacity: 0.10; }\n    50%      { opacity: 0.26; }\n  }\n\n  .ramoa-portfolio__container{\n    position:relative;z-index:1;\n    width:100%;\n    max-width:1280px;\n    margin:0 auto;\n    padding:0 clamp(16px,3vw,32px);\n  }\n\n  .ramoa-portfolio__header{text-align:center;max-width:820px;margin:0 auto clamp(40px,5vw,64px);}\n  .ramoa-portfolio__eyebrow{\n    display:inline-block;\n    padding:8px 18px;\n    border-radius:999px;\n    font-size:12px;letter-spacing:.18em;font-weight:600;\n    color:#fff;\n    background:linear-gradient(135deg, rgba(89,75,231,.35), rgba(255,47,218,.35));\n    border:1px solid rgba(255,255,255,.18);\n    backdrop-filter: blur(8px);\n  }\n  .ramoa-portfolio__title{\n    margin:18px 0 10px;\n    font-size:clamp(32px,4.4vw,52px);\n    font-weight:700;letter-spacing:-.02em;line-height:1.1;\n  }\n  .ramoa-portfolio__highlight{\n    margin:0 0 18px;\n    font-size:clamp(22px,2.6vw,32px);\n    font-weight:700;letter-spacing:-.01em;\n    background:linear-gradient(90deg,#594BE7 0%,#AE5EB5 40%,#FF2FDA 70%,#F183C7 100%);\n    -webkit-background-clip:text;background-clip:text;color:transparent;\n  }\n  .ramoa-portfolio__lead{\n    margin:0 auto;max-width:680px;\n    font-size:clamp(14px,1.1vw,16px);line-height:1.65;\n    color:rgba(255,255,255,.72);\n  }\n\n  .ramoa-portfolio__grid-cards{\n    display:grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap:clamp(16px,1.6vw,24px);\n  }\n  @media (max-width: 1180px){ .ramoa-portfolio__grid-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }\n  @media (max-width: 640px){ .ramoa-portfolio__grid-cards{ grid-template-columns: 1fr; } }\n\n  \/* ============= CARD ============= *\/\n  .ramoa-card{\n    position:relative;\n    border-radius:22px;\n    background:\n      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),\n      linear-gradient(180deg, #14092B 0%, #0A0418 100%);\n    border:1px solid rgba(255,255,255,.08);\n    overflow:hidden;\n    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;\n    box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);\n  }\n  .ramoa-card::before{\n    content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;\n    background:linear-gradient(135deg, var(--c-accent-1), transparent 40%, var(--c-accent-2));\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; mask-composite: exclude;\n    opacity:.45; transition: opacity .35s ease;\n    pointer-events:none;\n  }\n  .ramoa-card::after{\n    content:\"\";position:absolute;inset:-1px;border-radius:inherit;\n    box-shadow: 0 0 0 0 transparent;\n    transition: box-shadow .35s ease;\n    pointer-events:none;\n  }\n  .ramoa-card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.16); }\n  .ramoa-card:hover::before{ opacity:.95; }\n  .ramoa-card:hover::after{ box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--c-accent-1) 65%, transparent); }\n\n  .ramoa-card__link{\n    display:flex;flex-direction:column;height:100%;\n    color:inherit;text-decoration:none;\n  }\n\n  .ramoa-card__open{\n    position:absolute;top:14px;right:14px;z-index:5;\n    width:36px;height:36px;border-radius:50%;\n    display:inline-flex;align-items:center;justify-content:center;\n    background:linear-gradient(135deg, var(--c-accent-1), var(--c-accent-2));\n    color:#fff;\n    box-shadow: 0 6px 20px -6px color-mix(in oklab, var(--c-accent-2) 70%, transparent);\n    transition: transform .35s ease;\n  }\n  .ramoa-card:hover .ramoa-card__open{ transform:scale(1.08) rotate(-4deg); }\n\n  \/* ============ MEDIA ============ *\/\n  .ramoa-card__media{\n    position:relative;\n    aspect-ratio: 4 \/ 3.2;\n    overflow:hidden;\n    background:\n      radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--c-accent-1) 55%, transparent), transparent 60%),\n      radial-gradient(120% 90% at 100% 100%, color-mix(in oklab, var(--c-accent-2) 28%, transparent), transparent 65%),\n      linear-gradient(160deg, var(--c-bg-1) 0%, var(--c-deep) 55%, var(--c-bg-2) 100%);\n    border-bottom:1px solid rgba(255,255,255,.06);\n  }\n  \/* grade discreta + borda interna *\/\n  .ramoa-card__media::before{\n    content:\"\";position:absolute;inset:0;\n    background-image:\n      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);\n    background-size: 32px 32px;\n    mask-image: radial-gradient(ellipse at 30% 30%, black 20%, transparent 75%);\n    opacity:.35;pointer-events:none;\n  }\n  .ramoa-card__media::after{\n    content:\"\";position:absolute;inset:8px;border-radius:14px;\n    border:1px solid rgba(255,255,255,.06);\n    pointer-events:none;\n  }\n\n  \/* MARCA grande no fundo (top-left), parcialmente cortada *\/\n  .ramoa-card__mark{\n    position:absolute;\n    top:-8%;left:-10%;\n    width:67%;height:auto;max-height:115%;\n    object-fit:contain;object-position:left top;\n    opacity:.18;\n    filter: drop-shadow(0 4px 18px rgba(0,0,0,.5));\n    pointer-events:none;\n    z-index:1;\n    mix-blend-mode: screen;\n  }\n  .ramoa-card--koelln .ramoa-card__mark{ opacity:.28; mix-blend-mode: normal; filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)) brightness(1.1); }\n  .ramoa-card--mari .ramoa-card__mark{ opacity:.22; }\n  .ramoa-card--gabi .ramoa-card__mark{ opacity:.20; }\n  .ramoa-card--portal .ramoa-card__mark{ opacity:.22; }\n\n  \/* PESSOA \/ LIVRO em primeiro plano, com menos zoom e respiro *\/\n  .ramoa-card__photo{\n    position:absolute;inset:0;\n    width:100%;height:100%;\n    object-fit:contain;\n    object-position: var(--photo-pos, center bottom);\n    transform: scale(var(--photo-scale, .85));\n    transform-origin: right bottom;\n    display:block;\n    z-index:2;\n    transition: transform .6s ease;\n  }\n  .ramoa-card__photo--contain{\n    \/* livro *\/\n    object-fit:contain;\n    transform-origin: right center;\n  }\n  .ramoa-card:hover .ramoa-card__photo{\n    transform: scale(calc(var(--photo-scale, .85) * 1.04));\n  }\n\n  \/* PAINEL de texto sobreposto (canto inferior esquerdo) *\/\n  .ramoa-card__panel{\n    position:absolute;\n    left:14px;bottom:14px;\n    z-index:3;max-width:72%;\n    padding:10px 14px 12px;\n    border-radius:14px;\n    background:\n      linear-gradient(135deg, color-mix(in oklab, var(--c-deep) 88%, transparent), color-mix(in oklab, var(--c-bg-2) 92%, transparent));\n    border:1px solid color-mix(in oklab, var(--c-accent-2) 40%, rgba(255,255,255,.1));\n    backdrop-filter: blur(10px);\n    box-shadow: 0 10px 30px -14px rgba(0,0,0,.6);\n    display:flex;flex-direction:column;gap:4px;\n  }\n  .ramoa-card__panel-eyebrow{\n    font-size:10.5px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;\n    color: var(--c-accent-2);\n    opacity:.95;\n  }\n  .ramoa-card__panel-title{\n    font-size:14px;line-height:1.25;font-weight:700;color:#fff;letter-spacing:-.005em;\n  }\n\n  \/* ============= BODY ============= *\/\n  .ramoa-card__body{\n    padding:20px 20px 22px;\n    display:flex;flex-direction:column;gap:10px;\n    flex:1;\n  }\n  .ramoa-card__category{\n    font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;\n    color: var(--c-cat, #FF2FDA);\n  }\n  .ramoa-card__title{\n    margin:0;\n    font-size:clamp(18px,1.4vw,21px);\n    font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#fff;\n  }\n  .ramoa-card__desc{\n    margin:0;\n    font-size:13.5px;line-height:1.55;\n    color:rgba(255,255,255,.7);\n  }\n  .ramoa-card__tags{\n    list-style:none;margin:8px 0 0;padding:0;\n    display:flex;flex-wrap:wrap;gap:6px;\n  }\n  .ramoa-card__tags li{\n    font-size:11.5px;font-weight:600;\n    padding:6px 11px;border-radius:999px;\n    color:#fff;\n    background: var(--c-tag-bg, rgba(89,75,231,.22));\n    border:1px solid var(--c-tag-border, rgba(255,255,255,.1));\n  }\n\n  @media (max-width: 480px){\n    .ramoa-card__panel{ max-width:84%; }\n    .ramoa-card__panel-title{ font-size:13px; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .ramoa-card, .ramoa-card__photo, .ramoa-card__open{ transition:none; }\n  }\n  \/* RAMOA \u2014 Portf\u00f3lio Lovable: heran\u00e7a visual do c\u00f3digo antigo\n     Cores, tipografia e transi\u00e7\u00f5es baseadas em ramoa-portifolio.html *\/\n\n  .ramoa-portfolio-section,\n  .ramoa-portfolio-section * {\n    box-sizing: border-box;\n  }\n\n  .ramoa-portfolio-section {\n    min-height: 100svh !important;\n    padding: clamp(42px, 6vh, 72px) clamp(16px, 5vw, 72px) clamp(38px, 5vh, 62px) !important;\n    background:\n      radial-gradient(ellipse at 15% 16%, rgba(255, 47, 218, 0.28) 0%, rgba(255, 47, 218, 0.14) 18%, rgba(255, 47, 218, 0) 48%),\n      radial-gradient(ellipse at 86% 12%, rgba(89, 75, 231, 0.32) 0%, rgba(89, 75, 231, 0.15) 22%, rgba(89, 75, 231, 0) 52%),\n      radial-gradient(circle at 50% 95%, rgba(0, 136, 255, 0.14) 0%, rgba(0, 136, 255, 0.06) 22%, rgba(0, 136, 255, 0) 50%),\n      radial-gradient(ellipse at 50% 50%, rgba(11, 2, 24, 0.74) 0%, rgba(8, 1, 18, 0.42) 46%, rgba(2, 1, 1, 0) 78%),\n      #020101 !important;\n    font-family: inherit !important;\n  }\n\n  .ramoa-portfolio-section::before {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 34px;\n    width: min(680px, 74vw);\n    height: 1px;\n    transform: translateX(-50%);\n    background: linear-gradient(90deg, transparent, rgba(255, 47, 218, 0.72), rgba(89, 75, 231, 0.62), rgba(0, 136, 255, 0.42), transparent);\n    box-shadow:\n      0 0 18px rgba(255, 47, 218, 0.36),\n      0 0 30px rgba(89, 75, 231, 0.20);\n    pointer-events: none;\n  }\n\n  .ramoa-portfolio-section::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 54%;\n    width: min(920px, 76vw);\n    height: min(920px, 76vw);\n    transform: translate(-50%, -50%);\n    border-radius: 50%;\n    background:\n      radial-gradient(circle, transparent 0 34%, rgba(255, 47, 218, 0.10) 35%, transparent 38%),\n      radial-gradient(circle, transparent 0 50%, rgba(89, 75, 231, 0.10) 51%, transparent 54%),\n      radial-gradient(circle, transparent 0 66%, rgba(0, 136, 255, 0.06) 67%, transparent 70%);\n    filter: blur(1px) drop-shadow(0 0 18px rgba(255, 47, 218, 0.18));\n    opacity: 0.48;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .ramoa-portfolio__container {\n    max-width: 1440px !important;\n    width: min(1440px, 85%) !important;\n    padding: 0 !important;\n  }\n\n  .ramoa-portfolio__header {\n    max-width: 1040px !important;\n    margin: 0 auto clamp(28px, 4.5vh, 42px) !important;\n    padding-top: 22px !important;\n  }\n\n  .ramoa-portfolio__eyebrow {\n    display: inline-flex !important;\n    width: fit-content !important;\n    align-items: center !important;\n    margin-bottom: 10px !important;\n    padding: 7px 13px !important;\n    border-radius: 999px !important;\n    border: 1px solid rgba(255, 47, 218, 0.72) !important;\n    color: rgba(255, 255, 255, 0.94) !important;\n    background: linear-gradient(135deg, rgba(89, 75, 231, 0.38), rgba(255, 47, 218, 0.20)) !important;\n    box-shadow:\n      0 0 20px rgba(255, 47, 218, 0.32),\n      0 0 30px rgba(89, 75, 231, 0.16),\n      inset 0 0 14px rgba(255, 255, 255, 0.05) !important;\n    font-size: 10px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.16em !important;\n    text-transform: uppercase !important;\n  }\n\n  .ramoa-portfolio__title {\n    max-width: 1100px !important;\n    margin: 0 auto !important;\n    color: #ffffff !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    line-height: 0.96 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.07em !important;\n    text-shadow:\n      0 0 18px rgba(89, 75, 231, 0.32),\n      0 0 32px rgba(255, 47, 218, 0.20),\n      0 2px 16px rgba(5, 0, 11, 0.80) !important;\n  }\n\n  .ramoa-portfolio__highlight {\n    margin: 0 0 18px !important;\n    color: #ffffff !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    line-height: 0.96 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.07em !important;\n    background: linear-gradient(90deg, #ffffff 0%, #ff2fda 34%, #F183C7 58%, #594BE7 86%, #0088ff 100%) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    filter: drop-shadow(0 0 16px rgba(255, 47, 218, 0.32)) !important;\n  }\n\n  .ramoa-portfolio__lead {\n    max-width: 820px !important;\n    margin: 10px auto 0 !important;\n    color: rgba(255, 255, 255, 0.72) !important;\n    font-size: clamp(13px, 1vw, 16px) !important;\n    line-height: 1.45 !important;\n    font-weight: 500 !important;\n  }\n\n  .ramoa-portfolio__grid-cards {\n    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n    gap: clamp(14px, 1.35vw, 22px) !important;\n  }\n\n  .ramoa-card {\n    height: clamp(540px, 64vh, 690px) !important;\n    border-radius: 24px !important;\n    background:\n      radial-gradient(circle at 88% 12%, rgba(255, 47, 218, 0.14), transparent 30%),\n      radial-gradient(circle at 12% 88%, rgba(89, 75, 231, 0.16), transparent 34%),\n      linear-gradient(180deg, rgba(18, 28, 77, 0.46), rgba(1, 17, 41, 0.56)),\n      #05000B !important;\n    border: 1px solid rgba(255, 47, 218, 0.30) !important;\n    box-shadow:\n      0 0 0 1px rgba(89, 75, 231, 0.13),\n      0 0 20px rgba(255, 47, 218, 0.10),\n      0 18px 48px rgba(0, 0, 0, 0.34),\n      inset 0 0 30px rgba(255, 255, 255, 0.025) !important;\n    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;\n  }\n\n  .ramoa-card:hover {\n    transform: translateY(-8px) !important;\n    border-color: rgba(255, 47, 218, 0.70) !important;\n    box-shadow:\n      0 0 0 1px rgba(89, 75, 231, 0.28),\n      0 0 30px rgba(255, 47, 218, 0.30),\n      0 0 46px rgba(89, 75, 231, 0.20),\n      0 24px 70px rgba(0, 0, 0, 0.48),\n      inset 0 0 36px rgba(255, 47, 218, 0.04) !important;\n  }\n\n  .ramoa-card::before {\n    inset: 16px !important;\n    border-radius: 18px !important;\n    border: 1px solid rgba(255, 255, 255, 0.075) !important;\n    background-image:\n      linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px) !important;\n    background-size: 52px 52px !important;\n    opacity: 0.38 !important;\n    z-index: 1 !important;\n  }\n\n  .ramoa-card::after {\n    background:\n      radial-gradient(circle at 78% 15%, rgba(255, 47, 218, 0.22), transparent 32%),\n      radial-gradient(circle at 20% 82%, rgba(89, 75, 231, 0.16), transparent 34%),\n      linear-gradient(180deg, rgba(5, 0, 13, 0.08), rgba(5, 0, 13, 0.28)) !important;\n    transition: opacity 0.35s ease !important;\n  }\n\n  .ramoa-card:hover::after { opacity: 0.55 !important; }\n\n  .ramoa-card--koelln {\n    background:\n      radial-gradient(circle at 82% 16%, rgba(255, 243, 214, 0.18), transparent 30%),\n      radial-gradient(circle at 18% 88%, rgba(182, 149, 97, 0.18), transparent 34%),\n      linear-gradient(180deg, rgba(30, 21, 13, 0.84), rgba(5, 0, 11, 0.92)),\n      #020101 !important;\n    border-color: rgba(182, 149, 97, 0.46) !important;\n    box-shadow:\n      0 0 0 1px rgba(255, 243, 214, 0.08),\n      0 0 28px rgba(182, 149, 97, 0.16),\n      0 18px 48px rgba(0, 0, 0, 0.34),\n      inset 0 0 30px rgba(255, 243, 214, 0.025) !important;\n  }\n\n  .ramoa-card--koelln:hover {\n    border-color: rgba(255, 243, 214, 0.62) !important;\n    box-shadow:\n      0 0 0 1px rgba(182, 149, 97, 0.28),\n      0 0 34px rgba(182, 149, 97, 0.26),\n      0 0 48px rgba(255, 243, 214, 0.10),\n      0 24px 70px rgba(0, 0, 0, 0.48),\n      inset 0 0 36px rgba(255, 243, 214, 0.04) !important;\n  }\n\n  .ramoa-card--mari {\n    background:\n      radial-gradient(circle at 86% 18%, rgba(255, 197, 63, 0.16), transparent 30%),\n      radial-gradient(circle at 18% 86%, rgba(227, 104, 19, 0.14), transparent 34%),\n      linear-gradient(180deg, rgba(81, 46, 36, 0.62), rgba(24, 19, 19, 0.88)),\n      #181313 !important;\n    border-color: rgba(255, 197, 63, 0.28) !important;\n    box-shadow:\n      0 0 0 1px rgba(227, 104, 19, 0.10),\n      0 0 24px rgba(255, 146, 11, 0.10),\n      0 18px 48px rgba(0, 0, 0, 0.34),\n      inset 0 0 30px rgba(255, 197, 63, 0.022) !important;\n  }\n\n  .ramoa-card--mari:hover {\n    border-color: rgba(255, 197, 63, 0.56) !important;\n    box-shadow:\n      0 0 0 1px rgba(227, 104, 19, 0.22),\n      0 0 32px rgba(255, 146, 11, 0.26),\n      0 0 46px rgba(255, 197, 63, 0.10),\n      0 24px 70px rgba(0, 0, 0, 0.48),\n      inset 0 0 36px rgba(255, 197, 63, 0.04) !important;\n  }\n\n  .ramoa-card--portal {\n    background:\n      radial-gradient(circle at 84% 16%, rgba(243, 223, 186, 0.16), transparent 30%),\n      radial-gradient(circle at 18% 86%, rgba(32, 80, 116, 0.22), transparent 34%),\n      linear-gradient(180deg, rgba(32, 80, 116, 0.62), rgba(14, 8, 78, 0.78)),\n      #0E084E !important;\n    border-color: rgba(243, 223, 186, 0.28) !important;\n    box-shadow:\n      0 0 0 1px rgba(171, 121, 60, 0.10),\n      0 0 24px rgba(32, 80, 116, 0.18),\n      0 18px 48px rgba(0, 0, 0, 0.34),\n      inset 0 0 30px rgba(243, 223, 186, 0.025) !important;\n  }\n\n  .ramoa-card--portal:hover {\n    border-color: rgba(243, 223, 186, 0.56) !important;\n    box-shadow:\n      0 0 0 1px rgba(171, 121, 60, 0.22),\n      0 0 32px rgba(32, 80, 116, 0.30),\n      0 0 42px rgba(243, 223, 186, 0.12),\n      0 24px 70px rgba(0, 0, 0, 0.48),\n      inset 0 0 36px rgba(243, 223, 186, 0.04) !important;\n  }\n\n  .ramoa-card--gabi {\n    background:\n      radial-gradient(circle at 78% 14%, rgba(228, 178, 211, 0.48), transparent 32%),\n      radial-gradient(circle at 16% 84%, rgba(161, 202, 228, 0.34), transparent 38%),\n      linear-gradient(180deg, rgba(208, 178, 213, 0.36), rgba(111, 47, 121, 0.46) 48%, rgba(14, 8, 78, 0.78)),\n      #2b1744 !important;\n    border-color: rgba(228, 178, 211, 0.68) !important;\n    box-shadow:\n      0 0 0 1px rgba(172, 191, 221, 0.22),\n      0 0 30px rgba(228, 178, 211, 0.28),\n      0 18px 48px rgba(0, 0, 0, 0.34),\n      inset 0 0 34px rgba(228, 178, 211, 0.08) !important;\n  }\n\n  .ramoa-card--gabi:hover {\n    border-color: rgba(228, 178, 211, 0.88) !important;\n    box-shadow:\n      0 0 0 1px rgba(172, 191, 221, 0.34),\n      0 0 34px rgba(228, 178, 211, 0.46),\n      0 0 44px rgba(161, 202, 228, 0.20),\n      0 24px 70px rgba(0, 0, 0, 0.48),\n      inset 0 0 40px rgba(228, 178, 211, 0.10) !important;\n  }\n\n  .ramoa-card__media {\n    flex: 0 0 46% !important;\n    min-height: 0 !important;\n    border-bottom: 1px solid rgba(255, 47, 218, 0.16) !important;\n  }\n\n  .ramoa-card--koelln .ramoa-card__media {\n    background:\n      radial-gradient(circle at 12% 18%, rgba(255, 243, 214, 0.18), transparent 30%),\n      radial-gradient(circle at 86% 86%, rgba(182, 149, 97, 0.22), transparent 32%),\n      linear-gradient(135deg, rgba(2, 1, 1, 0.98), rgba(45, 31, 18, 0.88) 52%, rgba(2, 1, 1, 0.96)) !important;\n  }\n\n  .ramoa-card--mari .ramoa-card__media {\n    background:\n      radial-gradient(circle at 22% 20%, rgba(255, 197, 63, 0.22), transparent 32%),\n      radial-gradient(circle at 82% 84%, rgba(227, 104, 19, 0.20), transparent 34%),\n      linear-gradient(135deg, rgba(24, 19, 19, 0.98), rgba(81, 46, 36, 0.88) 54%, rgba(24, 19, 19, 0.96)) !important;\n  }\n\n  .ramoa-card--portal .ramoa-card__media {\n    background:\n      radial-gradient(circle at 20% 18%, rgba(243, 223, 186, 0.22), transparent 32%),\n      radial-gradient(circle at 84% 86%, rgba(91, 190, 107, 0.14), transparent 34%),\n      linear-gradient(135deg, rgba(14, 8, 78, 0.98), rgba(32, 80, 116, 0.92) 55%, rgba(14, 8, 78, 0.96)) !important;\n  }\n\n  .ramoa-card--gabi .ramoa-card__media {\n    background:\n      radial-gradient(circle at 18% 16%, rgba(172, 191, 221, 0.36), transparent 34%),\n      radial-gradient(circle at 86% 80%, rgba(228, 178, 211, 0.46), transparent 38%),\n      linear-gradient(135deg, rgba(14, 8, 78, 0.86), rgba(111, 47, 121, 0.60) 48%, rgba(208, 178, 213, 0.34)) !important;\n  }\n\n  .ramoa-card__media::before {\n    inset: 14px !important;\n    border-radius: 18px !important;\n    background-size: 42px 42px !important;\n    opacity: 0.52 !important;\n  }\n\n  .ramoa-card__media::after {\n    background:\n      linear-gradient(180deg, rgba(5, 0, 13, 0.12), rgba(5, 0, 13, 0.54)),\n      radial-gradient(circle at 78% 18%, rgba(255, 47, 218, 0.20), transparent 34%),\n      radial-gradient(circle at 18% 88%, rgba(89, 75, 231, 0.18), transparent 34%) !important;\n  }\n\n  .ramoa-card__body {\n    padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px) clamp(28px, 2.4vw, 36px) !important;\n    gap: 0 !important;\n  }\n\n  .ramoa-card__category {\n    display: block !important;\n    margin-bottom: 8px !important;\n    color: rgba(255, 77, 227, 0.92) !important;\n    font-size: 11px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.14em !important;\n    text-transform: uppercase !important;\n    text-shadow:\n      0 0 10px rgba(255, 47, 218, 0.30),\n      0 0 18px rgba(89, 75, 231, 0.14) !important;\n  }\n\n  .ramoa-card__title {\n    margin: 0 0 10px !important;\n    color: #ffffff !important;\n    font-size: clamp(22px, 1.7vw, 30px) !important;\n    line-height: 0.98 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.055em !important;\n    text-shadow:\n      0 0 16px rgba(89, 75, 231, 0.24),\n      0 0 18px rgba(255, 47, 218, 0.14),\n      0 2px 14px rgba(5, 0, 11, 0.78) !important;\n  }\n\n  .ramoa-card__desc {\n    max-width: 430px !important;\n    margin: 0 !important;\n    color: rgba(255, 255, 255, 0.72) !important;\n    font-size: clamp(12px, 0.95vw, 14px) !important;\n    line-height: 1.42 !important;\n  }\n\n  .ramoa-card__tags {\n    margin: auto 0 0 !important;\n    padding-top: clamp(14px, 1.8vh, 18px) !important;\n    gap: 7px !important;\n  }\n\n  .ramoa-card__tags li {\n    padding: 7px 10px !important;\n    border-radius: 999px !important;\n    color: rgba(255, 255, 255, 0.92) !important;\n    background: linear-gradient(135deg, rgba(89, 75, 231, 0.44), rgba(255, 47, 218, 0.22)) !important;\n    border: 1px solid rgba(255, 47, 218, 0.38) !important;\n    box-shadow: 0 0 14px rgba(255, 47, 218, 0.12) !important;\n    font-size: 11.5px !important;\n    line-height: 1 !important;\n    font-weight: 800 !important;\n  }\n\n  .ramoa-card__panel {\n    left: 22px !important;\n    bottom: 18px !important;\n    z-index: 6 !important;\n    padding: 10px 12px !important;\n    border-radius: 14px !important;\n    backdrop-filter: blur(12px) !important;\n    -webkit-backdrop-filter: blur(12px) !important;\n    transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, transform 0.35s ease !important;\n  }\n\n  .ramoa-card__panel-eyebrow {\n    display: block !important;\n    margin-bottom: 4px !important;\n    font-size: 8.5px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.12em !important;\n    text-transform: uppercase !important;\n  }\n\n  .ramoa-card__panel-title {\n    display: block !important;\n    font-size: clamp(12px, 0.92vw, 15px) !important;\n    line-height: 1.12 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.035em !important;\n  }\n\n  .ramoa-card--koelln .ramoa-card__panel {\n    width: 54% !important;\n    border: 1px solid rgba(255, 243, 214, 0.44) !important;\n    background:\n      radial-gradient(circle at 78% 18%, rgba(255, 243, 214, 0.14), transparent 38%),\n      linear-gradient(135deg, rgba(35, 21, 12, 0.78), rgba(2, 1, 1, 0.76)) !important;\n    box-shadow:\n      0 14px 30px rgba(0, 0, 0, 0.34),\n      0 0 0 1px rgba(182, 149, 97, 0.14),\n      0 0 18px rgba(182, 149, 97, 0.13),\n      inset 0 0 20px rgba(255, 243, 214, 0.055) !important;\n  }\n\n  .ramoa-card--koelln .ramoa-card__panel-eyebrow { color: rgba(255, 243, 214, 0.84) !important; }\n  .ramoa-card--koelln .ramoa-card__panel-title { color: #fff3d6 !important; }\n\n  .ramoa-card--mari .ramoa-card__panel {\n    width: 48% !important;\n    border: 1px solid rgba(255, 197, 63, 0.36) !important;\n    background:\n      radial-gradient(circle at 78% 18%, rgba(255, 197, 63, 0.14), transparent 38%),\n      linear-gradient(135deg, rgba(81, 46, 36, 0.78), rgba(24, 19, 19, 0.76)) !important;\n    box-shadow:\n      0 14px 30px rgba(0, 0, 0, 0.34),\n      0 0 0 1px rgba(227, 104, 19, 0.12),\n      0 0 18px rgba(255, 146, 11, 0.12),\n      inset 0 0 20px rgba(255, 197, 63, 0.05) !important;\n  }\n\n  .ramoa-card--mari .ramoa-card__panel-eyebrow { color: rgba(255, 197, 63, 0.88) !important; }\n  .ramoa-card--mari .ramoa-card__panel-title { color: #fff3d6 !important; }\n\n  .ramoa-card--portal .ramoa-card__panel {\n    width: 50% !important;\n    border: 1px solid rgba(243, 223, 186, 0.36) !important;\n    background:\n      radial-gradient(circle at 78% 18%, rgba(243, 223, 186, 0.14), transparent 38%),\n      linear-gradient(135deg, rgba(32, 80, 116, 0.78), rgba(14, 8, 78, 0.76)) !important;\n    box-shadow:\n      0 14px 30px rgba(0, 0, 0, 0.34),\n      0 0 0 1px rgba(171, 121, 60, 0.12),\n      0 0 18px rgba(243, 223, 186, 0.12),\n      inset 0 0 20px rgba(243, 223, 186, 0.05) !important;\n  }\n\n  .ramoa-card--portal .ramoa-card__panel-eyebrow { color: rgba(243, 223, 186, 0.90) !important; }\n  .ramoa-card--portal .ramoa-card__panel-title { color: #F3DFBA !important; }\n\n  .ramoa-card--gabi .ramoa-card__panel {\n    width: 56% !important;\n    border: 1px solid rgba(228, 178, 211, 0.68) !important;\n    background:\n      radial-gradient(circle at 78% 18%, rgba(228, 178, 211, 0.28), transparent 38%),\n      linear-gradient(135deg, rgba(111, 47, 121, 0.76), rgba(14, 8, 78, 0.70)) !important;\n    box-shadow:\n      0 14px 30px rgba(0, 0, 0, 0.34),\n      0 0 0 1px rgba(172, 191, 221, 0.18),\n      0 0 20px rgba(228, 178, 211, 0.26),\n      inset 0 0 22px rgba(228, 178, 211, 0.08) !important;\n  }\n\n  .ramoa-card--gabi .ramoa-card__panel-eyebrow { color: rgba(218, 186, 210, 0.88) !important; }\n  .ramoa-card--gabi .ramoa-card__panel-title { color: #F7F3ED !important; }\n\n  .ramoa-card__open {\n    width: 40px !important;\n    height: 40px !important;\n    top: 18px !important;\n    right: 18px !important;\n    background:\n      radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.20), transparent 32%),\n      linear-gradient(135deg, rgba(89, 75, 231, 0.42), rgba(255, 47, 218, 0.26)) !important;\n    border: 1px solid rgba(255, 47, 218, 0.50) !important;\n    box-shadow:\n      0 0 18px rgba(255, 47, 218, 0.22),\n      0 0 24px rgba(89, 75, 231, 0.12),\n      inset 0 0 12px rgba(255, 255, 255, 0.04) !important;\n    opacity: 0 !important;\n    transform: translate3d(6px, -6px, 0) scale(0.86) !important;\n    transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease !important;\n  }\n\n  .ramoa-card:hover .ramoa-card__open {\n    opacity: 1 !important;\n    transform: translate3d(0, 0, 0) scale(1) !important;\n    border-color: rgba(255, 47, 218, 0.86) !important;\n    box-shadow:\n      0 0 12px rgba(255, 47, 218, 0.40),\n      0 0 18px rgba(89, 75, 231, 0.20),\n      inset 0 0 14px rgba(255, 255, 255, 0.055) !important;\n  }\n\n  .ramoa-card__photo,\n  .ramoa-card__mark {\n    transition: transform 0.55s ease, filter 0.55s ease, opacity 0.55s ease !important;\n  }\n\n  .ramoa-card:hover .ramoa-card__photo {\n    filter: saturate(1.08) contrast(1.07) brightness(0.82) !important;\n    transform: scale(calc(var(--photo-scale, .85) * 1.025)) translateY(-3px) !important;\n  }\n\n  .ramoa-card:hover .ramoa-card__mark {\n    opacity: 0.22 !important;\n    transform: scale(1.03) !important;\n  }\n\n  @media (max-width: 1180px) {\n    .ramoa-portfolio__container { width: min(100%, 92%) !important; }\n    .ramoa-portfolio__grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }\n    .ramoa-card { height: 620px !important; }\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-portfolio-section {\n      min-height: auto !important;\n      padding: 64px 14px 72px !important;\n      overflow: visible !important;\n      align-items: flex-start !important;\n    }\n\n    .ramoa-portfolio__container { width: 100% !important; }\n    .ramoa-portfolio__header { margin-bottom: 34px !important; }\n\n    .ramoa-portfolio__eyebrow {\n      font-size: 10px !important;\n      letter-spacing: 0.12em !important;\n    }\n\n    .ramoa-portfolio__title,\n    .ramoa-portfolio__highlight {\n      font-size: clamp(31px, 10vw, 42px) !important;\n      line-height: 1.02 !important;\n      letter-spacing: -0.06em !important;\n    }\n\n    .ramoa-portfolio__lead { font-size: 14px !important; }\n    .ramoa-portfolio__grid-cards { grid-template-columns: 1fr !important; gap: 14px !important; }\n    .ramoa-card { height: auto !important; min-height: 0 !important; border-radius: 20px !important; }\n    .ramoa-card:hover { transform: none !important; }\n    .ramoa-card__media { flex: 0 0 260px !important; min-height: 260px !important; }\n    .ramoa-card__body { padding-bottom: 30px !important; }\n  }\n  \/* RAMOA \u2014 Header do portf\u00f3lio: CSS exato do c\u00f3digo antigo adaptado ao HTML novo *\/\n  .ramoa-portfolio__header {\n    max-width: 1040px !important;\n    margin: 0 auto clamp(28px, 4.5vh, 42px) !important;\n    padding-top: 22px !important;\n    text-align: center !important;\n  }\n\n  .ramoa-portfolio__eyebrow {\n    display: inline-flex !important;\n    width: fit-content !important;\n    align-items: center !important;\n    margin-bottom: 10px !important;\n    padding: 7px 13px !important;\n    border-radius: 999px !important;\n    border: 1px solid rgba(255, 47, 218, 0.72) !important;\n    color: rgba(255, 255, 255, 0.94) !important;\n    background: linear-gradient(135deg, rgba(89, 75, 231, 0.38), rgba(255, 47, 218, 0.20)) !important;\n    box-shadow:\n      0 0 20px rgba(255, 47, 218, 0.32),\n      0 0 30px rgba(89, 75, 231, 0.16),\n      inset 0 0 14px rgba(255, 255, 255, 0.05) !important;\n    font-size: 10px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.16em !important;\n    text-transform: uppercase !important;\n  }\n\n  .ramoa-portfolio__title {\n    max-width: 1100px !important;\n    margin: 0 auto !important;\n    color: #ffffff !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    line-height: 0.96 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.07em !important;\n    text-shadow:\n      0 0 18px rgba(89, 75, 231, 0.32),\n      0 0 32px rgba(255, 47, 218, 0.20),\n      0 2px 16px rgba(5, 0, 11, 0.80) !important;\n  }\n\n  .ramoa-portfolio__highlight {\n    max-width: 1100px !important;\n    margin: 0 auto !important;\n    color: #ffffff !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    line-height: 0.96 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.07em !important;\n    background: linear-gradient(90deg, #ffffff 0%, #ff2fda 34%, #F183C7 58%, #594BE7 86%, #0088ff 100%) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    filter: drop-shadow(0 0 16px rgba(255, 47, 218, 0.32)) !important;\n  }\n\n  .ramoa-portfolio__lead {\n    max-width: 820px !important;\n    margin: 15px auto 0 !important;\n    color: rgba(255, 255, 255, 0.72) !important;\n    font-size: clamp(13px, 1vw, 16px) !important;\n    line-height: 1.45 !important;\n    font-weight: 500 !important;\n  }\n  \/* RAMOA \u2014 ajuste FINAL do header para copiar o visual antigo *\/\n  .ramoa-portfolio__header {\n    max-width: 1040px !important;\n    margin: 0 auto clamp(28px, 4.5vh, 42px) !important;\n    padding-top: 22px !important;\n    text-align: center !important;\n  }\n\n  .ramoa-portfolio__eyebrow {\n    display: inline-flex !important;\n    width: fit-content !important;\n    align-items: center !important;\n    justify-content: center !important;\n    margin: 0 auto 10px !important;\n    padding: 7px 13px !important;\n    border-radius: 999px !important;\n    border: 1px solid rgba(255, 47, 218, 0.72) !important;\n    color: rgba(255, 255, 255, 0.94) !important;\n    background: linear-gradient(135deg, rgba(89, 75, 231, 0.38), rgba(255, 47, 218, 0.20)) !important;\n    box-shadow:\n      0 0 20px rgba(255, 47, 218, 0.32),\n      0 0 30px rgba(89, 75, 231, 0.16),\n      inset 0 0 14px rgba(255, 255, 255, 0.05) !important;\n    font-size: 10px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.16em !important;\n    text-transform: uppercase !important;\n  }\n\n  .ramoa-portfolio__title {\n    max-width: 1100px !important;\n    margin: 0 auto !important;\n    color: #ffffff !important;\n    font-family: inherit !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    line-height: 0.96 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.07em !important;\n    text-align: center !important;\n    text-shadow:\n      0 0 18px rgba(89, 75, 231, 0.32),\n      0 0 32px rgba(255, 47, 218, 0.20),\n      0 2px 16px rgba(5, 0, 11, 0.80) !important;\n    filter: none !important;\n  }\n\n  .ramoa-portfolio__highlight {\n    display: block !important;\n    max-width: 1100px !important;\n    margin: 0 auto !important;\n    padding: 4px !important;\n    color: #ffffff !important;\n    font-family: inherit !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    line-height: 0.96 !important;\n    font-weight: 900 !important;\n    letter-spacing: -0.07em !important;\n    text-align: center !important;\n    background: linear-gradient(90deg, #ffffff 0%, #ff2fda 34%, #F183C7 58%, #594BE7 86%, #0088ff 100%) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    filter: drop-shadow(0 0 16px rgba(255, 47, 218, 0.32)) !important;\n    text-shadow: none !important;\n  }\n\n  .ramoa-portfolio__lead {\n    max-width: 820px !important;\n    margin: 15px auto 0 !important;\n    padding: 0 !important;\n    color: rgba(255, 255, 255, 0.72) !important;\n    font-family: inherit !important;\n    font-size: clamp(13px, 1vw, 16px) !important;\n    line-height: 1.45 !important;\n    font-weight: 500 !important;\n    text-align: center !important;\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-portfolio__title,\n    .ramoa-portfolio__highlight {\n      font-size: clamp(31px, 10vw, 42px) !important;\n      line-height: 1.02 !important;\n      letter-spacing: -0.06em !important;\n    }\n  }\n  \/* RAMOA \u2014 Card Koelln, Gabrielle e Portal: manter foto sempre ancorada no canto inferior direito *\/\n  .ramoa-card--koelln .ramoa-card__photo,\n  .ramoa-card--gabi .ramoa-card__photo,\n  .ramoa-card--portal .ramoa-card__photo {\n    object-position: right bottom !important;\n    transform-origin: right bottom !important;\n  }\n\n  \/* RAMOA \u2014 Gabrielle: colar imagem no canto inferior direito da \u00e1rea visual *\/\n  .ramoa-card--gabi .ramoa-card__photo {\n    inset: auto 0 0 auto !important;\n    width: auto !important;\n    height: 100% !important;\n    max-width: none !important;\n    object-fit: contain !important;\n    object-position: right bottom !important;\n    transform: scale(var(--photo-scale, .82)) !important;\n    transform-origin: right bottom !important;\n  }\n\n  .ramoa-card--gabi:hover .ramoa-card__photo {\n    transform: scale(calc(var(--photo-scale, .82) * 1.025)) !important;\n  }\n\n  \/* RAMOA \u2014 Portal\/Cida: colar imagem no canto inferior direito da \u00e1rea visual *\/\n  .ramoa-card--portal .ramoa-card__photo {\n    inset: auto 0 0 auto !important;\n    width: auto !important;\n    height: 100% !important;\n    max-width: none !important;\n    object-fit: contain !important;\n    object-position: right bottom !important;\n    transform: scale(var(--photo-scale, .78)) !important;\n    transform-origin: right bottom !important;\n  }\n\n  .ramoa-card--portal:hover .ramoa-card__photo {\n    transform: scale(calc(var(--photo-scale, .78) * 1.025)) !important;\n  }\n  \/* RAMOA \u2014 ampliar widgets\/pain\u00e9is de texto dos cards para evitar quebra em 3 linhas *\/\n  .ramoa-card__panel {\n    max-width: 78% !important;\n    min-width: 0 !important;\n  }\n\n  .ramoa-card--koelln .ramoa-card__panel {\n    width: 68% !important;\n  }\n\n  .ramoa-card--mari .ramoa-card__panel {\n    width: 62% !important;\n  }\n\n  .ramoa-card--gabi .ramoa-card__panel {\n    width: 68% !important;\n  }\n\n  .ramoa-card--portal .ramoa-card__panel {\n    width: 68% !important;\n  }\n\n  .ramoa-card__panel-title {\n    max-width: 100% !important;\n  }\n\n  \/* RAMOA \u2014 deixar pain\u00e9is de texto mais transparentes para revelar melhor a imagem de fundo *\/\n  .ramoa-card__panel {\n    background:\n      linear-gradient(135deg, rgba(8, 3, 18, 0.48), rgba(20, 8, 34, 0.34)) !important;\n    backdrop-filter: blur(8px) !important;\n    -webkit-backdrop-filter: blur(8px) !important;\n  }\n\n  .ramoa-card--koelln .ramoa-card__panel {\n    background:\n      radial-gradient(circle at 78% 18%, rgba(255, 243, 214, 0.08), transparent 38%),\n      linear-gradient(135deg, rgba(35, 21, 12, 0.48), rgba(2, 1, 1, 0.38)) !important;\n  }\n\n  .ramoa-card--mari .ramoa-card__panel {\n    background:\n      radial-gradient(circle at 78% 18%, rgba(255, 197, 63, 0.08), transparent 38%),\n      linear-gradient(135deg, rgba(81, 46, 36, 0.46), rgba(24, 19, 19, 0.36)) !important;\n  }\n\n  .ramoa-card--gabi .ramoa-card__panel {\n    background:\n      radial-gradient(circle at 78% 18%, rgba(228, 178, 211, 0.14), transparent 38%),\n      linear-gradient(135deg, rgba(111, 47, 121, 0.46), rgba(14, 8, 78, 0.36)) !important;\n  }\n\n  .ramoa-card--portal .ramoa-card__panel {\n    background:\n      radial-gradient(circle at 78% 18%, rgba(243, 223, 186, 0.08), transparent 38%),\n      linear-gradient(135deg, rgba(32, 80, 116, 0.46), rgba(14, 8, 78, 0.36)) !important;\n  }\n  \/* RAMOA \u2014 remover escurecimento\/filtro sobre a \u00e1rea de textos dos cards *\/\n  .ramoa-card::after {\n    z-index: 0 !important;\n    pointer-events: none !important;\n  }\n\n  .ramoa-card__link {\n    position: relative !important;\n    z-index: 2 !important;\n  }\n\n  .ramoa-card__body {\n    position: relative !important;\n    z-index: 5 !important;\n    filter: none !important;\n    opacity: 1 !important;\n    mix-blend-mode: normal !important;\n  }\n\n  .ramoa-card__category,\n  .ramoa-card__title,\n  .ramoa-card__desc,\n  .ramoa-card__tags,\n  .ramoa-card__tags li {\n    filter: none !important;\n    opacity: 1 !important;\n    mix-blend-mode: normal !important;\n  }\n\n  .ramoa-card__title {\n    color: #FFFFFF !important;\n    -webkit-text-fill-color: #FFFFFF !important;\n  }\n\n  .ramoa-card__desc {\n    color: rgba(255, 255, 255, 0.90) !important;\n  }\n\n  .ramoa-card__tags li {\n    color: #FFFFFF !important;\n    -webkit-text-fill-color: #FFFFFF !important;\n  }\n  \/* RAMOA \u2014 ativar mais cor\/visibilidade das marcas no fundo dos cards *\/\n  .ramoa-card__mark {\n    opacity: 0.34 !important;\n    filter: saturate(1.28) contrast(1.08) brightness(1.16) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45)) !important;\n  }\n\n  .ramoa-card--koelln .ramoa-card__mark {\n    opacity: 0.42 !important;\n    mix-blend-mode: normal !important;\n    filter: saturate(1.22) contrast(1.08) brightness(1.18) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.50)) !important;\n  }\n\n  .ramoa-card--mari .ramoa-card__mark {\n    opacity: 0.38 !important;\n    mix-blend-mode: screen !important;\n    filter: saturate(1.35) contrast(1.08) brightness(1.18) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45)) !important;\n  }\n\n  .ramoa-card--gabi .ramoa-card__mark {\n    opacity: 0.36 !important;\n    mix-blend-mode: screen !important;\n    filter: saturate(1.38) contrast(1.06) brightness(1.20) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.42)) !important;\n  }\n\n  .ramoa-card--portal .ramoa-card__mark {\n    opacity: 0.38 !important;\n    mix-blend-mode: screen !important;\n    filter: saturate(1.32) contrast(1.08) brightness(1.18) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.44)) !important;\n  }\n\n  .ramoa-card:hover .ramoa-card__mark {\n    opacity: 0.44 !important;\n    filter: saturate(1.42) contrast(1.10) brightness(1.22) drop-shadow(0 8px 26px rgba(0, 0, 0, 0.48)) !important;\n  }\n\n  \/* RAMOA \u2014 ajuste da marca de fundo apenas no card da Mari *\/\n  .ramoa-card--mari .ramoa-card__mark {\n    margin-top: 14px !important;\n    width: 85% !important;\n    left: -29% !important;\n  }\n\n  \/* RAMOA \u2014 efeito antigo aplicado ao subt\u00edtulo principal dentro do H2 *\/\n  .ramoa-portfolio__title .ramoa-portfolio__highlight {\n    display: inline !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    color: #ffffff !important;\n    font-family: inherit !important;\n    font-size: inherit !important;\n    line-height: inherit !important;\n    font-weight: 900 !important;\n    letter-spacing: inherit !important;\n    text-align: inherit !important;\n    background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      #ff2fda 34%,\n      #F183C7 58%,\n      #594BE7 86%,\n      #0088ff 100%\n    ) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    filter: drop-shadow(0 0 16px rgba(255, 47, 218, 0.32)) !important;\n    text-shadow: none !important;\n  }\n\n  \/* RAMOA \u2014 sombra\/glow real do subt\u00edtulo em degrad\u00ea, como no design original *\/\n  .ramoa-portfolio__title .ramoa-portfolio__highlight {\n    position: relative !important;\n    display: inline-block !important;\n    isolation: isolate !important;\n    overflow: visible !important;\n    background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      #ff2fda 34%,\n      #F183C7 58%,\n      #594BE7 86%,\n      #0088ff 100%\n    ) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    color: transparent !important;\n    text-shadow: none !important;\n    filter: none !important;\n  }\n\n  .ramoa-portfolio__title .ramoa-portfolio__highlight::before {\n    content: attr(data-text);\n    position: absolute;\n    inset: 0;\n    z-index: -1;\n    color: rgba(255, 47, 218, 0.42);\n    -webkit-text-fill-color: rgba(255, 47, 218, 0.42);\n    text-shadow:\n      0 0 10px rgba(255, 47, 218, 0.42),\n      0 0 24px rgba(255, 47, 218, 0.34),\n      0 0 44px rgba(89, 75, 231, 0.24),\n      0 8px 24px rgba(5, 0, 11, 0.78);\n    filter: blur(0.2px);\n    pointer-events: none;\n  }\n\n  .ramoa-portfolio__title .ramoa-portfolio__highlight::after {\n    content: attr(data-text);\n    position: absolute;\n    inset: 0;\n    z-index: -2;\n    color: rgba(255, 255, 255, 0.22);\n    -webkit-text-fill-color: rgba(255, 255, 255, 0.22);\n    filter: blur(7px);\n    transform: translate3d(-2px, 2px, 0);\n    pointer-events: none;\n  }\n\n  .ramoa-portfolio__title {\n    color: #ffffff !important;\n    text-shadow:\n      0 0 18px rgba(89, 75, 231, 0.32),\n      0 0 32px rgba(255, 47, 218, 0.20),\n      0 2px 16px rgba(5, 0, 11, 0.80) !important;\n  }\n  \/* RAMOA \u2014 HEADER\/T\u00cdTULOS: aplica\u00e7\u00e3o limpa do guia t\u00e9cnico *\/\n  .ramoa-portfolio__header {\n    max-width: 1040px !important;\n    margin: 0 auto clamp(28px, 4.5vh, 42px) !important;\n    padding-top: 22px !important;\n    text-align: center !important;\n  }\n\n  .ramoa-portfolio__eyebrow {\n    display: inline-flex !important;\n    width: fit-content !important;\n    align-items: center !important;\n    justify-content: center !important;\n    margin: 0 auto 10px !important;\n    padding: 7px 13px !important;\n    border-radius: 999px !important;\n    border: 1px solid rgba(255, 47, 218, 0.72) !important;\n    color: rgba(255, 255, 255, 0.94) !important;\n    background: linear-gradient(135deg, rgba(89, 75, 231, 0.38), rgba(255, 47, 218, 0.20)) !important;\n    box-shadow:\n      0 0 20px rgba(255, 47, 218, 0.32),\n      0 0 30px rgba(89, 75, 231, 0.16),\n      inset 0 0 14px rgba(255, 255, 255, 0.05) !important;\n    font-family: inherit !important;\n    font-size: 10px !important;\n    font-weight: 900 !important;\n    font-style: normal !important;\n    line-height: 1 !important;\n    letter-spacing: 0.16em !important;\n    text-transform: uppercase !important;\n  }\n\n  .ramoa-portfolio__title {\n    max-width: 1100px !important;\n    margin: 0 auto !important;\n    color: #ffffff !important;\n    font-family: inherit !important;\n    font-size: clamp(32px, 4.2vw, 66px) !important;\n    font-weight: 900 !important;\n    font-style: normal !important;\n    line-height: 0.96 !important;\n    letter-spacing: -0.07em !important;\n    text-align: center !important;\n    text-shadow:\n      0 0 18px rgba(89, 75, 231, 0.32),\n      0 0 32px rgba(255, 47, 218, 0.20),\n      0 2px 16px rgba(5, 0, 11, 0.80) !important;\n    filter: none !important;\n  }\n\n  .ramoa-portfolio__title .ramoa-portfolio__highlight,\n  .ramoa-portfolio__title strong {\n    display: inline !important;\n    margin: 0 !important;\n    padding: 0 5px 0 0 !important;\n    max-width: none !important;\n    color: #ffffff !important;\n    font-family: inherit !important;\n    font-size: inherit !important;\n    font-weight: 900 !important;\n    font-style: normal !important;\n    line-height: inherit !important;\n    letter-spacing: inherit !important;\n    text-align: inherit !important;\n    background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      #ff2fda 34%,\n      #F183C7 58%,\n      #594BE7 86%,\n      #0088ff 100%\n    ) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    filter: drop-shadow(0 0 16px rgba(255, 47, 218, 0.32)) !important;\n    text-shadow: none !important;\n    position: static !important;\n    isolation: auto !important;\n  }\n\n\n  .ramoa-portfolio__title .ramoa-portfolio__highlight::before,\n  .ramoa-portfolio__title .ramoa-portfolio__highlight::after {\n    content: none !important;\n    display: none !important;\n  }\n\n  .ramoa-portfolio__lead {\n    max-width: 820px !important;\n    margin: 15px auto 0 !important;\n    padding: 0 !important;\n    color: rgba(255, 255, 255, 0.72) !important;\n    font-family: inherit !important;\n    font-size: clamp(13px, 1vw, 16px) !important;\n    font-weight: 500 !important;\n    font-style: normal !important;\n    line-height: 1.45 !important;\n    letter-spacing: normal !important;\n    text-align: center !important;\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-portfolio__eyebrow {\n      font-size: 10px !important;\n      letter-spacing: 0.12em !important;\n    }\n\n    .ramoa-portfolio__title {\n      font-size: clamp(31px, 10vw, 42px) !important;\n      line-height: 1.02 !important;\n      letter-spacing: -0.06em !important;\n    }\n\n    .ramoa-portfolio__lead {\n      font-size: 14px !important;\n    }\n  }\n  \/* RAMOA \u2014 blindagem contra CSS global do WordPress\/Elementor nas imagens dos cards *\/\n  .ramoa-portfolio-section .ramoa-card__media {\n    position: relative !important;\n    overflow: hidden !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card__photo {\n    position: absolute !important;\n    inset: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n    max-width: none !important;\n    object-fit: contain !important;\n    object-position: var(--photo-pos, center bottom) !important;\n    transform: scale(var(--photo-scale, .85)) !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card__photo--contain {\n    object-fit: contain !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--koelln .ramoa-card__photo {\n    object-position: right bottom !important;\n    transform-origin: right bottom !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--mari .ramoa-card__photo {\n    object-position: var(--photo-pos, 78% center) !important;\n    transform-origin: right center !important;\n  }\n  \/* RAMOA \u2014 pain\u00e9is dos cards com largura flex\u00edvel conforme o conte\u00fado *\/\n  .ramoa-card__panel,\n  .ramoa-card--koelln .ramoa-card__panel,\n  .ramoa-card--mari .ramoa-card__panel,\n  .ramoa-card--gabi .ramoa-card__panel,\n  .ramoa-card--portal .ramoa-card__panel {\n    width: fit-content !important;\n    min-width: 0 !important;\n    max-width: calc(100% - 44px) !important;\n    padding: 10px 14px 12px !important;\n    align-items: flex-start !important;\n  }\n\n  .ramoa-card__panel-title {\n    width: auto !important;\n    max-width: 100% !important;\n    white-space: normal !important;\n    overflow-wrap: anywhere !important;\n    word-break: normal !important;\n    hyphens: auto !important;\n  }\n\n  .ramoa-card__panel-eyebrow {\n    width: auto !important;\n    max-width: 100% !important;\n    white-space: normal !important;\n    overflow-wrap: anywhere !important;\n    word-break: normal !important;\n    hyphens: auto !important;\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-card__panel,\n    .ramoa-card--koelln .ramoa-card__panel,\n    .ramoa-card--mari .ramoa-card__panel,\n    .ramoa-card--gabi .ramoa-card__panel,\n    .ramoa-card--portal .ramoa-card__panel {\n      max-width: calc(100% - 32px) !important;\n    }\n  }\n  \/* RAMOA \u2014 corre\u00e7\u00e3o final: cards crescem conforme conte\u00fado e mant\u00eam mesma altura da linha *\/\n  .ramoa-portfolio__grid-cards {\n    align-items: stretch !important;\n  }\n\n  .ramoa-card {\n    height: auto !important;\n    min-height: clamp(610px, 72vh, 760px) !important;\n    overflow: hidden !important;\n  }\n\n  .ramoa-card__link {\n    min-height: 100% !important;\n    height: 100% !important;\n    display: flex !important;\n    flex-direction: column !important;\n  }\n\n  .ramoa-card__media {\n    flex: 0 0 44% !important;\n  }\n\n  .ramoa-card__body {\n    flex: 1 1 auto !important;\n    min-height: 0 !important;\n    display: flex !important;\n    flex-direction: column !important;\n    padding-bottom: clamp(28px, 2.6vw, 42px) !important;\n  }\n\n  .ramoa-card__desc {\n    margin-bottom: 0 !important;\n  }\n\n  .ramoa-card__tags {\n    margin-top: auto !important;\n    padding-top: clamp(16px, 2vh, 22px) !important;\n    padding-bottom: 2px !important;\n    flex-shrink: 0 !important;\n    align-content: flex-start !important;\n  }\n\n  .ramoa-card__tags li {\n    flex: 0 0 auto !important;\n  }\n\n  @media (min-width: 1181px) and (max-width: 1500px) {\n    .ramoa-card {\n      min-height: 690px !important;\n    }\n\n    .ramoa-card__media {\n      flex-basis: 42% !important;\n    }\n  }\n\n  @media (max-width: 1180px) {\n    .ramoa-card {\n      min-height: 640px !important;\n    }\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-card {\n      height: auto !important;\n      min-height: 0 !important;\n    }\n\n    .ramoa-card__link {\n      height: auto !important;\n      min-height: 0 !important;\n    }\n  }\n  \/* RAMOA \u2014 tags compactas: duas por linha quando couber, sem grandes vazios entre elas *\/\n  .ramoa-card__tags {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    justify-content: flex-start !important;\n    align-items: flex-start !important;\n    gap: 7px !important;\n  }\n\n\n  .ramoa-card__tags li {\n    width: fit-content !important;\n    max-width: 100% !important;\n    flex: 0 0 auto !important;\n    white-space: nowrap !important;\n    font-size: 11.5px !important;\n    line-height: 1 !important;\n    padding: 7px 9px !important;\n  }\n\n  @media (min-width: 1181px) and (max-width: 1500px) {\n    .ramoa-card__tags {\n      gap: 6px !important;\n    }\n\n    .ramoa-card__tags li {\n      font-size: 11px !important;\n      padding: 7px 8px !important;\n    }\n  }\n  \/* RAMOA \u2014 fixar Gabrielle e Cida sempre no canto inferior direito, em qualquer resolu\u00e7\u00e3o *\/\n  .ramoa-portfolio-section .ramoa-card--gabi .ramoa-card__media,\n  .ramoa-portfolio-section .ramoa-card--portal .ramoa-card__media {\n    position: relative !important;\n    overflow: hidden !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--gabi .ramoa-card__photo,\n  .ramoa-portfolio-section .ramoa-card--portal .ramoa-card__photo {\n    position: absolute !important;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: auto !important;\n    width: auto !important;\n    height: 100% !important;\n    max-width: none !important;\n    max-height: 100% !important;\n    object-fit: contain !important;\n    object-position: right bottom !important;\n    transform-origin: right bottom !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--gabi .ramoa-card__photo {\n    transform: scale(var(--photo-scale, .82)) !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--portal .ramoa-card__photo {\n    transform: scale(var(--photo-scale, .70)) !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--gabi:hover .ramoa-card__photo {\n    transform: scale(calc(var(--photo-scale, .82) * 1.025)) !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--portal:hover .ramoa-card__photo {\n    transform: scale(calc(var(--photo-scale, .70) * 1.025)) !important;\n  }\n  \/* RAMOA \u2014 reduzir a altura da \u00e1rea inferior sem puxar as labels para cima do texto *\/\n  .ramoa-card__media {\n    flex: 0 0 48% !important;\n  }\n\n  .ramoa-card__body {\n    padding-bottom: clamp(20px, 1.8vw, 28px) !important;\n  }\n\n  .ramoa-card__tags {\n    margin-top: auto !important;\n    padding-top: clamp(10px, 1.2vh, 14px) !important;\n  }\n\n  @media (min-width: 1181px) and (max-width: 1500px) {\n    .ramoa-card__media {\n      flex-basis: 46% !important;\n    }\n  }\n  \/* RAMOA \u2014 ajustar subt\u00edtulo para caber em uma \u00fanica linha no desktop *\/\n  .ramoa-portfolio__title .ramoa-portfolio__highlight,\n  .ramoa-portfolio__title strong {\n    font-size: clamp(28px, 3.45vw, 56px) !important;\n    line-height: 0.98 !important;\n    letter-spacing: -0.065em !important;\n    white-space: nowrap !important;\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-portfolio__title .ramoa-portfolio__highlight,\n    .ramoa-portfolio__title strong {\n      font-size: clamp(30px, 9vw, 40px) !important;\n      line-height: 1.02 !important;\n      white-space: normal !important;\n    }\n  }\n\n  \/* =========================================================\n     ============ TEMPLATE RAMOA \u2014 HEADER + BACKGROUND ========\n     Aplicado por cima do CSS legado. Usa classe extra\n     `.rdig-pf-section` na <section> para nao conflitar\n     com regras !important do CSS antigo.\n     ========================================================= *\/\n\n  \/* Neutraliza pseudo-elementos antigos da section\n     (a versao oficial vem do template abaixo) *\/\n  .ramoa-portfolio-section.rdig-pf-section::before,\n  .ramoa-portfolio-section.rdig-pf-section::after {\n    content: none !important;\n  }\n\n  \/* ----- SECTION + BACKGROUND PRINCIPAL (template) ----- *\/\n  .rdig-pf-section,\n  .rdig-pf-section * {\n    box-sizing: border-box;\n  }\n\n  .rdig-pf-section {\n    width: 100% !important;\n    min-height: 100svh !important;\n    margin: 0 !important;\n    padding: clamp(34px, 5vh, 58px) clamp(16px, 5vw, 72px) clamp(30px, 4vh, 48px) !important;\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      ) !important;\n    color: #ffffff !important;\n    font-family: inherit !important;\n    position: relative !important;\n    overflow: hidden !important;\n    display: flex !important;\n    align-items: center !important;\n  }\n\n  \/* Linha de luz superior (template) \u2014 usa um pseudo dedicado\n     da .rdig-pf-section. Como o seletor de neutralizacao\n     acima desativa o ::before nessa section especifica, recriamos\n     usando o ::before do .rdig-pf-edge-fade para nao\n     colidir, e o ::after da section para o oval. *\/\n\n  \/* Edge fade (escurecimento das bordas) *\/\n  .rdig-pf-section .rdig-pf-edge-fade {\n    position: absolute !important;\n    inset: 0 !important;\n    z-index: 1 !important;\n    pointer-events: none !important;\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      ) !important;\n  }\n\n  \/* Linha de luz superior (recriada via ::before do edge-fade) *\/\n  .rdig-pf-section .rdig-pf-edge-fade::before {\n    content: \"\" !important;\n    position: absolute !important;\n    inset: 0 !important;\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      ) !important;\n    background-size:\n      48px 48px,\n      48px 48px,\n      96px 96px,\n      96px 96px !important;\n    background-position: center center !important;\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      ) !important;\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      ) !important;\n    opacity: 0.46 !important;\n    pointer-events: none !important;\n    z-index: 1 !important;\n  }\n\n  \/* Efeito oval central (recriado via ::after do edge-fade) *\/\n  .rdig-pf-section .rdig-pf-edge-fade::after {\n    content: \"\" !important;\n    position: absolute !important;\n    inset: 0 !important;\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      ) !important;\n    pointer-events: none !important;\n    z-index: 0 !important;\n  }\n\n  \/* ----- CONTAINER INTERNO (template) ----- *\/\n  .rdig-pf-section .rdig-pf-inner {\n    width: min(1440px, 85%) !important;\n    max-width: none !important;\n    margin: 0 auto !important;\n    padding: 0 !important;\n    position: relative !important;\n    z-index: 2 !important;\n  }\n\n  \/* ----- HEADER (template) ----- *\/\n  .rdig-pf-section .rdig-pf-header {\n    max-width: 1040px !important;\n    margin: 0 auto clamp(24px, 4vh, 36px) !important;\n    padding-top: 22px !important;\n    text-align: center !important;\n  }\n\n  .rdig-pf-section .rdig-pf-eyebrow {\n    display: inline-flex !important;\n    width: fit-content !important;\n    align-items: center !important;\n    margin: 0 auto 10px !important;\n    padding: 7px 13px !important;\n    border-radius: 999px !important;\n    border: 1px solid rgba(255, 47, 218, 0.78) !important;\n    color: rgba(255, 255, 255, 0.94) !important;\n    background: linear-gradient(135deg, rgba(89, 75, 231, 0.42), rgba(255, 47, 218, 0.22)) !important;\n    box-shadow:\n      0 0 20px rgba(255, 47, 218, 0.38),\n      0 0 34px rgba(89, 75, 231, 0.20),\n      inset 0 0 14px rgba(255, 255, 255, 0.055) !important;\n    font-size: 10px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.16em !important;\n    text-transform: uppercase !important;\n    backdrop-filter: none !important;\n  }\n\n  .rdig-pf-section .rdig-pf-title {\n    max-width: 1080px !important;\n    margin: 0 auto !important;\n    color: #ffffff !important;\n    font-family: \"Outfit\", Sans-serif !important;\n    font-size: 39px !important;\n    line-height: 1.2em !important;\n    font-weight: 600 !important;\n    letter-spacing: -0.5px !important;\n    text-shadow:\n      0 0 18px rgba(89, 75, 231, 0.34),\n      0 0 34px rgba(241, 131, 199, 0.24),\n      0 2px 16px rgba(5, 0, 11, 0.80) !important;\n  }\n\n  .rdig-pf-section .rdig-pf-title strong {\n    color: #ffffff !important;\n    font-family: \"Outfit\", Sans-serif !important;\n    font-weight: 600 !important;\n    font-size: inherit !important;\n    line-height: inherit !important;\n    letter-spacing: inherit !important;\n    white-space: normal !important;\n    padding-right: 5px !important;\n    background: linear-gradient(90deg, #ffffff 0%, #ff2fda 36%, #F183C7 58%, #594BE7 86%, #0088ff 100%) !important;\n    -webkit-background-clip: text !important;\n    background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    filter: drop-shadow(0 0 16px rgba(255, 47, 218, 0.42)) !important;\n  }\n\n  .rdig-pf-section .rdig-pf-lead {\n    max-width: 760px !important;\n    margin: 14px auto 0 !important;\n    color: rgba(255, 255, 255, 0.70) !important;\n    font-size: clamp(13px, 1vw, 16px) !important;\n    line-height: 1.45 !important;\n    font-weight: 500 !important;\n  }\n\n  \/* ----- RESPONSIVO TABLET (template) ----- *\/\n  @media (max-width: 1024px) {\n    .rdig-pf-section {\n      min-height: auto !important;\n      overflow: visible !important;\n      align-items: flex-start !important;\n    }\n\n    .rdig-pf-section .rdig-pf-inner {\n      width: min(100%, 92%) !important;\n    }\n  }\n\n  \/* ----- RESPONSIVO MOBILE (template) ----- *\/\n  @media (max-width: 767px) {\n    .rdig-pf-section {\n      min-height: auto !important;\n      padding: 64px 14px 72px !important;\n      overflow: visible !important;\n    }\n\n    .rdig-pf-section .rdig-pf-inner {\n      width: 100% !important;\n    }\n\n    .rdig-pf-section .rdig-pf-header {\n      margin-bottom: 34px !important;\n    }\n\n    .rdig-pf-section .rdig-pf-eyebrow {\n      font-size: 10px !important;\n      letter-spacing: 0.12em !important;\n    }\n\n    .rdig-pf-section .rdig-pf-title {\n      font-family: \"Outfit\", Sans-serif !important;\n      font-size: 32px !important;\n      line-height: 1.2em !important;\n      font-weight: 600 !important;\n      letter-spacing: -0.5px !important;\n    }\n\n    .rdig-pf-section .rdig-pf-lead {\n      font-size: 14px !important;\n    }\n\n    .rdig-pf-section .rdig-pf-edge-fade::before {\n      opacity: 0.36 !important;\n      background-size:\n        42px 42px,\n        42px 42px,\n        84px 84px,\n        84px 84px !important;\n    }\n  }\n  \/* RAMOA \u2014 tipografia do header igual ao template oficial de t\u00edtulos *\/\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-eyebrow {\n    font-size: 10px !important;\n    line-height: 1 !important;\n    font-weight: 900 !important;\n    letter-spacing: 0.16em !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-title {\n    font-family: \"Outfit\", Sans-serif !important;\n    font-size: 39px !important;\n    line-height: 1.2em !important;\n    font-weight: 600 !important;\n    letter-spacing: -0.5px !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-title strong {\n    font-family: \"Outfit\", Sans-serif !important;\n    font-size: inherit !important;\n    line-height: inherit !important;\n    font-weight: 600 !important;\n    letter-spacing: inherit !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-lead {\n    font-size: clamp(13px, 1vw, 16px) !important;\n    line-height: 1.45 !important;\n    font-weight: 500 !important;\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-portfolio-section.rdig-pf-section .rdig-pf-eyebrow {\n      font-size: 10px !important;\n      letter-spacing: 0.12em !important;\n    }\n\n    .ramoa-portfolio-section.rdig-pf-section .rdig-pf-title {\n      font-family: \"Outfit\", Sans-serif !important;\n      font-size: 32px !important;\n      line-height: 1.2em !important;\n      font-weight: 600 !important;\n      letter-spacing: -0.5px !important;\n    }\n\n    .ramoa-portfolio-section.rdig-pf-section .rdig-pf-title strong {\n      font-family: \"Outfit\", Sans-serif !important;\n      font-size: inherit !important;\n      line-height: inherit !important;\n      font-weight: 600 !important;\n      letter-spacing: inherit !important;\n    }\n\n    .ramoa-portfolio-section.rdig-pf-section .rdig-pf-lead {\n      font-size: 14px !important;\n    }\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     RAMOA \u2014 FIX DEFINITIVO \/ CHIPS NO BOTTOM\n     Mant\u00e9m a altura da foto e empurra os chips para\n     o rodap\u00e9 da \u00e1rea de conte\u00fado dos cards compactos.\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-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__link {\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    min-height: 100% !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__body {\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: flex-start !important;\n    align-items: flex-start !important;\n    flex: 1 1 auto !important;\n    min-height: 0 !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__category,\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__title,\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__desc,\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__tags {\n    flex: 0 0 auto !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__desc {\n    margin-bottom: 0 !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__tags,\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact ul.ramoa-card__tags {\n    margin-top: auto !important;\n    margin-right: 0 !important;\n    margin-bottom: 0 !important;\n    margin-left: 0 !important;\n    padding-top: 14px !important;\n    padding-right: 0 !important;\n    padding-bottom: 0 !important;\n    padding-left: 0 !important;\n    align-self: flex-start !important;\n    justify-self: flex-start !important;\n    transform: none !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__tags li {\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n  }\n\n  @media (max-width: 767px) {\n    .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact .ramoa-card__tags,\n    .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--secondary .ramoa-card.ramoa-card--compact ul.ramoa-card__tags {\n      margin-top: auto !important;\n      padding-top: 12px !important;\n    }\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\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     P\u00c1GINA \/PROJETOS \u2014 HIERARQUIA \"CASE EM DESTAQUE + 3 COMPACTOS\"\n     Adicionado em cima do template original sem destruir nada do que existe.\n     Apenas variantes (modifiers) que sobrescrevem comportamento de layout.\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  \/* Stack vertical das duas faixas *\/\n  .ramoa-portfolio-section .rdig-pf-stack {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: clamp(28px, 4.5vh, 56px) !important;\n  }\n\n  \/* FAIXA 1 \u2014 duas colunas: Koelln \u00e0 esquerda (70%) + bloco contextual \u00e0 direita (30%) *\/\n  .ramoa-portfolio-section .rdig-pf-grid--featured {\n    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) !important;\n    gap: 24px !important;\n    align-items: stretch !important;\n  }\n\n  \/* Ordem visual: card Koelln primeiro, contexto depois.\n     O HTML mant\u00e9m o aside antes (melhor leitura por leitor de tela). *\/\n  .ramoa-portfolio-section .rdig-pf-grid--featured .ramoa-card--featured {\n    order: 1;\n  }\n  .ramoa-portfolio-section .rdig-pf-grid--featured .rdig-pf-context {\n    order: 2;\n  }\n\n  \/* FAIXA 2 \u2014 tr\u00eas colunas (sobrescreve o 4-col original) *\/\n  .ramoa-portfolio-section .rdig-pf-grid--secondary {\n    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n    gap: 20px !important;\n    align-items: stretch !important;\n  }\n\n  \/* Garante que o body do card compacto se acomode ao conte\u00fado\n     sem reservar espa\u00e7o vazio quando a descri\u00e7\u00e3o \u00e9 curta *\/\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__link {\n    height: auto !important;\n  }\n\n  \/* \u2500\u2500\u2500 BLOCO CONTEXTUAL LATERAL (acompanha o card featured) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  \/* Ocupa os 30% \u00e0 direita do Koelln. N\u00e3o \u00e9 um card \"clic\u00e1vel\",\n     \u00e9 um bloco editorial que conta o m\u00e9todo RAMOA. Discreto,\n     com glow neon sutil e tipografia consistente com a p\u00e1gina. *\/\n\n  .ramoa-portfolio-section .rdig-pf-context {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 14px;\n    padding: clamp(24px, 2.6vw, 36px);\n    border-radius: 22px;\n    border: 1px solid rgba(168,85,247,0.22);\n    background:\n      radial-gradient(120% 120% at 0% 0%, rgba(45,212,255,0.06), transparent 55%),\n      radial-gradient(120% 120% at 100% 100%, rgba(255,47,218,0.06), transparent 55%),\n      linear-gradient(180deg, rgba(11,2,24,0.55) 0%, rgba(7,2,16,0.65) 100%);\n    box-shadow:\n      inset 0 0 0 1px rgba(255,255,255,0.03),\n      0 18px 48px rgba(1,17,41,0.30);\n  }\n\n  .rdig-pf-context__eyebrow {\n    display: inline-flex;\n    align-self: flex-start;\n    padding: 6px 12px;\n    border-radius: 999px;\n    border: 1px solid rgba(255,47,218,0.45);\n    background: linear-gradient(135deg, rgba(45,212,255,0.08), rgba(89,75,231,0.16) 50%, rgba(255,47,218,0.10));\n    color: rgba(255,255,255,0.92);\n    font-size: 10px;\n    font-weight: 900;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    line-height: 1;\n    box-shadow:\n      0 0 10px rgba(255,47,218,0.22),\n      inset 0 0 8px rgba(255,255,255,0.04);\n  }\n\n  .rdig-pf-context__title {\n    margin: 4px 0 6px;\n    font-family: \"Outfit\", \"Inter\", -apple-system, sans-serif;\n    font-size: clamp(20px, 1.6vw, 26px);\n    font-weight: 600;\n    line-height: 1.22;\n    letter-spacing: -0.015em;\n    color: #fff;\n  }\n\n  .rdig-pf-context__title strong {\n    background: linear-gradient(90deg, #ff2fda 0%, #a855f7 55%, #2dd4ff 100%);\n    -webkit-background-clip: text;\n            background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n    font-weight: 700;\n  }\n\n  .rdig-pf-context__text {\n    margin: 0;\n    color: rgba(255,255,255,0.72);\n    font-size: 14px;\n    line-height: 1.65;\n  }\n\n  .rdig-pf-context__text + .rdig-pf-context__text {\n    margin-top: 2px;\n  }\n\n\n  \/* Layout horizontal: media \u00e0 esquerda, body \u00e0 direita.\n     A engenharia interna do card (vari\u00e1veis --photo-pos, mark, panel)\n     \u00e9 preservada \u2014 s\u00f3 mudamos a orienta\u00e7\u00e3o do flexbox no link. *\/\n\n  .ramoa-portfolio-section .ramoa-card--featured {\n    max-width: 100% !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__link {\n    flex-direction: row !important;\n    min-height: 420px !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__media {\n    flex: 0 0 54% !important;\n    min-height: 420px !important;\n    max-height: none !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__body {\n    flex: 1 1 46% !important;\n    padding: clamp(24px, 2.8vw, 36px) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: center !important;\n    gap: 12px !important;\n  }\n\n  \/* Selo \"EM DESTAQUE\" sutil no canto do card featured (detalhe neon) *\/\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__body::before {\n    content: \"\u25cf Case em destaque\";\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    padding: 6px 12px;\n    margin-bottom: 4px;\n    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,0.92);\n    background: linear-gradient(135deg, rgba(45,212,255,0.10), rgba(168,85,247,0.14) 50%, rgba(255,47,218,0.10));\n    border: 1px solid rgba(255,47,218,0.45);\n    border-radius: 999px;\n    box-shadow:\n      0 0 12px rgba(255,47,218,0.28),\n      inset 0 0 8px rgba(255,255,255,0.04);\n    animation: rdig-pf-pulse-dot 2.4s ease-in-out infinite;\n  }\n\n  @keyframes rdig-pf-pulse-dot {\n    0%, 100% { box-shadow: 0 0 12px rgba(255,47,218,0.28), inset 0 0 8px rgba(255,255,255,0.04); }\n    50%      { box-shadow: 0 0 20px rgba(255,47,218,0.55), inset 0 0 12px rgba(255,255,255,0.08); }\n  }\n\n  \/* T\u00edtulo maior no featured *\/\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__title {\n    font-size: clamp(28px, 2.6vw, 38px) !important;\n    line-height: 1.1 !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__desc {\n    font-size: 15.5px !important;\n    line-height: 1.7 !important;\n  }\n\n  \/* \u2500\u2500\u2500 CARDS COMPACTOS (Mari, Gabi, Portal) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  \/* Cards menores e mais discretos. Body reduzido, foto menor, tags\n     mais sutis. Mas o sistema de vari\u00e1veis CSS de cada marca \u00e9\n     PRESERVADO \u2014 cada um mant\u00e9m sua paleta. *\/\n\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__media {\n    min-height: 220px !important;\n    max-height: 240px !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__body {\n    padding: 20px 22px 22px !important;\n    gap: 8px !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__title {\n    font-size: 19px !important;\n    line-height: 1.25 !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__desc {\n    font-size: 13.5px !important;\n    line-height: 1.55 !important;\n    opacity: 0.78 !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__category {\n    font-size: 10px !important;\n    letter-spacing: 0.16em !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__tags li {\n    font-size: 10.5px !important;\n    padding: 4px 9px !important;\n  }\n\n  \/* Hover dos compactos \u00e9 mais sutil (n\u00e3o levantam tanto) *\/\n  .ramoa-portfolio-section .ramoa-card--compact:hover {\n    transform: translateY(-4px) !important;\n  }\n\n  \/* \u2500\u2500\u2500 RESPONSIVIDADE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n  \/* Tablet: featured ainda em 2 colunas mas com propor\u00e7\u00e3o 65\/35;\n     compactos viram 2 colunas. *\/\n  @media (max-width: 1180px) {\n    .ramoa-portfolio-section .rdig-pf-grid--featured {\n      grid-template-columns: minmax(0, 65fr) minmax(0, 35fr) !important;\n      gap: 18px !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__link {\n      flex-direction: row !important;\n      min-height: 380px !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__media {\n      flex: 0 0 50% !important;\n      min-height: 380px !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__body {\n      flex: 1 1 50% !important;\n    }\n    .ramoa-portfolio-section .rdig-pf-context {\n      padding: 22px;\n    }\n    .ramoa-portfolio-section .rdig-pf-context__title {\n      font-size: 19px;\n    }\n    .ramoa-portfolio-section .rdig-pf-context__text {\n      font-size: 13.5px;\n    }\n    .ramoa-portfolio-section .rdig-pf-grid--secondary {\n      grid-template-columns: repeat(2, minmax(0,1fr)) !important;\n    }\n  }\n\n  \/* Tablet menor: bloco contextual vai acima do card (1 coluna) *\/\n  @media (max-width: 960px) {\n    .ramoa-portfolio-section .rdig-pf-grid--featured {\n      grid-template-columns: 1fr !important;\n      gap: 20px !important;\n    }\n    \/* Bloco contextual primeiro, depois o card Koelln *\/\n    .ramoa-portfolio-section .rdig-pf-context {\n      order: -1;\n    }\n  }\n\n  \/* Mobile: featured volta a ser vertical (media em cima, body embaixo)\n     pra n\u00e3o espremer o texto; compactos viram 1 coluna. *\/\n  @media (max-width: 720px) {\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__link {\n      flex-direction: column !important;\n      min-height: 0 !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__media {\n      flex: 0 0 320px !important;\n      min-height: 320px !important;\n      max-height: 320px !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__body {\n      padding: 22px !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__title {\n      font-size: 24px !important;\n    }\n    .ramoa-portfolio-section .rdig-pf-context__title {\n      font-size: 18px;\n    }\n    .ramoa-portfolio-section .rdig-pf-grid--secondary {\n      grid-template-columns: 1fr !important;\n    }\n    .ramoa-portfolio-section .ramoa-card--compact .ramoa-card__media {\n      min-height: 260px !important;\n      max-height: 280px !important;\n    }\n  }\n\n  \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   RAMOA \u2014 FINAL OVERRIDE \/ FEATURED CASE HEIGHT\n   Reduz a altura da faixa do case em destaque\n   Koelln Advocacia + bloco contextual lateral\n   Altura atual: 416px\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-portfolio-section .rdig-pf-grid--featured {\n  align-items: stretch !important;\n}\n\n\/* Card Koelln *\/\n.ramoa-portfolio-section .rdig-pf-grid--featured .ramoa-card--featured {\n  height: 416px !important;\n  min-height: 416px !important;\n  max-height: 416px !important;\n}\n\n\/* Card lateral \u201cSobre nossos projetos\u201d *\/\n.ramoa-portfolio-section .rdig-pf-grid--featured .rdig-pf-context {\n  height: 416px !important;\n  min-height: 416px !important;\n  max-height: 416px !important;\n  align-self: stretch !important;\n  justify-content: center !important;\n}\n\n\/* Garante que o link interno ocupe toda a altura do card *\/\n.ramoa-portfolio-section .ramoa-card--featured .ramoa-card__link {\n  height: 100% !important;\n  min-height: 100% !important;\n}\n\n\/* Ajusta propor\u00e7\u00e3o interna da \u00e1rea visual *\/\n.ramoa-portfolio-section .ramoa-card--featured .ramoa-card__media {\n  flex: 0 0 54% !important;\n  min-height: 0 !important;\n  height: auto !important;\n}\n\n\/* Ajusta \u00e1rea de texto para caber melhor na nova altura *\/\n.ramoa-portfolio-section .ramoa-card--featured .ramoa-card__body {\n  flex: 1 1 auto !important;\n  min-height: 0 !important;\n  padding: clamp(18px, 1.6vw, 26px) clamp(20px, 1.9vw, 30px) clamp(18px, 1.6vw, 26px) !important;\n  justify-content: center !important;\n}\n\n\/* Texto menor e mais compacto *\/\n.ramoa-portfolio-section .ramoa-card--featured .ramoa-card__desc {\n  max-width: 440px !important;\n  font-size: clamp(12px, 0.88vw, 14px) !important;\n  line-height: 1.48 !important;\n}\n\n\/* Tags mais pr\u00f3ximas, sem ocupar tanto espa\u00e7o *\/\n.ramoa-portfolio-section .ramoa-card--featured .ramoa-card__tags {\n  margin-top: auto !important;\n  padding-top: 12px !important;\n  padding-bottom: 0 !important;\n}\n\n\/* Mant\u00e9m a imagem ancorada no canto inferior direito *\/\n.ramoa-portfolio-section .ramoa-card--featured .ramoa-card__photo {\n  object-position: right bottom !important;\n  transform-origin: right bottom !important;\n}\n\n\/* Tablet e mobile: volta ao fluxo natural *\/\n@media (max-width: 1024px) {\n  .ramoa-portfolio-section .rdig-pf-grid--featured .ramoa-card--featured,\n  .ramoa-portfolio-section .rdig-pf-grid--featured .rdig-pf-context {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n  }\n\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__media {\n    flex: 0 0 320px !important;\n    min-height: 320px !important;\n  }\n}\n\n@media (max-width: 767px) {\n  .ramoa-portfolio-section .ramoa-card--featured .ramoa-card__media {\n    flex: 0 0 260px !important;\n    min-height: 260px !important;\n  }\n}\n\n\n\n\n\/* RAMOA \u2014 reduzir vazio inferior dos cards compactos *\/\n.ramoa-portfolio-section .ramoa-card--compact {\n  min-height: 510px !important;\n  height: auto !important;\n}\n\n.ramoa-portfolio-section .ramoa-card--compact .ramoa-card__body {\n  flex: 0 0 auto !important;\n  height: auto !important;\n  min-height: 0 !important;\n  padding-bottom: 22px !important;\n}\n\n.ramoa-portfolio-section .ramoa-card--compact .ramoa-card__tags {\n  margin-top: 14px !important;\n  padding-top: 0 !important;\n}\n\n\n\n\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   RAMOA \u2014 CONTEXT CARD FIT \/ N\u00c3O AUMENTAR CARD\n   O conte\u00fado se adapta \u00e0 altura do card, sem expandir a linha\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-portfolio-section.rdig-pf-section .rdig-pf-grid--featured {\n  align-items: stretch !important;\n}\n\n.ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--featured .ramoa-card--featured,\n.ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n  height: clamp(420px, 42vw, 520px) !important;\n  min-height: 0 !important;\n  max-height: clamp(420px, 42vw, 520px) !important;\n}\n\n.ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n  align-self: stretch !important;\n  display: flex !important;\n  flex-direction: column !important;\n  justify-content: flex-start !important;\n  overflow: hidden !important;\n  padding: clamp(24px, 2.1vw, 34px) clamp(22px, 2.1vw, 34px) !important;\n}\n\n.ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__eyebrow {\n  flex: 0 0 auto !important;\n  width: fit-content !important;\n  max-width: 100% !important;\n  margin: 0 0 clamp(20px, 1.8vw, 26px) !important;\n  font-size: clamp(8px, 0.62vw, 10px) !important;\n  line-height: 1 !important;\n  letter-spacing: 0.14em !important;\n  white-space: normal !important;\n}\n\n.ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__title {\n  flex: 0 0 auto !important;\n  max-width: 100% !important;\n  margin: 0 0 clamp(18px, 1.6vw, 24px) !important;\n  font-size: clamp(30px, 3.15vw, 50px) !important;\n  line-height: 1.02 !important;\n  letter-spacing: -0.055em !important;\n}\n\n.ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__text {\n  flex: 1 1 auto !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  overflow: hidden !important;\n  font-size: clamp(13px, 0.92vw, 15px) !important;\n  line-height: 1.56 !important;\n  letter-spacing: -0.01em !important;\n  overflow-wrap: anywhere !important;\n  word-break: normal !important;\n}\n\n\/* Notebook \/ desktop m\u00e9dio *\/\n@media (min-width: 1181px) and (max-width: 1500px) {\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--featured .ramoa-card--featured,\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n    height: 430px !important;\n    max-height: 430px !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n    padding: 22px 22px 24px !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__eyebrow {\n    margin-bottom: 18px !important;\n    padding: 7px 12px !important;\n    font-size: 8px !important;\n    letter-spacing: 0.13em !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__title {\n    margin-bottom: 16px !important;\n    font-size: clamp(30px, 2.55vw, 38px) !important;\n    line-height: 1.03 !important;\n    letter-spacing: -0.05em !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__text {\n    font-size: clamp(12.5px, 0.82vw, 13.5px) !important;\n    line-height: 1.48 !important;\n  }\n}\n\n\/* Tablet *\/\n@media (max-width: 1180px) {\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--featured .ramoa-card--featured,\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n    height: auto !important;\n    max-height: none !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n    padding: 28px 24px !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__title {\n    font-size: clamp(32px, 5vw, 46px) !important;\n    line-height: 1.06 !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__text {\n    overflow: visible !important;\n    font-size: 15px !important;\n    line-height: 1.58 !important;\n  }\n}\n\n\/* Mobile *\/\n@media (max-width: 767px) {\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context {\n    padding: 26px 20px !important;\n    border-radius: 22px !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__title {\n    margin-bottom: 16px !important;\n    font-size: clamp(30px, 9vw, 38px) !important;\n    line-height: 1.08 !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-context__text {\n    font-size: 14px !important;\n    line-height: 1.56 !important;\n  }\n}\n\n\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   RAMOA \u2014 MOBILE ORDER \/ TEXTO ANTES DOS CARDS\n   Desktop mant\u00e9m a ordem atual.\n   Mobile inverte: primeiro texto, depois card destaque.\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@media (max-width: 767px) {\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--featured {\n    display: flex !important;\n    flex-direction: column !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--featured .rdig-pf-context {\n    order: 1 !important;\n  }\n\n  .ramoa-portfolio-section.rdig-pf-section .rdig-pf-grid--featured .ramoa-card--featured {\n    order: 2 !important;\n  }\n}\n\n\n\n<\/style>\n\n<script>\n  (function(){\n    var cards = document.querySelectorAll('.ramoa-portfolio-section .ramoa-card');\n    if (!cards.length || window.matchMedia('(hover: none)').matches) return;\n    cards.forEach(function(card){\n      card.addEventListener('mousemove', function(e){\n        var r = card.getBoundingClientRect();\n        var x = (e.clientX - r.left) \/ r.width - .5;\n        var y = (e.clientY - r.top) \/ r.height - .5;\n        card.style.transform = 'translateY(-6px) perspective(900px) rotateX(' + (-y*2) + 'deg) rotateY(' + (x*2) + 'deg)';\n      });\n      card.addEventListener('mouseleave', function(){ card.style.transform = ''; });\n    });\n  })();\n<\/script>\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>","protected":false},"excerpt":{"rendered":"<p>Home \/ Projetos Projetos Portf\u00f3lio de sites, marcas e projetos digitais Conhe\u00e7a os projetos digitais desenvolvidos pela RAMOA: sites, plataformas, identidades visuais que ajudaram empresas a crescer e ganhar relev\u00e2ncia no mercado DESENVOLVIMENTO WEB IDENTIDADE VISUAL SOFTWARE SOB MEDIDA LOJA VIRTUAL TR\u00c1FEGO PAGO WORDPRESS REDES SOCIAIS LANDING PAGES SEO INFRAESTRUTURA DIGITAL CRM &amp; ERP GOOGLE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1949","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/1949","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=1949"}],"version-history":[{"count":75,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/1949\/revisions"}],"predecessor-version":[{"id":5512,"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/pages\/1949\/revisions\/5512"}],"wp:attachment":[{"href":"https:\/\/ramoadigital.com\/en\/wp-json\/wp\/v2\/media?parent=1949"}],"curies":[{"name":"Wordpress","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}