/* ═══════════════════════════════════════════════════════════════════
   ROTTU · UX KIT v1.0 (F0 · 07/08/2026)
   Fundação de motion + componentes da esteira UX-2 (benchmark Dentzi,
   100% brandbook: Garet Bold/Book (títulos) · Inter (corpo) ·
   verde-brasil var(--verde-brasil) · verde-aprovado var(--verde-aprovado) · verde-validado var(--verde-validado)
   · branco #FFF · preto #000 · cinza var(--cinza-fundo)).
   Uso: <link rel="stylesheet" href="rottu-ux.css"> + rottu-ux.js.
   Nada aqui sobrescreve estilos existentes: só CLASSES NOVAS (rx-*).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --rx-verde-brasil:var(--verde-brasil);
  --rx-verde-aprovado:var(--verde-aprovado);
  --rx-verde-validado:var(--verde-validado);
  --rx-cinza:var(--cinza-fundo);
  --rx-ease:cubic-bezier(.22,.9,.28,1);       /* saída suave, "premium" */
  --rx-dur:.5s;
  --rx-radius:14px;
  --rx-sombra:0 6px 24px rgba(5,56,42,.10);
  --rx-sombra-up:0 14px 38px rgba(5,56,42,.16);
  --rx-glow:0 0 0 3px rgba(34,255,120,.25);
}

/* ── REVEAL ON SCROLL ─────────────────────────────────────────────
   Marque qualquer bloco com .rx-reveal (+ opcional .rx-d1..d4 pra
   escalonar). O rottu-ux.js liga .rx-in quando o bloco entra na tela. */
/* [ROBUSTEZ 10/08] Progressive enhancement: a página nasce VISÍVEL; o reveal
   só arma quando o JS injeta html.rx-js — ambiente sem JS = página completa. */
html.rx-js .rx-reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--rx-dur) var(--rx-ease),transform var(--rx-dur) var(--rx-ease)}
html.rx-js .rx-reveal.rx-in{opacity:1;transform:none}
.rx-d1{transition-delay:.08s}.rx-d2{transition-delay:.16s}
.rx-d3{transition-delay:.24s}.rx-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rx-reveal{opacity:1;transform:none;transition:none}}

/* ── CARDS QUE CONVERSAM (hover lift + glow) ────────────────────── */
.rx-card{background:#fff;border:1px solid #E7EAE8;border-radius:var(--rx-radius);
  box-shadow:var(--rx-sombra);transition:transform .28s var(--rx-ease),
  box-shadow .28s var(--rx-ease),border-color .28s}
.rx-card:hover{transform:translateY(-4px);box-shadow:var(--rx-sombra-up);
  border-color:var(--rx-verde-validado)}
.rx-card--click{cursor:pointer}
.rx-card--click:active{transform:translateY(-1px) scale(.995)}

/* ── BOTÕES (2 pesos do brandbook) ──────────────────────────────── */
.rx-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 Inter,system-ui;
  padding:13px 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--rx-ease),box-shadow .2s,filter .2s}
.rx-btn:active{transform:scale(.97)}
.rx-btn--primario{background:var(--rx-verde-aprovado);color:var(--rx-verde-brasil)}
.rx-btn--primario:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(34,255,120,.35)}
.rx-btn--escuro{background:var(--rx-verde-brasil);color:#fff}
.rx-btn--escuro:hover{box-shadow:var(--rx-sombra-up)}
.rx-btn--fantasma{background:transparent;color:var(--rx-verde-brasil);
  border:1.5px solid var(--rx-verde-brasil)}
.rx-btn--fantasma:hover{background:var(--rx-verde-brasil);color:#fff}

/* ── CHIPS DE PROVA (✓ como no bench) ───────────────────────────── */
.rx-chip{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 Inter;
  color:var(--rx-verde-brasil);background:rgba(73,183,111,.12);
  border:1px solid rgba(73,183,111,.35);border-radius:999px;padding:7px 14px}
.rx-chip::before{content:"✓";color:var(--rx-verde-validado);font-weight:700}

/* ── NÚMEROS QUE CONTAM (stats) ─────────────────────────────────── */
.rx-stat{font-family:Garet,Inter,sans-serif;font-weight:700;
  font-size:clamp(34px,5vw,54px);color:var(--rx-verde-brasil);line-height:1}
.rx-stat small{display:block;font:400 14px/1.5 Inter;color:#5c6660;margin-top:8px}
.rx-stat .rx-num{color:var(--rx-verde-validado)}

/* ── INPUTS COM FOCO ILUMINADO ──────────────────────────────────── */
.rx-input{font:400 15px/1.4 Inter;padding:13px 16px;border:1.5px solid #DDE3E0;
  border-radius:10px;width:100%;transition:border-color .2s,box-shadow .2s;background:#fff}
.rx-input:focus{outline:none;border-color:var(--rx-verde-validado);box-shadow:var(--rx-glow)}

/* ── ACCORDION (FAQ) ────────────────────────────────────────────── */
.rx-acc{border:1px solid #E7EAE8;border-radius:12px;background:#fff;overflow:hidden}
.rx-acc+.rx-acc{margin-top:10px}
.rx-acc-q{display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  font:600 15px/1.4 Inter;color:var(--rx-verde-brasil);padding:16px 18px}
.rx-acc-q::after{content:"+";font-size:20px;color:var(--rx-verde-validado);
  transition:transform .3s var(--rx-ease)}
.rx-acc.rx-aberto .rx-acc-q::after{transform:rotate(45deg)}
html.rx-js .rx-acc-a{max-height:0;overflow:hidden;transition:max-height .35s var(--rx-ease)}
html:not(.rx-js) .rx-acc-q::after{content:""}
/* [08/09] o seletor era so >div e o texto escrito em <p> ficava sem
   margem, encostado na borda. Agora vale para os dois. */
.rx-acc-a>div,.rx-acc-a>p{padding:0 18px 16px;margin:0;
  font:400 14.5px/1.65 Inter;color:#43514b}

/* ── SEÇÃO ESCURA (hero institucional) ──────────────────────────── */
.rx-secao-escura{background:
  radial-gradient(1200px 500px at 80% -10%,rgba(34,255,120,.14),transparent 60%),
  var(--rx-verde-brasil);color:#fff}
.rx-secao-escura .rx-eyebrow{color:var(--rx-verde-aprovado);
  font:600 13px/1 Inter;letter-spacing:.12em;text-transform:uppercase}

/* ── BADGE PULSANTE (status vivo) ───────────────────────────────── */
.rx-vivo{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 Inter}
.rx-vivo::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--rx-verde-aprovado);animation:rx-pulso 1.8s infinite}
@keyframes rx-pulso{0%{box-shadow:0 0 0 0 rgba(34,255,120,.5)}
  70%{box-shadow:0 0 0 9px rgba(34,255,120,0)}100%{box-shadow:0 0 0 0 rgba(34,255,120,0)}}

/* ── SKELETON (carregamentos elegantes) ─────────────────────────── */
.rx-skeleton{background:linear-gradient(90deg,#EEF1EF 25%,#F7FAF8 50%,#EEF1EF 75%);
  background-size:200% 100%;animation:rx-shimmer 1.4s infinite;border-radius:8px}
@keyframes rx-shimmer{to{background-position:-200% 0}}

/* ── RESPOSTA AO MOUSE (08/09) ──────────────────────────────────────
   O reveal ao rolar ja existia, mas os elementos nao reagiam ao mouse:
   a pagina parecia estatica depois que carregava. Estas regras dao o
   retorno visual que faltava, sem exagero e respeitando quem pediu
   menos movimento no sistema. */

/* accordion do FAQ: a linha inteira reage, nao so o texto */
.rx-acc{transition:border-color var(--rx-dur) var(--rx-ease),
  box-shadow var(--rx-dur) var(--rx-ease)}
.rx-acc:hover{border-color:var(--rx-verde-validado);box-shadow:var(--rx-sombra)}
.rx-acc-q{transition:color .16s ease}
.rx-acc-q:hover{color:var(--rx-verde-validado)}
.rx-acc.rx-aberto{border-color:var(--rx-verde-validado)}

/* botoes do kit sobem de leve e ganham sombra */
.rx-btn{transition:transform .14s ease,box-shadow .18s ease,filter .16s ease}
.rx-btn:hover{transform:translateY(-1px)}
.rx-btn--primario:hover{box-shadow:0 10px 26px rgba(34,255,120,.3)}
.rx-btn--escuro:hover{box-shadow:0 10px 26px rgba(5,56,42,.24)}
.rx-btn:active{transform:translateY(0)}

/* cartoes e estatisticas acompanham o mesmo gesto */
.rx-stat{transition:transform var(--rx-dur) var(--rx-ease)}
.rx-stat:hover{transform:translateY(-2px)}

/* links de navegacao com sublinhado que cresce a partir da esquerda */
.rx-link{position:relative;text-decoration:none}
.rx-link::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:0;
  background:var(--rx-verde-aprovado);transition:width .22s var(--rx-ease)}
.rx-link:hover::after{width:100%}

@media (prefers-reduced-motion:reduce){
  .rx-acc,.rx-btn,.rx-stat,.rx-link::after{transition:none}
  .rx-btn:hover,.rx-stat:hover{transform:none}
}