/* =========================================================================
   /fluxos — 50 fluxos de automação para o Claude
   Escuro, no padrão do /guia. Barra lateral do portfólio.
   Cada categoria tem sua cor, exposta em --cor e usada pelos filhos.
   ========================================================================= */

:root{
  --fundo:#0E0906;
  --carta:#16100B;
  --carta-2:#1D150E;
  --fosso:#231A12;
  --barra:#0E0E10;
  --barra-2:#17171A;
  --barra-linha:#232326;

  --creme:#FCF9F0;
  --texto:#B09E91;
  --fraco:#7A6C62;
  --tenue:#5C514A;

  --linha:rgba(252,249,240,.12);
  --linha-fraca:rgba(252,249,240,.07);

  --laranja:#ED623B;
  --verde:#8CA680;
  --verde-solido:#434F43;
  --cor:var(--laranja);          /* sobrescrita por categoria */

  --r:12px;
  --r-lg:18px;
  --r-xl:26px;

  --font:"Degular","Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"degular-display","Degular","Familjen Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --barra-w:290px;
  --gap:14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; padding:var(--gap);
  background:var(--fundo);
  color:var(--creme);
  font-family:var(--font); font-size:16px; line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--cor); outline-offset:3px; border-radius:4px; }

.app{ display:flex; gap:var(--gap); align-items:flex-start; }

/* textura discreta */
.pontos{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background:radial-gradient(circle at 1px 1px, rgba(252,249,240,.055) 1px, transparent 1.5px) 0 0/24px 24px;
}
.app{ position:relative; z-index:1; }

/* =========================================================================
   BARRA LATERAL
   ========================================================================= */
.barra{
  position:sticky; top:var(--gap);
  flex:0 0 var(--barra-w); width:var(--barra-w);
  height:calc(100svh - var(--gap) * 2);
  display:flex; flex-direction:column;
  background:var(--barra);
  border:1px solid var(--barra-linha);
  border-radius:var(--r-lg);
  padding:16px 14px;
  overflow:hidden;
}
.zap{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.zap__card{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  background:var(--barra-2); border:1px solid var(--barra-linha);
  border-radius:999px; padding:7px 14px 7px 7px;
  transition:background .25s var(--ease);
}
.zap__card:hover{ background:#1E1E22; }
.zap__foto{ position:relative; flex:0 0 auto; }
.zap__foto img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.zap__foto i{ position:absolute; right:0; bottom:1px; width:10px; height:10px; border-radius:50%; background:#38D07A; border:2px solid var(--barra-2); }
.zap__txt{ min-width:0; }
.zap__txt b{ display:block; font-size:13.5px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.zap__txt span{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--fraco); }
.zap__txt span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--laranja); }
.zap__ir{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  background:var(--laranja); color:#fff; display:grid; place-items:center;
  transition:transform .3s var(--ease-out), background .25s var(--ease);
}
.zap__ir:hover{ transform:translateY(-2px) rotate(8deg); background:#F0764E; }
.zap__ir svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.barra__rot{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--tenue);
  margin:0 0 10px 10px;
}
.barra__rot + .barra__rot{ margin-top:20px; }
.barra__nav{ flex:1; overflow-y:auto; margin:0 -4px; padding:0 4px; scrollbar-width:thin; }
.barra__nav::-webkit-scrollbar{ width:4px; }
.barra__nav::-webkit-scrollbar-thumb{ background:#2A2A2E; border-radius:4px; }

.item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:12px;
  color:#9A9098; font-size:14.5px;
  border:1px solid transparent;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.item svg{ width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.item b{ font-weight:400; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item u{ text-decoration:none; font-family:var(--mono); font-size:10.5px; color:var(--fraco); background:var(--barra-2); border-radius:6px; padding:1px 6px; }
.item:hover{ background:var(--barra-2); color:var(--creme); }
.item[data-cor] svg{ color:var(--cor-item); }
.item.is-on{ background:var(--barra-2); color:var(--creme); border-color:var(--barra-linha); }
.item.is-on::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cor-item,var(--laranja)); flex:0 0 auto; }

.barra__pe{ padding-top:14px; margin-top:12px; border-top:1px solid var(--barra-linha); }
.medidor{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.medidor__trilho{ flex:1; height:4px; background:#26262A; border-radius:99px; overflow:hidden; }
.medidor__trilho i{ display:block; height:100%; width:0; background:var(--laranja); transition:width .4s var(--ease); }
.medidor span{ font-family:var(--mono); font-size:10.5px; color:var(--fraco); white-space:nowrap; }
.barra__pe p{ margin:0; font-size:12px; color:var(--tenue); line-height:1.5; }
.barra__pe p b{ display:block; color:var(--creme); font-weight:500; font-size:13px; }

.menu-btn{
  display:none; position:fixed; right:16px; bottom:16px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:var(--laranja); color:#fff; place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.menu-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* =========================================================================
   CONTEÚDO
   ========================================================================= */
.papel{ flex:1; min-width:0; padding:0 clamp(.2rem,1.6vw,1.6rem) 4rem; }
.limite{ width:min(100%, 64rem); margin-inline:auto; }

.capa{ padding:clamp(2.5rem,7vh,5rem) 0 clamp(1.5rem,3vh,2.5rem); }
.olho{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cor);
  margin:0 0 1.3rem;
}
.olho::before{ content:""; width:1.5rem; height:1px; background:currentColor; opacity:.8; }
.capa h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,6.6vw,4.8rem);
  line-height:.97; letter-spacing:-.035em;
  margin:0 0 1.2rem; max-width:17ch; text-wrap:balance;
}
.capa h1 em{ font-style:normal; color:var(--laranja); }
.capa__sub{ margin:0; max-width:58ch; font-size:clamp(1rem,1.9vw,1.16rem); color:var(--texto); line-height:1.55; }

.fichas{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.ficha{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--carta); border:1px solid var(--linha-fraca);
  border-radius:999px; padding:.45rem .95rem;
  font-size:.85rem; color:var(--texto);
  transition:border-color .25s var(--ease), transform .25s var(--ease-out), color .25s var(--ease);
}
.ficha::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cor); }
.ficha:hover{ border-color:var(--cor); color:var(--creme); transform:translateY(-2px); }
.ficha u{ text-decoration:none; font-family:var(--mono); font-size:.7rem; color:var(--fraco); }

/* busca */
.busca{ position:sticky; top:0; z-index:20; margin:2rem 0 0; padding:.9rem 0; background:var(--fundo); }
.busca__campo{
  display:flex; align-items:center; gap:.7rem;
  background:var(--carta); border:1px solid var(--linha);
  border-radius:var(--r); padding:.8rem 1rem;
  transition:border-color .25s var(--ease);
}
.busca__campo:focus-within{ border-color:var(--laranja); }
.busca__campo svg{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--fraco); stroke-width:1.8; stroke-linecap:round; }
.busca__campo input{ flex:1; min-width:0; border:0; outline:0; background:none; font-size:1rem; color:var(--creme); font-family:inherit; }
.busca__campo input::placeholder{ color:var(--tenue); }
.busca__campo kbd{ font-family:var(--mono); font-size:.68rem; color:var(--fraco); border:1px solid var(--linha); border-radius:5px; padding:.15rem .4rem; }
.busca__nada{ margin:.7rem 0 0; font-size:.9rem; color:var(--fraco); }

/* seções explicativas */
.bloco{ padding:clamp(2.5rem,6vh,4rem) 0 0; scroll-margin-top:5rem; }
.bloco__topo{ margin-bottom:1.6rem; }
.bloco h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  line-height:1.06; letter-spacing:-.03em; margin:.5rem 0 .7rem; text-wrap:balance;
}
.bloco__topo p{ margin:0; color:var(--texto); max-width:62ch; }
.bloco__topo p strong{ color:var(--creme); font-weight:500; }

.confronto{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.lado{ padding:1.6rem 1.5rem; border-radius:var(--r-lg); background:var(--carta); border:1px solid var(--linha-fraca); }
.lado--bom{ border-color:rgba(237,98,59,.38); }
.lado u{ display:block; text-decoration:none; margin-bottom:.7rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fraco); }
.lado--bom u{ color:var(--laranja); }
.lado p{ margin:0; color:var(--texto); font-size:.97rem; line-height:1.6; }

.niveis{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); counter-reset:n; }
.nivel{ padding:1.5rem 1.4rem; border-radius:var(--r-lg); background:var(--carta); border:1px solid var(--linha-fraca); counter-increment:n; position:relative; }
.nivel::before{ content:counter(n); position:absolute; top:1.2rem; right:1.3rem; font-family:var(--display); font-size:2.2rem; line-height:1; color:var(--fosso); }
.nivel b{ display:block; font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:-.02em; margin-bottom:.2rem; }
.nivel u{ display:block; text-decoration:none; margin-bottom:.8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--laranja); }
.nivel p{ margin:0; font-size:.93rem; color:var(--texto); line-height:1.55; }
.nivel code{ font-family:var(--mono); font-size:.85em; background:var(--fosso); border-radius:5px; padding:.1em .4em; }

.passos{ display:grid; gap:.8rem; }
.passo{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding:1.3rem 1.4rem; border-radius:var(--r-lg); background:var(--carta); border:1px solid var(--linha-fraca); }
.passo__n{ width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; background:rgba(237,98,59,.14); color:var(--laranja); font-family:var(--mono); font-size:.75rem; font-weight:600; }
.passo b{ display:block; font-size:1.03rem; font-weight:600; margin-bottom:.2rem; }
.passo p{ margin:0; color:var(--texto); font-size:.94rem; line-height:1.55; }
.passo code{ font-family:var(--mono); font-size:.84em; background:var(--fosso); border-radius:5px; padding:.1em .4em; }

/* =========================================================================
   FLUXOS
   ========================================================================= */
.grupo{ padding:clamp(2.5rem,6vh,3.5rem) 0 0; scroll-margin-top:5rem; }
.grupo__topo{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid var(--linha-fraca); }
.grupo__topo h2{ margin:0; font-family:var(--display); font-weight:400; font-size:1.9rem; letter-spacing:-.03em; }
.grupo__qtd{
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  color:var(--cor); border:1px solid var(--cor); border-radius:999px; padding:.15rem .6rem;
}
.grupo__topo p{ margin:0; flex:1 1 100%; color:var(--fraco); font-size:.93rem; }

.fluxos{ display:grid; gap:.7rem; }

.fluxo{
  background:var(--carta); border:1px solid var(--linha-fraca);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.fluxo:hover{ border-color:color-mix(in srgb, var(--cor) 45%, transparent); }
.fluxo.is-aberto{ border-color:var(--cor); background:var(--carta-2); }
.fluxo.is-salvo .fluxo__n{ color:var(--verde); }
.fluxo[hidden]{ display:none; }

.fluxo__cab{
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:.9rem;
  width:100%; padding:1.05rem 1.2rem; text-align:left;
}
.fluxo__n{
  font-family:var(--display); font-weight:400; font-size:1.5rem; line-height:1;
  color:var(--cor); font-variant-numeric:tabular-nums;
  transition:color .25s var(--ease);
}
.fluxo__meio{ min-width:0; }
.fluxo__meio h3{ margin:0 0 .3rem; font-size:1.05rem; font-weight:600; letter-spacing:-.02em; }
.trilha{ display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; }
.trilha span{
  font-family:var(--mono); font-size:.66rem;
  background:var(--fosso); border-radius:5px; padding:.15rem .45rem; color:var(--texto);
}
.trilha i{ font-style:normal; color:var(--tenue); font-size:.7rem; }

.salvar{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:var(--tenue); border:1px solid var(--linha-fraca);
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.salvar svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.salvar:hover{ color:var(--verde); border-color:var(--verde); }
.fluxo.is-salvo .salvar{ color:#0E0906; background:var(--verde); border-color:var(--verde); }
.fluxo.is-salvo .salvar svg{ fill:currentColor; }

.seta{ width:26px; height:26px; display:grid; place-items:center; color:var(--fraco); transition:transform .3s var(--ease), color .25s var(--ease); }
.seta svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fluxo.is-aberto .seta{ transform:rotate(180deg); color:var(--cor); }

/* painel aberto */
.painel{ display:none; padding:0 1.2rem 1.3rem; border-top:1px dashed var(--linha-fraca); margin-top:-1px; }
.fluxo.is-aberto .painel{ display:block; animation:abre .35s var(--ease-out) both; }
@keyframes abre{ from{ opacity:0; translate:0 -6px } to{ opacity:1; translate:0 0 } }

.painel__rot{
  display:block; margin:1.2rem 0 .5rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fraco);
}
.painel p{ margin:0; color:var(--texto); font-size:.95rem; line-height:1.6; }
.painel__papel{
  display:inline-flex; align-items:center; gap:.5rem;
  background:color-mix(in srgb, var(--cor) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--cor) 40%, transparent);
  border-radius:999px; padding:.35rem .85rem;
  font-size:.9rem; font-weight:600; color:var(--creme);
}

.arquivo{ margin-top:.6rem; border:1px solid var(--linha-fraca); border-radius:var(--r); overflow:hidden; }
.arquivo__topo{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.7rem .9rem; background:var(--fosso);
  font-family:var(--mono); font-size:.74rem; color:var(--texto);
}
.arquivo__topo b{ flex:1; min-width:0; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.secoes{ display:grid; }
.secao{ display:grid; grid-template-columns:5.4rem 1fr; gap:1rem; padding:.75rem .9rem; border-top:1px solid var(--linha-fraca); }
.secao:first-child{ border-top:0; }
.secao u{ text-decoration:none; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--cor); padding-top:.2rem; }
.secao b{ display:block; font-size:.9rem; font-weight:600; margin-bottom:.15rem; }
.secao p{ font-size:.87rem; line-height:1.5; }

.acoes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.btn-mini{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--texto); border:1px solid var(--linha); border-radius:8px; padding:.45rem .8rem;
  transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.btn-mini svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.btn-mini:hover{ border-color:var(--cor); color:var(--creme); }
.btn-mini.ok{ background:var(--verde-solido); border-color:var(--verde-solido); color:var(--creme); }

/* abas de ambiente */
.abas{ display:flex; gap:.3rem; margin:.6rem 0 .7rem; flex-wrap:wrap; }
.aba{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--fraco); border:1px solid var(--linha-fraca);
  border-radius:999px; padding:.32rem .75rem;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.aba:hover{ color:var(--creme); }
.aba.is-on{ color:var(--creme); border-color:var(--cor); background:color-mix(in srgb, var(--cor) 14%, transparent); }
.ambiente{ display:none; }
.ambiente.is-on{ display:block; }
.ambiente ol{ margin:0; padding-left:1.1rem; display:grid; gap:.4rem; }
.ambiente li{ font-size:.9rem; color:var(--texto); line-height:1.5; }
.ambiente li::marker{ color:var(--cor); font-family:var(--mono); font-size:.8em; }
.ambiente code, .caminho code{
  font-family:var(--mono); font-size:.85em; background:var(--fosso);
  border-radius:5px; padding:.1em .4em; color:var(--creme);
  overflow-wrap:anywhere;
}
.pedido{
  margin-top:.5rem; padding:.8rem .9rem;
  background:var(--fosso); border-radius:var(--r);
  font-size:.92rem; color:var(--creme); line-height:1.55;
  border-left:2px solid var(--cor);
}

/* fluxo 00 */
.zero{
  background:var(--carta); border:1px solid rgba(237,98,59,.32);
  border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,2.4rem);
  display:grid; gap:1.4rem; grid-template-columns:1fr auto; align-items:center;
}
.zero h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.03em; margin:0 0 .6rem; }
.zero p{ margin:0; color:var(--texto); max-width:52ch; font-size:.98rem; }
@media (max-width:720px){ .zero{ grid-template-columns:1fr; } }

/* fecho */
.fecho{
  margin-top:clamp(2.5rem,6vh,4rem); padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--carta); border:1px solid rgba(237,98,59,.3); border-radius:var(--r-xl);
  display:grid; gap:1.4rem; grid-template-columns:1fr auto; align-items:center;
}
.fecho h2{ margin:0 0 .5rem; font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.03em; }
.fecho p{ margin:0; color:var(--texto); max-width:48ch; }
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 1.8rem; border-radius:var(--r);
  background:var(--verde-solido); color:var(--creme);
  border-bottom:2px solid #1D281D; font-size:1rem; font-weight:600; white-space:nowrap;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.botao:hover{ background:#4E5C4E; transform:translateY(-2px); }
@media (max-width:720px){ .fecho{ grid-template-columns:1fr; } .botao{ width:100%; } }

.rodape{
  margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--linha-fraca);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.72rem; color:var(--fraco);
}
.rodape nav{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.rodape a:hover{ color:var(--creme); }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:1000px){
  .barra{
    position:fixed; left:var(--gap); top:var(--gap); z-index:70;
    transform:translateX(calc(-100% - var(--gap) * 2));
    transition:transform .35s var(--ease-out);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  body.menu-on .barra{ transform:none; }
  .menu-btn{ display:grid; }
}
@media (max-width:560px){
  body{ padding:8px; }
  :root{ --gap:8px; }
  .fluxo__cab{ grid-template-columns:auto 1fr auto; gap:.7rem; padding:.9rem 1rem; }
  .fluxo__cab .seta{ display:none; }
  .secao{ grid-template-columns:1fr; gap:.2rem; }
}

/* entrada */
.js .surge{ opacity:0; translate:0 16px; }
.js .surge.on{ opacity:1; translate:0 0; transition:opacity .6s var(--ease-out), translate .6s var(--ease-out); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .surge{ opacity:1 !important; translate:none !important; transition:none !important; }
  .fluxo.is-aberto .painel{ animation:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}