/* áreas, níveis e travessia */
.areas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(24px,3vw,34px)}
.area-chip{display:inline-block;padding:9px 15px;border-radius:999px;font-size:.9rem;font-weight:600;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:var(--on-stage)}
.niveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  margin-top:clamp(24px,3vw,34px);text-align:left}
.nv{padding:16px 18px 16px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.nv b{display:block;font-size:1.02rem;margin-bottom:6px}
.nv span{display:block;font-size:0.9rem;color:var(--ink-2);line-height:1.45}
.nv:nth-child(1){--nvc:#CBD5E1}
.nv:nth-child(2){--nvc:#C2410C}
.nv:nth-child(3){--nvc:#94A3B8}
.nv:nth-child(4){--nvc:#F59E0B}
.nv:nth-child(5){--nvc:#22D3EE}
.nv::before{content:"";position:absolute;left:0;top:12px;width:4px;height:calc(100% - 24px);background:var(--nvc,var(--line));border-radius:0 4px 4px 0}
.travessia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:820px;margin-left:auto;margin-right:auto;
  margin-top:clamp(24px,3vw,34px);text-align:left}
.tv{padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.tv-meio{background:var(--bg);border-color:var(--orange);border-width:2px}
.tv b{display:block;font-size:1.02rem;margin-bottom:8px}
.tv p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.5}

/* ═══════ RODADA 4 · as áreas e os níveis entram um a um ═══════ */
html.js .areas.rv,
html.js .niveis.rv{opacity:1;transform:none;transition:none}

html.js .areas .area-chip{
  opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
html.js .areas.in .area-chip{opacity:1;transform:none}
.area-chip{cursor:default}
html.js .areas .area-chip:hover{
  transition-delay:0s;transform:translateY(-3px) scale(1.05);
  background:rgba(255,255,255,.19);border-color:var(--orange)
}
.area-chip{position:relative}
.area-chip::after{content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(249,115,22,0)}
html.js .areas.in .area-chip::after{animation:chipOnda 9s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .13s + 1.4s)}
@keyframes chipOnda{
  0%,88%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
  94%{box-shadow:0 0 14px 2px rgba(249,115,22,.55)}
}

html.js .niveis .nv{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),
             box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
  transition-delay:calc(var(--n,0) * 90ms);
}
html.js .niveis.in .nv{opacity:1;transform:none}
html.js .niveis .nv:hover{
  transition-delay:0s;transform:translateY(-5px);
  border-color:var(--nvc);box-shadow:0 16px 34px rgba(23,19,52,.15)
}
html.js .niveis .nv::before{transform:scaleY(0);transform-origin:top;
  transition:transform .75s var(--ease);transition-delay:calc(var(--n,0) * 90ms + 140ms)}
html.js .niveis.in .nv::before{transform:scaleY(1)}
html.js .niveis.in .nv::before{animation:nvBrilho 5s ease-in-out infinite;
  animation-delay:calc(var(--n,0) * .35s + 1s)}
@keyframes nvBrilho{
  0%,72%,100%{box-shadow:0 0 0 0 transparent}
  84%{box-shadow:0 0 12px 1px var(--nvc)}
}
@media (prefers-reduced-motion:reduce){
  html.js .areas .area-chip,
  html.js .niveis .nv{opacity:1;transform:none;transition:none}
  html.js .niveis .nv::before{transform:none;transition:none;animation:none}
  html.js .areas.in .area-chip::after{animation:none}
}

/* botão vazado da chamada */
.cta-sec .btn-ghost{border-color:var(--ink-2)}
.cta-sec .btn-ghost:hover{border-color:var(--orange);color:var(--orange)}