/* ============================================================
   kit da roda — o que as cinco páginas do Cyrandeiro têm em comum
   Fonte única: ferramentas/roda/. As cópias em sites/<raiz>/assets/roda/
   saem de scripts/sincronizar_roda.py; editar a cópia é perder a edição.
   ============================================================ */

:root{
  --ink:#0A0806;
  --ink-2:#14100C;
  --paper:#F3EFE6;
  --muted:#8F8776;
  --bronze:#D98E4A;
  --forro:#F59E0B;   /* terra / sanfona */
  --circo:#E0432D;   /* ar / lira */
  --eng:#3B82F6;     /* bastidor / engrenagem */
  --palco:#F97316;   /* palco / holofote */
  --acc:var(--bronze);   /* cada ofício troca pela cor do seu quadrante */

  --line:rgba(243,239,230,.10);
  --line-2:rgba(243,239,230,.18);

  --display:'Archivo Black', 'Outfit', sans-serif;
  --sans:'Outfit', system-ui, sans-serif;
  --mono:'Fira Code', ui-monospace, monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}
[data-oficio="forro"]{ --acc:var(--forro); }
[data-oficio="circo"]{ --acc:var(--circo); }
[data-oficio="eng"]{ --acc:var(--eng); }
[data-oficio="palco"]{ --acc:var(--palco); }

.r-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- topo: wordmark + mini-roda ---------- */
.r-topo{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:1.4rem;
  padding:1rem 5vw;
  transition:padding .3s var(--ease), background .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.r-topo.rolou{
  padding:.65rem 5vw;
  background:rgba(10,8,6,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.r-marca{ display:inline-flex; align-items:center; gap:.7rem; color:var(--paper); }
.r-marca .r-wordmark{
  font-family:var(--display); font-size:.9rem; letter-spacing:.35em;
  color:var(--bronze);
}
.r-mini{ width:30px; height:30px; flex:none; overflow:visible; }
.r-mini path{ fill:none; stroke-width:9; stroke-linecap:round; opacity:.28; transition:opacity .3s; }
.r-mini .q1{ stroke:var(--forro); }
.r-mini .q2{ stroke:var(--circo); }
.r-mini .q3{ stroke:var(--eng); }
.r-mini .q4{ stroke:var(--palco); }
.r-mini .aceso{ opacity:1; }
.r-marca:hover .r-mini path{ opacity:1; }

.r-nav{ display:flex; gap:1.6rem; margin-left:auto; }
.r-nav a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.r-nav a:hover{ color:var(--paper); }
.r-topo .r-btn{ padding:.6rem 1.1rem; font-size:.72rem; }

.r-menu{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--line-2); color:var(--paper);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem .8rem; cursor:pointer;
}
@media (max-width:820px){
  .r-menu{ display:block; }
  .r-topo .r-btn{ display:none; }
  .r-nav{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; gap:0;
    padding:4.6rem 6vw 1.4rem;
    background:var(--ink); border-bottom:1px solid var(--line);
    transform:translateY(-105%); transition:transform .35s var(--ease);
    margin-left:0; z-index:-1;
  }
  .r-nav.aberto{ transform:none; }
  .r-nav a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:.8rem; }
}

/* ---------- tipografia comum ---------- */
.r-kicker{
  display:inline-block;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
}
.r-kicker::before{ content:'// '; color:var(--acc); }
.r-titulo{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.7rem, 4vw, 2.8rem); line-height:1.05; letter-spacing:-.005em;
  margin:.7rem 0 1.6rem;
}
.r-titulo em{ font-style:normal; color:var(--acc); }

/* ---------- botões ---------- */
.r-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.5rem;
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--acc); color:var(--ink); background:var(--acc);
  cursor:pointer;
  transition:transform .25s var(--ease), background .2s, color .2s;
}
.r-btn:hover{ transform:translateY(-2px); }
.r-btn.r-linha{ background:transparent; color:var(--acc); }
.r-btn.r-linha:hover{ background:var(--acc); color:var(--ink); }

/* ---------- o arco do hero: o quadrante da mini-roda, grande ---------- */
.r-arco{ position:absolute; pointer-events:none; overflow:visible; z-index:0; }
.r-arco path{ fill:none; stroke:var(--acc); stroke-width:5; stroke-linecap:round; }
.r-arco-ator{
  position:fixed; left:0; top:0; z-index:70;
  pointer-events:none; overflow:visible; visibility:hidden;
  transform-origin:0 0;
}
.r-arco-ator path{ fill:none; stroke:var(--acc); stroke-width:9; stroke-linecap:round; }

/* ---------- aparecer ao rolar ---------- */
.r-revelar{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.r-revelar.visivel{ opacity:1; transform:none; }

/* ---------- rodapé: as quatro portas ---------- */
.r-portas{
  border-top:1px solid var(--line);
  padding:3.2rem 5vw 2.4rem;
}
.r-portas-grade{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.8rem; max-width:1100px; margin:0 auto 2.4rem;
}
.r-porta{
  display:grid; gap:.3rem;
  padding:1.1rem 1.2rem;
  border:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .25s, background .25s;
}
.r-porta b{ font-family:var(--display); font-weight:400; font-size:.95rem; letter-spacing:.2em; }
.r-porta span{ color:var(--muted); letter-spacing:.08em; text-transform:none; font-size:.72rem; }
.r-porta.q1 b{ color:var(--forro); }
.r-porta.q2 b{ color:var(--circo); }
.r-porta.q3 b{ color:var(--eng); }
.r-porta.q4 b{ color:var(--palco); }
.r-porta:hover{ border-color:var(--line-2); background:rgba(243,239,230,.03); }
.r-porta[aria-current="page"]{ border-color:var(--acc); background:rgba(243,239,230,.04); }
.r-portas-pe{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  max-width:1100px; margin:0 auto;
  font-size:.78rem; font-weight:300; color:var(--muted);
}
.r-portas-pe a{ color:var(--paper); }
@media (max-width:720px){
  .r-portas-grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .r-porta{ padding:.9rem .8rem; }
  .r-porta b{ font-size:.82rem; letter-spacing:.1em; }
}

@media (prefers-reduced-motion:reduce){
  .r-revelar{ opacity:1; transform:none; transition:none; }
  .r-nav, .r-topo{ transition:none; }
}