/* Tema PLUMA para o OURIVIC.
   Só estética: nenhuma regra aqui sabe o que é um bloco por dentro, só como ele se veste.
   Trocar este arquivo troca a cara do portfólio inteiro sem tocar no núcleo. */

:root {
  --ou-fundo: #030305;
  --ou-tinta: #f6f6f8;
  --ou-tinta-fraca: #9a9aa4;
  --ou-linha: rgba(255, 255, 255, .14);
  --ou-acento: #B9294C;
  --ou-vazio: #0b0b12;

  --ou-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ou-titulo: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --ou-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --ou-margem: clamp(22px, 3.4vw, 54px);
  --ou-mancha: 1180px;
  --ou-h1: clamp(42px, 8vw, 78px);
  --ou-h2: clamp(26px, 4vw, 42px);
}

/* o modo claro do sistema não deve clarear a PLUMA: a marca é escura sempre */
@media (prefers-color-scheme: light) {
  :root { --ou-fundo: #030305; --ou-tinta: #f6f6f8; }
}

body.ou-site {
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(185, 41, 76, .20), rgba(3, 3, 5, 0) 62%),
    var(--ou-fundo);
  background-attachment: fixed;
}

/* ---------- moldura HUD ---------- */
.pl-moldura {
  position: fixed;
  inset: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px))
         calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
  border: 1px solid var(--ou-linha);
  pointer-events: none;
  z-index: 3;
}

/* ---------- topo ---------- */
.pl-topo {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--ou-mancha);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 44px) var(--ou-margem) 0;
}
.pl-marca img { display: block; height: clamp(26px, 3.2vw, 32px); width: auto; }
.pl-menu {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 17px;
  border: 1px solid rgba(255, 255, 255, .3);
  font: 500 10px / 1 var(--ou-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ou-tinta);
  text-decoration: none;
}
.pl-menu:hover { border-color: var(--ou-tinta); }

/* ---------- títulos ---------- */
.ou-h1, .ou-titulo, .ou-citacao__frase, .ou-cartao__nome {
  font-weight: 400;
  letter-spacing: .012em;
  text-transform: uppercase;
  font-synthesis: none;
}
.ou-h1 { line-height: .94; }

.ou-migalha { letter-spacing: .22em; }
.ou-migalha__atual { color: var(--ou-acento); }
.ou-migalha__elo { text-decoration: none; }
.ou-migalha__elo:hover { color: var(--ou-tinta); }

.ou-resumo { color: var(--ou-tinta); opacity: .86; }

/* ---------- blocos ---------- */
.ou-texto a { color: var(--ou-tinta); text-underline-offset: 3px; }
.ou-texto a:hover { color: #ffffff; }

.ou-img--vazio {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, 0) 1px 34px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, rgba(0, 0, 0, 0) 1px 34px),
    radial-gradient(120% 90% at 50% 120%, rgba(185, 41, 76, .55), rgba(0, 0, 0, 0) 62%),
    #08080c;
}

.ou-citacao { border-left-width: 2px; }
.ou-citacao__frase { line-height: 1.1; }

.ou-ficha__valor { font-size: 15px; letter-spacing: .01em; }

.ou-video--vazio { border: 1px solid var(--ou-linha); background: #0b0b12; }

/* o enfeite "régua" da PLUMA é magenta e tracejado, como a régua do site */
.ou-enfeite--regua { background: repeating-linear-gradient(90deg, var(--ou-acento) 0 18px, rgba(0, 0, 0, 0) 18px 30px); }
.ou-enfeite--arame { background: var(--ou-linha); }

/* ---------- grade ---------- */
.ou-conta { font-weight: 500; letter-spacing: .24em; }
.ou-cartao__arte { background: #07070b; }
.ou-cartao:hover .ou-cartao__nome { color: #ffffff; }

/* ---------- rodapé ---------- */
.pl-rodape {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--ou-mancha);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 48px) var(--ou-margem) clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--ou-linha);
}
.pl-tc { margin: 0; font: 500 11px / 1 var(--ou-mono); letter-spacing: .16em; color: var(--ou-acento); }
.pl-assina { margin: 0; font: 500 10px / 1 var(--ou-mono); letter-spacing: .18em; color: var(--ou-tinta-fraca); }