/* ============================================================
   RAFAEL KENJI · rk-polish.css
   Camada de efeitos premium — aplicável a TODAS as páginas.
   Tema claro. Não altera o style.css original.
   Tudo degrada bem sem JS e respeita movimentos amplos no reduce.
============================================================ */
:root{
  --rkp-navy:#0b1f33;
  --rkp-teal:#04c4a4;
  --rkp-teal-d:#037c69;
  --rkp-gold:#d6b25e;
  --rkp-ink:#22313f;
  --rkp-gray:#5c6b7a;
}

/* ---------- item de menu "App + IA" com selo ---------- */
.rkp-navlink{position:relative;display:inline-flex;align-items:center;gap:7px}
.rkp-badge-ia{
  font-size:9px;font-weight:800;letter-spacing:.1em;line-height:1;
  color:#06181f;background:linear-gradient(135deg,#04c4a4,#7febd8);
  padding:3px 6px;border-radius:5px;text-transform:uppercase;
  box-shadow:0 0 12px rgba(4,196,164,.5);
}
.offcanvas__nav-ia{
  display:inline-block;margin-left:8px;font-size:9px;font-weight:800;
  color:#06181f;background:linear-gradient(135deg,#04c4a4,#7febd8);
  padding:2px 6px;border-radius:5px;letter-spacing:.08em;vertical-align:middle;
}

/* ---------- reveal on scroll (opt-in via .js-on) ---------- */
.js-on .rkp-rv{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js-on .rkp-rv.in{opacity:1;transform:none}
.js-on .rkp-rv.d1{transition-delay:.08s}
.js-on .rkp-rv.d2{transition-delay:.16s}
.js-on .rkp-rv.d3{transition-delay:.24s}
.js-on .rkp-rv.d4{transition-delay:.32s}

/* ---------- spotlight que segue o mouse (desktop) ---------- */
#rkp-spot{
  position:fixed;left:0;top:0;width:520px;height:520px;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle, rgba(4,196,164,.10), transparent 62%);
  will-change:left,top;mix-blend-mode:multiply;
}
@media(hover:hover) and (pointer:fine){#rkp-spot.on{opacity:1}}

/* ---------- barra de progresso de leitura ---------- */
#rkp-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--rkp-teal),#7febd8);
  box-shadow:0 0 12px rgba(4,196,164,.7);transition:width .1s linear;
}

/* ---------- botão "voltar ao topo" ---------- */
#rkp-top{
  position:fixed;right:18px;bottom:88px;z-index:998;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--rkp-teal-d);font-size:18px;
  box-shadow:0 10px 30px rgba(11,31,51,.2);
  opacity:0;transform:translateY(12px) scale(.8);pointer-events:none;
  transition:opacity .3s,transform .3s;
}
#rkp-top.on{opacity:1;transform:none;pointer-events:auto}
#rkp-top:hover{color:#fff;background:var(--rkp-teal)}

/* ---------- realce sutil em cards existentes do tema ---------- */
.rk-dor-item,.rk-metodo-step,.chooseus__item,.rk-ba-card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease !important;
}
.rk-dor-item:hover,.chooseus__item:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 46px rgba(11,31,51,.12) !important;
}

/* ---------- divisor "aurora" entre seções ---------- */
.rkp-aurora{
  position:relative;height:2px;width:100%;overflow:visible;background:transparent;border:0;margin:0;
}
.rkp-aurora::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,86%);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(4,196,164,.65),rgba(214,178,94,.5),transparent);
}
.rkp-aurora::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  opacity:.9;animation:rkpBeam 5s ease-in-out infinite;
}
@keyframes rkpBeam{0%{margin-left:-300px;opacity:0}20%{opacity:1}80%{opacity:1}100%{margin-left:300px;opacity:0}}

/* ---------- números que "contam" (contador) ---------- */
.rkp-count{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .rkp-aurora::after{animation:none;display:none}
  #rkp-spot{display:none}
}



/* ============================================================
   CORREÇÃO DEFINITIVA DO MENU (desktop) — tudo numa linha
   O template usa text-align:right + inline-block, que empilha
   os ícones quando há muitos itens. Forçamos flexbox alinhado.
============================================================ */
@media (min-width:992px){
  .header__menu__option{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:20px !important;
    text-align:right;
  }
  .header__menu.menu-refined{
    display:flex !important;
    margin-right:0 !important;
    flex:0 1 auto;
    min-width:0;
  }
  .header__menu.menu-refined ul{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    margin:0 !important;
    padding:0;
  }
  .header__menu.menu-refined ul li{
    display:inline-flex !important;
    align-items:center;
    margin:0 !important;
    white-space:nowrap;
  }
  .header__menu.menu-refined ul li + li{margin-left:20px !important}
  .header__menu.menu-refined ul li a{
    font-size:17px !important;
    letter-spacing:.5px !important;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
  }
  .header__btn.header-actions-refined{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
    flex:0 0 auto !important;
    align-self:center !important;
  }
  .header-actions-refined .header-icon{width:34px;height:34px}
}
/* badge IA colada no texto, sem empurrar linha */
.rkp-badge-ia{display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px}