/* Coliseu Old Gym Ivoti · sistema de design "caderno de ferro".
   Conceito: a ficha de treino anotada à mão num galpão de ferro. Grade de 12 colunas, filetes finos, título condensado e pesado
   (a placa da academia), números em mono (a carga na barra). Uma cor de acento só, a brasa que está no logo.
   Cores tiradas do logo: preto quente #0e0e0e, prata do capacete #9fa09f, laranja do Coliseu iluminado. Sem degradê de ouro. */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; src: url("fontes/archivo-latin-wdth-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-style: normal; font-display: swap; src: url("fontes/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); }

:root {
  --bg: #0e0e0d; --bg-2: #151513; --bg-3: #1c1c1a; --bg-4: #252522;
  --linha: #2b2b28; --linha-2: #43433e;
  --fg: #efece3; --fg-2: #aeaba1; --fg-3: #7e7c73;
  --brasa: #e8892c; --brasa-2: #ffb15e; --brasa-tinta: #190d02;
  --ferro: #9fa09f;
  --ok: #67c487; --alerta: #e9b53a; --erro: #ee5f5a;
  --f-corpo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --raio: 2px;
  --rail: 232px;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --bg: #f2efe6; --bg-2: #eae6d9; --bg-3: #e2ddcd; --bg-4: #d8d2bf;
  --linha: #d3cdbb; --linha-2: #aaa38f;
  --fg: #151412; --fg-2: #4d4a42; --fg-3: #6f6b60;
  --brasa: #b85a08; --brasa-2: #8f4403; --brasa-tinta: #fff7ec;
  --ferro: #6a6b6a;
  --ok: #1d7a45; --alerta: #8a5d00; --erro: #b3261e;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.62 var(--f-corpo); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--brasa); color: var(--brasa-tinta); }
:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; }
.contenedor { width: min(1280px, 100% - 56px); margin-inline: auto; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--brasa); color: var(--brasa-tinta); padding: 8px 14px; z-index: 100; }
.pular:focus { left: 8px; }
.suave { color: var(--fg-2); }

/* ---------- tipografia ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--fg); text-wrap: balance; }
.titulo { font-weight: 850; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.005em; line-height: .88; }
h1 { font-weight: 850; font-stretch: 66%; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; font-size: clamp(3rem, 9.5vw, 8rem); }
h2 { font-weight: 800; font-stretch: 70%; text-transform: uppercase; line-height: .92; letter-spacing: 0; font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
h3 { font-weight: 700; font-stretch: 85%; font-size: 1.25rem; line-height: 1.2; letter-spacing: .005em; }
h4 { font-weight: 700; font-size: .95rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
.mono, .rotulo { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.rotulo b, .mono b { color: var(--fg); font-weight: 600; }
.num { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lide { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--fg-2); max-width: 52ch; }
.pendente { font-style: normal; color: var(--alerta); border-bottom: 1px dashed currentColor; }

/* ---------- botões, etiquetas, formulários ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border: 1px solid var(--brasa); background: var(--brasa); color: var(--brasa-tinta); font: 700 .9rem/1 var(--f-corpo); font-stretch: 80%; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: var(--raio); transition: background .15s, color .15s, border-color .15s; }
.botao:hover { background: var(--brasa-2); border-color: var(--brasa-2); color: var(--brasa-tinta); }
.botao.vazado { background: transparent; color: var(--fg); border-color: var(--linha-2); }
.botao.vazado:hover { border-color: var(--fg); background: transparent; color: var(--fg); }
.botao.pequeno { min-height: 36px; padding: 0 14px; font-size: .78rem; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font: 500 .68rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--linha-2); color: var(--fg-2); border-radius: var(--raio); }
.etiqueta.brasa { color: var(--brasa); border-color: color-mix(in srgb, var(--brasa) 55%, transparent); }
label { display: grid; gap: 6px; font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
input, select, textarea { background: var(--bg-2); color: var(--fg); border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 12px 12px; font: 500 1rem/1.2 var(--f-mono); letter-spacing: 0; text-transform: none; width: 100%; min-height: 46px; }
input:hover, select:hover, textarea:hover { border-color: var(--fg-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brasa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brasa) 28%, transparent); }
input::placeholder { color: var(--fg-3); }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo .contenedor { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 40px; height: 40px; border-radius: 50%; }
.marca-txt { display: grid; gap: 3px; line-height: 1; }
.marca-txt b { font: 850 1.05rem/1 var(--f-corpo); font-stretch: 70%; letter-spacing: .09em; text-transform: uppercase; }
.marca-txt span { font: 500 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { font: 500 .72rem/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--fg-2); padding: 12px 12px; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--fg); }
.menu a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--brasa); }
.acoes-topo { display: flex; gap: 10px; align-items: center; }
.tema { width: 40px; height: 40px; border: 1px solid var(--linha-2); background: transparent; color: var(--fg-2); cursor: pointer; border-radius: var(--raio); display: grid; place-items: center; }
.tema:hover { color: var(--fg); border-color: var(--fg-3); }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.burger { display: none; }
.menu-movel { display: none; }
@media (max-width: 980px) {
  .contenedor { width: min(1280px, 100% - 32px); }
  .menu, .acoes-topo .botao { display: none; }
  .acoes-topo { margin-left: auto; }
  .burger { display: grid; width: 40px; height: 40px; border: 1px solid var(--linha-2); background: transparent; color: var(--fg); cursor: pointer; place-items: center; border-radius: var(--raio); }
  .burger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
  .menu-movel { position: fixed; inset: 64px 0 0 0; z-index: 39; background: var(--bg); padding: 12px 16px 40px; overflow-y: auto; }
  .menu-movel[data-aberto] { display: grid; align-content: start; }
  .menu-movel a { font: 850 2.4rem/1 var(--f-corpo); font-stretch: 66%; text-transform: uppercase; text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--linha); }
  .menu-movel a[aria-current="page"] { color: var(--brasa); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .topo, .rodape, .acoes-topo { display: none; } body { background: #fff; color: #000; } }