/* Páginas estáticas (Sobre, 404): tokens, topo, revelações e rodapé.
   Autônomo: não depende do app.css. */
:root {
  --bg: #0b0b0c; --bg-2: #121214; --bg-3: #19191c;
  --ink: #f3f1ec; --ink-2: rgba(243,241,236,.66); --ink-3: rgba(243,241,236,.54);
  --line: rgba(243,241,236,.09); --line-2: rgba(243,241,236,.16);
  --accent: #d4ff3a; --accent-ink: #0b0b0c;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(16px, 3.2vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* idioma: blocos data-l mostram só o ativo */
html:not([lang^="pt"]) [data-l="pt"], html[lang^="pt"] [data-l="en"] { display: none !important; }

/* grão estático: basta cobrir a tela (inset -50% criava uma camada de GPU 4x maior) */
.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* topo */
.pg-top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gutter); }
.pg-top::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(var(--bg) 30%, rgba(11,11,12,0)); opacity: 0; transition: opacity .4s var(--ease-out); }
body.is-scrolled .pg-top::before { opacity: 1; }
.wordmark { font-family: var(--serif); font-style: italic; font-size: 28px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.star { width: 20px; height: 20px; fill: var(--accent); flex: none; }
.wordmark .star, .rstar { animation: star-spin 16s linear infinite, rainbow 9s linear infinite; filter: drop-shadow(0 0 6px rgba(212,255,58,.55)); }
.wordmark:hover .star { animation-duration: 2.4s, 3s; }
@keyframes star-spin { to { transform: rotate(360deg); } }
@keyframes rainbow {
  0% { filter: saturate(1.8) hue-rotate(0deg) drop-shadow(0 0 6px rgba(212,255,58,.55)); }
  50% { filter: saturate(1.8) hue-rotate(180deg) drop-shadow(0 0 10px rgba(120,180,255,.6)); }
  100% { filter: saturate(1.8) hue-rotate(360deg) drop-shadow(0 0 6px rgba(212,255,58,.55)); }
}
.wordmark span { background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, #d4ff3a 44%, #5cf2ff 50%, #a879ff 56%, #ff6ad5 62%, var(--ink) 68%, var(--ink) 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 7s cubic-bezier(.65,0,.35,1) infinite; padding-right: .08em; }
@keyframes sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; background: rgba(11,11,12,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lang span { padding: 5px 9px; border-radius: 999px; color: var(--ink-3); transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
html:not([lang^="pt"]) .lang [data-k="en"], html[lang^="pt"] .lang [data-k="pt"] { background: var(--ink); color: var(--bg); }

/* revelações: só escondem quando o JS está ativo */
html.js .rv { opacity: 0; transform: translateY(16px); filter: blur(6px); }
html.js .rv.in { opacity: 1; transform: none; filter: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; }
html.js .split .ch { opacity: 0; transform: translateY(70%); filter: blur(8px); }
html.js.pg-on .split .ch { opacity: 1; transform: none; filter: none; transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), filter 800ms var(--ease-out); transition-delay: calc(var(--i) * 34ms + 120ms); }

/* botão-pílula */
.cta { display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 24px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; border: 1px solid var(--ink); transition: transform .16s var(--ease-out), background-color .25s var(--ease-out); }
.cta i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--accent); transition: transform .4s var(--ease-out); }
.cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cta:active { transform: scale(.97); }
.cta.is-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); padding-left: 22px; padding-right: 22px; height: 52px; }
@media (hover: hover) and (pointer: fine) { .cta:hover i { transform: translate(2px, -2px) scale(1.06); } .cta.is-ghost:hover { background: rgba(243,241,236,.08); border-color: rgba(243,241,236,.34); } }

/* rodapé */
.foot { padding: 40px var(--gutter) 48px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.foot-links { display: inline-flex; gap: 18px; }

/* ───────── Sobre ───────── */
.ab-hero { min-height: 82svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gutter) 64px; position: relative; isolation: isolate; background: radial-gradient(90% 60% at 80% 0%, #181a10 0%, rgba(11,11,12,0) 70%); }
.ab-hero .rstar { position: absolute; right: var(--gutter); top: 18%; width: clamp(90px, 16vw, 240px); height: auto; aspect-ratio: 1; fill: var(--accent); z-index: -1; opacity: .9; }
.ab-title { font-family: var(--serif); font-weight: 400; font-size: clamp(110px, 24vw, 380px); line-height: .82; letter-spacing: -.05em; padding-bottom: .06em; }
.ab-title em { font-style: italic; color: var(--accent); }
.ab-sub { margin-top: 36px; max-width: 30ch; font-family: var(--serif); font-size: clamp(24px, 3vw, 40px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink-2); text-wrap: balance; }
.ab-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px var(--gutter); padding: 88px var(--gutter); border-top: 1px solid var(--line); }
.lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 14px; align-items: baseline; }
.lbl b { color: var(--accent); font-weight: 500; }
.ab-body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.ab-body h2 em { font-style: italic; }
.ab-body p { margin-top: 24px; max-width: 58ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ab-body p b { color: var(--ink); font-weight: 500; }
.tiles { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(243,241,236,.025); }
.tile small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.tile p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: none; }
.rows { margin-top: 36px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 12px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row dt { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row dd { color: var(--ink-2); font-size: 16px; }
.row dd b { color: var(--ink); font-weight: 500; }
kbd { font-family: var(--mono); font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-2); }
.ab-end { padding: 120px var(--gutter) 128px; text-align: center; border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 36px; }
.ab-end h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 8vw, 120px); line-height: .92; letter-spacing: -.04em; text-wrap: balance; }
.ab-end h2 em { font-style: italic; color: var(--accent); }

/* ───────── 404 ───────── */
.nf { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 100px var(--gutter) 40px; }
.mosaic { position: absolute; inset: -12% -8%; z-index: -2; pointer-events: none; }
.mosaic-par { position: absolute; inset: 0; will-change: transform; }
.mosaic-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: clamp(10px, 1.6vw, 24px); animation: drift 60s ease-in-out infinite alternate; }
.mosaic-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; opacity: .18; }
.mosaic-grid img:nth-child(3n+2) { transform: translateY(14%); }
.mosaic-grid img:nth-child(4n) { transform: translateY(-10%); }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(3%, 2%, 0); } }
.nf::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(11,11,12,.15), rgba(11,11,12,.88) 100%); pointer-events: none; }
.nf-in { display: grid; justify-items: center; text-align: center; gap: 0; }
.nf-num { font-family: var(--serif); font-size: clamp(130px, 30vw, 440px); line-height: .8; letter-spacing: -.04em; display: flex; align-items: center; justify-content: center; gap: .02em; padding-bottom: .08em; }
.nf-num .rstar { width: .66em; height: .66em; fill: var(--accent); animation-duration: 40s, 9s; margin: 0 .02em; }
.nf-line { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: clamp(32px, 5vw, 68px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.nf-sub { margin-top: 14px; font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-2); }
.nf-act { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }

@media (max-width: 760px) {
  .ab-sec { grid-template-columns: 1fr; padding: 64px var(--gutter); }
  .tiles { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .ab-hero { min-height: 74svh; }
  .mosaic-grid { grid-template-columns: repeat(3, 1fr); }
  .nf-num { font-size: 40vw; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark .star, .rstar { animation: none; }
  .wordmark span { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .mosaic-grid { animation: none; }
  html.js .rv, html.js .split .ch { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  * { transition-duration: .01ms !important; }
}

/* seção "Para agentes de IA": comando e links dentro das linhas */
.row dd code { display: block; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--ink); font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.row dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease-out); }
.row dd a:hover { text-decoration-color: currentColor; }