/* Chaos Archons - identidade Sanatorio do Caos (violeta + teal + osso sobre preto, espiral e glitch).
   Ordem no <head>: site-base.css -> chaos.css -> chaos-fx.css -> styles.css (este, por ultimo). */
#arc {
  --bg:#06080a; --bg2:#0b1013; --card:rgba(8,12,14,.78); --fg:#e9ece6; --bone:#ece5d6; --muted:#93a59f;
  --violet:#9b4dff; --violet2:#c47bff; --teal:#3fb8a5; --teal-d:#1f5f56; --gold:#c9a24a; --magenta:#ff3fd0;
  --line:rgba(63,184,165,.24); --line-v:rgba(155,77,255,.45);
  --accent:var(--violet); --accent2:var(--violet2); --ok:#3fdc9b; --warn:#ffcc66; --err:#ff5d7a;
  --mono:"JetBrains Mono","Share Tech Mono",ui-monospace,Consolas,monospace;
  --title:var(--font-title,"Cinzel","Trajan Pro",Georgia,serif);
  position:relative; isolation:isolate;            /* corrige o fundo que ficava atras do body */
  min-height:100vh; display:flex; flex-direction:column; color:var(--fg); color-scheme:dark;
  font-family:var(--font-body,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); line-height:1.5;
}
html, body { margin:0; background:#06080a; }
#arc::before { content:""; position:fixed; inset:0; z-index:-2;
  background:#06080a url("brand/quintal-arcontes.jpg") center 30%/cover no-repeat; }
#arc::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(155,77,255,.18) 0%, transparent 45%),
    linear-gradient(180deg, rgba(6,8,10,.35) 0%, rgba(6,8,10,.70) 45%, rgba(6,8,10,.94) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }   /* scanlines sutis */
#arc * { box-sizing:border-box; }
#arc .hidden { display:none !important; }
#arc .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- topo / rodape */
#arc .arc-top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 22px; background:rgba(6,8,10,.80); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
#arc .arc-brand { display:flex; align-items:center; gap:10px; font-family:var(--title); font-weight:700; font-size:17px; color:var(--bone);
  text-decoration:none; letter-spacing:.04em; }
#arc .arc-brand img { filter:drop-shadow(0 0 8px rgba(155,77,255,.7)); animation:arc-spin 18s linear infinite; }
#arc .arc-brand span { color:var(--violet2); text-shadow:0 0 12px rgba(155,77,255,.6); }
#arc nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:14px; }
#arc nav .muted { padding:0 8px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--teal); }
#arc main { width:100%; max-width:920px; margin:32px auto; padding:0 16px; flex:1; }
#arc .arc-foot { text-align:center; padding:18px; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; background:rgba(6,8,10,.85); border-top:1px solid var(--line); }

/* ---------- tipografia */
#arc h1, #arc h2 { font-family:var(--title); color:var(--bone); letter-spacing:.04em; }
#arc h1 { margin:0 0 10px; font-size:clamp(38px,8vw,64px); text-transform:uppercase; position:relative; display:inline-block;
  text-shadow:0 0 28px rgba(155,77,255,.55); }
#arc h1[data-text]::before, #arc h1[data-text]::after { content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:.75; }
#arc h1[data-text]::before { color:var(--magenta); transform:translate(2px,0); clip-path:inset(0 0 62% 0); animation:arc-glitch 4.2s steps(1) infinite; }
#arc h1[data-text]::after  { color:var(--teal);    transform:translate(-2px,0); clip-path:inset(58% 0 0 0); animation:arc-glitch 3.6s steps(1) infinite reverse; }
#arc h2 { margin:0 0 8px; font-size:26px; }
#arc .eyebrow { font-family:var(--mono); color:var(--teal); text-transform:uppercase; letter-spacing:.28em; font-size:12px; font-weight:600; margin:0 0 8px; }
#arc .eyebrow::before { content:"// "; color:var(--violet2); }
#arc .lead { color:var(--muted); max-width:640px; margin:0 0 18px; } #arc .hero .lead { margin:0 auto 24px; }
#arc .muted, #arc .hint { color:var(--muted); } #arc .hint { font-size:13px; }
#arc .msg { min-height:1.4em; margin:0 0 10px; color:var(--muted); text-shadow:0 1px 4px #000; font-family:var(--mono); font-size:13px; }
#arc .ok, #arc .msg.ok { color:var(--ok); } #arc .err, #arc .msg.err { color:var(--err); }

/* ---------- cards */
#arc .card { position:relative; background:var(--card); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px;
  padding:28px; margin-bottom:20px; box-shadow:0 12px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03); }
#arc .card::before { content:""; position:absolute; left:18px; right:18px; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--violet), var(--teal), transparent); opacity:.8; }
#arc .hero { text-align:center; padding:56px 26px 44px; margin-top:8vh; overflow:hidden; }
#arc .hero::after { content:""; position:absolute; width:520px; height:520px; left:50%; top:-260px; transform:translateX(-50%); z-index:-1;
  background:conic-gradient(from 0deg, transparent, rgba(155,77,255,.25), transparent 40%, rgba(63,184,165,.18), transparent 75%);
  border-radius:50%; filter:blur(30px); animation:arc-spin 26s linear infinite; }
#arc .hero-logo { max-width:180px; height:auto; margin-bottom:14px; filter:drop-shadow(0 0 22px rgba(155,77,255,.55)); }
#arc .tagline { font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--teal); text-transform:uppercase; margin:18px 0 0; }

/* ---------- botoes */
#arc .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 22px; border-radius:10px;
  border:1px solid var(--line); background:rgba(63,184,165,.06); color:var(--fg); font:inherit; font-weight:600; cursor:pointer;
  text-decoration:none; position:relative; overflow:hidden; transition:transform .15s, box-shadow .2s, border-color .2s, color .2s; }
#arc .btn:hover { border-color:var(--teal); color:#fff; box-shadow:0 0 16px rgba(63,184,165,.35); }
#arc .btn.primary { background:linear-gradient(135deg,#6d2bd9,var(--violet) 55%,var(--violet2)); border-color:transparent; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4); box-shadow:0 0 0 1px rgba(196,123,255,.35), 0 0 18px rgba(155,77,255,.35); }
#arc .btn.primary::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-20deg); transition:left .5s; }
#arc .btn.primary:hover { transform:translateY(-1px); box-shadow:0 0 0 1px var(--violet2), 0 0 30px rgba(155,77,255,.65); }
#arc .btn.primary:hover::after { left:120%; }
#arc .btn.primary:active { animation:arc-shake .25s; }
#arc .btn.sm { padding:7px 14px; font-size:13px; } #arc .btn.ghost { background:transparent; }
#arc .btn[disabled] { opacity:.6; cursor:wait; }
#arc button.link { background:none; border:0; color:var(--fg); cursor:pointer; padding:6px 10px; border-radius:8px; font:inherit; transition:color .15s, background .15s; }
#arc button.link:hover { color:var(--violet2); background:rgba(155,77,255,.10); }
#arc :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--violet2); outline-offset:2px; }

/* ---------- onboarding */
#arc .grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
#arc .archon { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 12px; border-radius:14px;
  border:1px solid var(--line); background:rgba(6,8,10,.65); color:var(--fg); text-align:center; font:inherit; overflow:hidden; }
#arc .archon .ico { font-size:34px; filter:drop-shadow(0 0 10px rgba(155,77,255,.6)); }
#arc .archon strong { font-family:var(--title); color:var(--bone); } #arc .archon small { color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
#arc .archon.active { cursor:pointer; border-color:var(--line-v); transition:box-shadow .2s, transform .2s, border-color .2s; }
#arc .archon.active::before { content:""; position:absolute; inset:-40%; z-index:-1; opacity:0; transition:opacity .3s;
  background:conic-gradient(from 0deg, transparent, rgba(155,77,255,.35), transparent 35%, rgba(63,184,165,.25), transparent 70%); animation:arc-spin 6s linear infinite; }
#arc .archon.active:hover { box-shadow:0 0 30px rgba(155,77,255,.45); transform:translateY(-3px); border-color:var(--violet2); }
#arc .archon.active:hover::before { opacity:1; }
#arc .archon.soon { opacity:.42; filter:grayscale(.7); }

/* ---------- formulario */
#arc .steps { display:flex; gap:8px; list-style:none; padding:0; margin:10px 0 24px; counter-reset:s; flex-wrap:wrap; }
#arc .steps li { counter-increment:s; display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); font-size:13px; background:rgba(6,8,10,.5); }
#arc .steps li::before { content:counter(s); display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  font-family:var(--mono); font-size:12px; font-weight:700; background:rgba(63,184,165,.12); color:var(--teal); border:1px solid var(--line); }
#arc .steps li.on { color:var(--fg); border-color:var(--line-v); }
#arc .steps li.on::before { background:var(--violet); color:#fff; border-color:var(--violet2); box-shadow:0 0 12px rgba(155,77,255,.7); }
#arc fieldset { border:0; padding:0; margin:0; min-width:0; }
#arc label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; letter-spacing:.02em; margin-bottom:16px; color:var(--bone); }
#arc label small { font-weight:400; }
#arc label.chk { flex-direction:row; align-items:center; gap:8px; font-weight:400; color:var(--fg); }
#arc input[type=checkbox], #arc input[type=radio] { accent-color:var(--violet); width:16px; height:16px; }
#arc input:not([type=checkbox]):not([type=radio]), #arc select, #arc textarea { font:inherit; font-weight:400; width:100%; min-width:0;
  padding:10px 12px; border-radius:10px; border:1px solid rgba(63,184,165,.22); background:rgba(3,5,6,.78); color:var(--fg);
  transition:border-color .15s, box-shadow .15s; }
#arc input::placeholder, #arc textarea::placeholder { color:#5f6f6a; }
#arc input:focus, #arc select:focus, #arc textarea:focus { border-color:var(--violet2); outline:none; box-shadow:0 0 0 3px rgba(155,77,255,.22), 0 0 14px rgba(155,77,255,.25); }
#arc select option { background:#0b1013; color:var(--fg); }
#arc .f2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 16px; }
#arc .mt { margin-top:14px; }
#arc details { margin:6px 0 4px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background:rgba(3,5,6,.4); }
#arc summary { cursor:pointer; color:var(--teal); font-family:var(--mono); font-size:13px; letter-spacing:.06em; }
#arc details[open] summary { margin-bottom:12px; }
#arc .irow { display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; align-items:center; margin-bottom:8px; }
#arc .irow label { margin:0; }
@media (max-width:560px) { #arc .irow { grid-template-columns:1fr 1fr; } }
#arc .lbl { margin:14px 0 8px; font-size:13px; font-weight:600; color:var(--bone); }
#arc .chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
#arc .chip { padding:6px 13px; border-radius:999px; border:1px solid rgba(63,184,165,.22); background:rgba(3,5,6,.6); color:var(--fg); font:inherit; font-size:13px; }
#arc button.chip { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
#arc button.chip:hover { border-color:var(--teal); }
#arc .chip[aria-pressed="true"], #arc .chips.ro .chip { background:rgba(155,77,255,.22); border-color:var(--violet2); color:#fff; box-shadow:0 0 10px rgba(155,77,255,.35); }
#arc .wz-nav { display:flex; justify-content:space-between; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- perfil */
#arc .prof-head { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
#arc .prof-head > div:nth-child(2) { flex:1; min-width:180px; }
#arc .avatar { position:relative; width:88px; height:88px; border-radius:50%; display:grid; place-items:center; font-family:var(--title);
  font-size:36px; font-weight:800; color:var(--bone); background:radial-gradient(circle at 50% 40%, #2a1450, #07090b 70%);
  border:2px solid var(--violet); box-shadow:0 0 24px rgba(155,77,255,.55), inset 0 0 18px rgba(155,77,255,.35); }
#arc .avatar::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1px dashed var(--teal); animation:arc-spin 14s linear infinite; }
#arc .roles { color:var(--violet2); font-weight:700; margin:2px 0; } #arc .prof h2 { margin:0; }
#arc .dl { display:grid; grid-template-columns:max-content 1fr; gap:8px 16px; margin:18px 0; }
#arc .dl dt { color:var(--teal); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding-top:2px; }
#arc .dl dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:480px) { #arc .dl { grid-template-columns:1fr; } #arc .dl dd { margin-bottom:6px; } }
#arc .plinks { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }

/* ---------- bandas */
#arc .bands { list-style:none; padding:0; margin:10px 0; }
#arc .bands li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line); }
#arc .bands strong { font-family:var(--title); color:var(--bone); }
#arc .row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } #arc .row input { flex:1 1 200px; }

/* ---------- animacoes */
@keyframes arc-spin { to { transform:rotate(360deg); } }
#arc .hero::after { animation-name:arc-spin-x; } @keyframes arc-spin-x { to { transform:translateX(-50%) rotate(360deg); } }
@keyframes arc-glitch { 0%,88%,100% { transform:translate(0,0); opacity:0; } 89% { transform:translate(3px,-1px); opacity:.8; }
  92% { transform:translate(-3px,1px); opacity:.8; } 95% { transform:translate(2px,0); opacity:.6; } }
@keyframes arc-shake { 0%,100% { transform:translate(0); } 25% { transform:translate(-2px,1px); } 75% { transform:translate(2px,-1px); } }
/* respeita o botao "Efeitos: caos desligado" do chaos-fx e a preferencia do sistema */
@media (prefers-reduced-motion:reduce) { #arc *, #arc *::before, #arc *::after, #arc .arc-brand img { animation:none !important; transition:none !important; } }
:is(html,body).fx-off #arc *, :is(html,body).fx-off #arc *::before, :is(html,body).fx-off #arc *::after,
:is(html,body)[data-fx="off"] #arc *, :is(html,body)[data-fx="off"] #arc *::before, :is(html,body)[data-fx="off"] #arc *::after { animation:none !important; }