/* Tema LEANDRO para o OURIVIC. Geometria glitch e meio-tom, acento menta.
   Só estética: nenhuma regra aqui sabe o que é um bloco por dentro. */

:root {
  --ou-fundo: #060607;
  --ou-tinta: #f6f6f4;
  --ou-tinta-fraca: #aeb0b3;
  --ou-linha: rgba(255, 255, 255, .18);
  --ou-acento: #3dffc0;
  --ou-vazio: #0d0d10;

  --ou-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ou-titulo: "Arial Black", "Helvetica Neue", Arial, "Segoe UI", Roboto, system-ui, sans-serif;
  --ou-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ou-margem: clamp(16px, 3.4vw, 52px);
  --ou-mancha: 1180px;
  --ou-h1: clamp(38px, 8vw, 84px);
  --ou-h2: clamp(24px, 4vw, 42px);
}

/* a marca é escura sempre, mesmo se o sistema pedir claro */
:root:not([data-tema='claro']) {
  --ou-fundo: #060607;
  --ou-tinta: #f6f6f4;
  --ou-tinta-fraca: #aeb0b3;
  --ou-linha: rgba(255, 255, 255, .18);
  --ou-acento: #3dffc0;
  --ou-vazio: #0d0d10;
}

body.ou-site {
  background:
    radial-gradient(circle at 100% 0, rgba(61, 255, 192, .14), rgba(6, 6, 7, 0) 46%),
    radial-gradient(circle at 0 100%, rgba(109, 61, 255, .16), rgba(6, 6, 7, 0) 50%),
    var(--ou-fundo);
  background-attachment: fixed;
}

.le-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--ou-mancha);
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 40px) var(--ou-margem) 0;
}
.le-marca {
  font: 900 clamp(18px, 2.4vw, 22px) / 1 var(--ou-titulo);
  color: var(--ou-tinta);
  text-decoration: none;
  letter-spacing: -.01em;
}
.le-marca span { color: var(--ou-acento); }
.le-voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--ou-linha);
  font: 500 10px / 1 var(--ou-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ou-tinta);
  text-decoration: none;
}
.le-voltar:hover { border-color: var(--ou-acento); color: var(--ou-acento); }

.ou-h1, .ou-titulo, .ou-cartao__nome { font-weight: 900; letter-spacing: -.015em; }
.ou-h1 { line-height: .96; }
.ou-migalha__atual, .ou-conta { color: var(--ou-acento); }
.ou-migalha__elo { text-decoration: none; }
.ou-citacao { border-left-color: var(--ou-acento); }
.ou-citacao__frase { font-weight: 900; }
.ou-texto a { color: var(--ou-tinta); text-underline-offset: 3px; }
.ou-texto a:hover { color: var(--ou-acento); }

/* meio-tom nas caixas de foto ainda vazias */
.ou-img--vazio {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .42) 1.2px, rgba(0, 0, 0, 0) 1.3px) 0 0 / 13px 13px,
    radial-gradient(90% 70% at 30% 28%, rgba(61, 255, 192, .38), rgba(0, 0, 0, 0) 66%),
    #08080a;
}
.ou-enfeite--regua { background: repeating-linear-gradient(90deg, var(--ou-acento) 0 18px, rgba(0, 0, 0, 0) 18px 30px); }
.ou-carrossel__ponto[aria-current='true']::before { background: var(--ou-acento); border-color: var(--ou-acento); }

.le-rodape {
  max-width: var(--ou-mancha);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--ou-margem) clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--ou-linha);
}
.le-rodape p { margin: 0; font: 500 10px / 1 var(--ou-mono); letter-spacing: .2em; color: var(--ou-tinta-fraca); }

/* madeira: o mesmo detalhe quente da home */
.le-topo { position: relative; }
.le-topo::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: url("/madeira.webp?v=2") center / cover; }
.le-topo::after { bottom: 0; }