/* xiteto.com · sistema visual
   Dois mundos, uma marca:
   · claro = "papel": tinta sobre papel com fibra, editorial, laranja terroso como carimbo;
   · escuro = "arena": carvão com grade de pontos e varredura, painéis com canto chanfrado, rótulos de HUD, brilho de brasa.
   Cores vêm de tokens.css (gerado de xiteto/marca/cores.json). Inclinação da marca: 12°. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fontes/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fontes/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fontes/archivo-latin-wdth-italic.woff2) format('woff2-variations'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(/fontes/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations'); }

/* ---------- temas ---------- */
:root {
  --inclina: -12deg;
  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --raio: 2px;
  --largura: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  /* claro (padrão) */
  --fundo: var(--papel);
  --fundo-2: var(--neutros-papel-2);
  --superficie: #F7F2E9;
  --linha: var(--neutros-papel-3);
  --texto: var(--tinta);
  --texto-2: var(--neutros-grafite);
  --acento: var(--argila-600);        /* texto e links: contraste AA sobre o papel */
  --acento-forte: var(--brasa);       /* blocos, botões, o X */
  --acento-suave: var(--argila-100);
  --sobre-acento: var(--papel);
  --brilho: none;
  --textura:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: var(--tinta);
    --fundo-2: var(--neutros-carvao);
    --superficie: var(--neutros-carvao);
    --linha: var(--neutros-carvao-3);
    --texto: #F3EDE3;
    --texto-2: var(--neutros-cinza);
    --acento: var(--argila-300);
    --acento-forte: var(--argila-400);
    --acento-suave: rgba(217, 128, 74, .14);
    --sobre-acento: var(--tinta);
    --brilho: 0 0 0 1px rgba(217,128,74,.35), 0 0 24px rgba(217,128,74,.22);
    --textura:
      repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
      radial-gradient(rgba(243,237,227,.07) 1px, transparent 1.2px);
    --textura-tam: auto, 22px 22px;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: var(--tinta);
  --fundo-2: var(--neutros-carvao);
  --superficie: var(--neutros-carvao);
  --linha: var(--neutros-carvao-3);
  --texto: #F3EDE3;
  --texto-2: var(--neutros-cinza);
  --acento: var(--argila-300);
  --acento-forte: var(--argila-400);
  --acento-suave: rgba(217, 128, 74, .14);
  --sobre-acento: var(--tinta);
  --brilho: 0 0 0 1px rgba(217,128,74,.35), 0 0 24px rgba(217,128,74,.22);
  --textura:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(243,237,227,.07) 1px, transparent 1.2px);
    --textura-tam: auto, 22px 22px;
  color-scheme: dark;
}

/* troca de logo por tema */
.so-escuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .so-escuro { display: inline-block; } :root:not([data-theme="light"]) .so-claro { display: none; } }
:root[data-theme="dark"] .so-escuro { display: inline-block; }
:root[data-theme="dark"] .so-claro { display: none; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: var(--fonte); font-size: clamp(16px, 1.05vw + 12px, 18px); line-height: 1.6; font-stretch: 100%;
  color: var(--texto); background-color: var(--fundo); background-image: var(--textura); background-size: var(--textura-tam, auto); background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--acento); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--acento-forte); }
:focus-visible { outline: 3px solid var(--acento-forte); outline-offset: 3px; }
::selection { background: var(--acento-forte); color: var(--sobre-acento); }
h1, h2, h3 { font-weight: 800; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 88px); font-stretch: 112%; }
h2 { font-size: clamp(28px, 3.6vw, 44px); font-stretch: 108%; }
h3 { font-size: clamp(19px, 1.6vw, 22px); font-stretch: 100%; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--acento-forte); color: var(--sobre-acento); padding: 8px 14px; }
.pular:focus { left: 16px; }

/* rótulo de HUD / carimbo: o mesmo elemento muda de alma com o tema */
.rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 .8em; }
.rotulo b { color: var(--acento); font-weight: 600; }

.envelope { width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 20px;
  padding: 12px var(--gutter); background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha);
}
.topo-marca { display: inline-flex; line-height: 0; }
.topo-marca img { height: 34px; width: auto; }
.topo-nav { display: flex; gap: clamp(12px, 2.4vw, 28px); margin-left: auto; font-size: 15px; font-weight: 600; }
.topo-nav a { color: var(--texto); text-decoration: none; }
.topo-nav a:hover { color: var(--acento); }
.tema {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: var(--superficie);
  color: var(--texto); font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 10px; border-radius: var(--raio); cursor: pointer;
}
.tema:hover { border-color: var(--acento-forte); }
.tema-icone { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
:root[data-theme="light"] .tema-icone { background: transparent; }
:root[data-theme="dark"] .tema-icone { background: currentColor; }
@media (max-width: 720px) {
  .topo { flex-wrap: wrap; row-gap: 8px; }
  .topo-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; font-size: 14px; }
  .tema { margin-left: auto; }
  .tema-rotulo { display: none; }
}

/* ---------- herói ---------- */
.heroi { position: relative; padding: clamp(56px, 10vw, 128px) 0 clamp(48px, 8vw, 96px); overflow: hidden; }
.heroi h1 { max-width: 13ch; }
.heroi h1 em { font-style: normal; color: var(--acento-forte); display: inline-block; transform: skewX(var(--inclina)); }
.heroi .lead { font-size: clamp(18px, 1.6vw, 22px); max-width: 46ch; color: var(--texto-2); }
.heroi-x { position: absolute; right: -6vw; top: 50%; translate: 0 -50%; width: min(52vw, 620px); opacity: .1; pointer-events: none; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.botao {
  --corte: 12px;
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-weight: 700; font-size: 16px; text-decoration: none;
  background: var(--acento-forte); color: var(--sobre-acento); border: 0;
  clip-path: polygon(var(--corte) 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%);
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao:hover { color: var(--sobre-acento); transform: translateY(-2px); box-shadow: var(--brilho); }
.botao.fantasma { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px var(--texto); clip-path: none; transform: skewX(var(--inclina)); }
.botao.fantasma > span { display: inline-block; transform: skewX(calc(-1 * var(--inclina))); }
.botao.fantasma:hover { color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento-forte); }

/* ---------- faixas e seções ---------- */
.secao { padding: clamp(56px, 8vw, 104px) 0; }
.secao-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.secao-topo p { max-width: 52ch; color: var(--texto-2); margin: 0; }
.faixa {
  background: var(--acento-forte); color: var(--sobre-acento); overflow: hidden; white-space: nowrap;
  font: 700 clamp(18px, 2.4vw, 28px)/1 var(--fonte); font-stretch: 120%; text-transform: uppercase; letter-spacing: .02em;
  padding: 14px 0; transform: skewY(-2deg); margin: 8px 0;
}
.faixa span { display: inline-block; padding-right: 2em; animation: rolar 38s linear infinite; }
@keyframes rolar { to { transform: translateX(-100%); } }

/* ---------- cartões ---------- */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cartao {
  --corte: 18px;
  position: relative; background: var(--superficie); padding: 28px 24px 24px; border: 1px solid var(--linha);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cartao h3 { margin-top: 10px; }
.cartao p { color: var(--texto-2); margin: 0; font-size: 16px; }
.cartao .nivel { position: absolute; top: 14px; right: 16px; font: 600 11px var(--mono); color: var(--acento); letter-spacing: .1em; }
.cartao:hover { transform: translateY(-3px); border-color: var(--acento-forte); }
/* papel: sombra de recorte colado */
.cartao { box-shadow: 4px 4px 0 var(--linha); }
.cartao:hover { box-shadow: 6px 6px 0 var(--acento-forte); }

/* barra de "experiência": usada nos portões */
.xp { height: 8px; background: var(--linha); margin-top: 18px; position: relative; overflow: hidden; }
.xp i { position: absolute; inset: 0 auto 0 0; background: var(--acento-forte); width: 33%; }
.xp-2 i { width: 66%; } .xp-3 i { width: 100%; }
.cartao .cartao-link { margin-top: 12px; }

/* ---------- arena (tema escuro): painéis chanfrados, brilho e HUD ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cartao { clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); box-shadow: none; }
  :root:not([data-theme="light"]) .cartao:hover { box-shadow: var(--brilho); background: linear-gradient(180deg, rgba(217,128,74,.08), transparent 60%), var(--superficie); }
  :root:not([data-theme="light"]) .xp i { box-shadow: 0 0 12px var(--acento-forte); background: repeating-linear-gradient(90deg, var(--acento-forte) 0 10px, transparent 10px 12px); }
  :root:not([data-theme="light"]) .rotulo::before { content: '▸ '; color: var(--acento); }
  :root:not([data-theme="light"]) .heroi-x { opacity: .16; filter: drop-shadow(0 0 40px rgba(217,128,74,.35)); }
}
:root[data-theme="dark"] .cartao { clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); box-shadow: none; }
:root[data-theme="dark"] .cartao:hover { box-shadow: var(--brilho); background: linear-gradient(180deg, rgba(217,128,74,.08), transparent 60%), var(--superficie); }
:root[data-theme="dark"] .xp i { box-shadow: 0 0 12px var(--acento-forte); background: repeating-linear-gradient(90deg, var(--acento-forte) 0 10px, transparent 10px 12px); }
:root[data-theme="dark"] .rotulo::before { content: '▸ '; color: var(--acento); }
:root[data-theme="dark"] .heroi-x { opacity: .16; filter: drop-shadow(0 0 40px rgba(217,128,74,.35)); }

/* ---------- lista de princípios ---------- */
.principios { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--texto); }
.principios li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.principios .n { font: 700 14px var(--mono); color: var(--acento); padding-top: 4px; }
.principios h3 { margin: 0 0 4px; }
.principios p { margin: 0; color: var(--texto-2); }

/* ---------- chamada final ---------- */
.chamada { position: relative; background: var(--texto); color: var(--fundo); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); overflow: hidden; }
.chamada h2 { color: var(--fundo); max-width: 18ch; }
.chamada p { color: color-mix(in srgb, var(--fundo) 75%, transparent); max-width: 50ch; }
.chamada .rotulo { color: inherit; opacity: .7; }
.chamada .botao { background: var(--acento-forte); color: var(--tinta); }
.chamada::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; background: var(--acento-forte); transform: skewX(var(--inclina)); opacity: .9; }
.chamada > * { position: relative; z-index: 1; }

/* ---------- páginas legais ---------- */
.legal { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding: clamp(40px, 7vw, 88px) 0; }
.legal h1 { font-size: clamp(36px, 5.6vw, 60px); }
.legal h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 2.2em; padding-top: .6em; border-top: 1px solid var(--linha); scroll-margin-top: 90px; }
.legal h3 { margin-top: 1.6em; }
.legal .lead { font-size: clamp(18px, 1.4vw, 20px); padding: 18px 20px; background: var(--acento-suave); border-left: 4px solid var(--acento-forte); }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin: .3em 0; }
.toc { margin: 24px 0 8px; padding: 18px 20px; border: 1px solid var(--linha); background: var(--superficie); }
.toc ul, .toc ol { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 24px; }
.toc li { break-inside: avoid; margin: .2em 0; font-size: 15px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: 15px; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linha); min-width: 140px; }
.legal th { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); border-bottom: 2px solid var(--texto); }
.legal-data { margin-bottom: 18px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); margin-top: 40px; padding: 48px var(--gutter) 28px; background: var(--fundo-2); }
.rodape-grade { width: min(100%, var(--largura)); margin: 0 auto; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin: .35em 0; font-size: 15px; }
.rodape a { color: var(--texto); text-decoration: none; }
.rodape a:hover { color: var(--acento); }
.rodape-assina { color: var(--texto-2); margin-top: 12px; font-size: 15px; }
.rodape-fim { width: min(100%, var(--largura)); margin: 32px auto 0; padding-top: 16px; border-top: 1px solid var(--linha); font: 12px var(--mono); color: var(--texto-2); }

/* ---------- 404 ---------- */
.erro { min-height: 60vh; display: grid; place-content: center; text-align: center; padding: 48px var(--gutter); }
.erro h1 { font-size: clamp(28px, 4vw, 40px); }
.erro .codigo { font: 800 clamp(96px, 20vw, 220px)/1 var(--fonte); font-stretch: 125%; color: var(--acento-forte); transform: skewX(var(--inclina)); }

/* revelar ao rolar (só se o JS ligou e a pessoa aceita movimento) */
.js .revela { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revela { opacity: 1; transform: none; }
}
@media print { .topo, .rodape, .tema, .heroi-x { display: none; } body { background: #fff; color: #000; } }