/* ═══════════════════════════════════════════════════════════════════════════
   OVERCLOCK WEB — moldura sobre a página do case Bomfim Eco 360

   REGRA DESTE ARQUIVO: não repintar o miolo.

   A página abaixo está em Archivo + IBM Plex Mono + Source Serif 4, paleta
   navy + verde-lima, tema claro — essa é a identidade DO PRODUTO Bomfim
   Eco 360, não a nossa. Dossiê de projeto vestido com a marca do cliente é
   a convenção correta de case study, e é mais profissional, não menos.
   O leitor atravessa da nossa marca para o documento do assunto, na tinta
   do assunto.

   Tudo aqui é prefixado `ocw-` e todos os valores são literais ou vêm de
   `--ocw-*` declarados em `.ocw-chrome`: nenhuma variável da página do case
   (--ink, --accent, --surface, --line) alcança esta moldura, e nenhuma
   regra daqui alcança a página. Sem @layer de propósito — a folha do case
   é sem camada, e camada perde para sem-camada na cascata.

   Este arquivo é carregado DEPOIS do <style> do case, então empata em
   especificidade e ganha por ordem onde precisar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A Chakra Petch é a fonte do wordmark e não é carregada pela página do
   case. Só o peso 700 entra aqui: é o único usado pela moldura. */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../../assets/fonts/chakra-petch-700.woff2') format('woff2');
  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;
}

/* `display:contents` é o que faz a tarja grudar de verdade.
   Uma caixa `position:sticky` só gruda dentro do seu pai — e este wrapper
   tem a altura da própria tarja, então ela descolava depois de ~120px e
   o leitor passava 55 das 56 telas do case sem marca e sem volta.
   Com `display:contents` o wrapper some do layout, a tarja passa a ser
   filha do <body>, e as variáveis --ocw-* continuam herdando normalmente. */
.ocw-chrome {
  display: contents;

  --ocw-bg:    #0A0F1E;
  --ocw-line:  #263257;
  --ocw-blue:  #2563EB;
  --ocw-cyan:  #22D3EE;
  --ocw-text:  #F2F6FF;
  --ocw-muted: #8C909C;
  --ocw-font:  'Chakra Petch', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
}

/* ── tarja superior ─────────────────────────────────────────────────── */

.ocw-bar {
  position: sticky; top: 0; z-index: 9999;
  height: 48px;
  background: var(--ocw-bg);
  border-bottom: 1px solid var(--ocw-line);
  view-transition-name: header;
}
/* Mesma conta do `.wrap` da página do case — `min(100% - 2.5rem, 1180px)`
   e nenhum padding lateral. Com padding próprio, o logotipo ficava 32px à
   direita da coluna do documento e a moldura parecia solta do conteúdo. */
.ocw-bar__in {
  height: 100%;
  width: min(100% - 2.5rem, 1180px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.ocw-back {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ocw-text); text-decoration: none;
  font-family: var(--ocw-font); font-weight: 700; font-size: 14px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  view-transition-name: brand;
}
.ocw-back svg.ocw-mark { width: 22px; height: 22px; flex: none; }
.ocw-back .ocw-web { color: var(--ocw-cyan); }
.ocw-back .ocw-sep {
  width: 1px; height: 16px; background: var(--ocw-line);
  margin-inline: 4px; flex: none;
}
.ocw-back .ocw-verb {
  color: var(--ocw-muted); font-weight: 600; letter-spacing: .18em;
  transition: color 160ms cubic-bezier(.2,0,0,1);
}
.ocw-back:hover .ocw-verb { color: var(--ocw-cyan); }
.ocw-back:focus-visible {
  outline: 2px solid var(--ocw-cyan); outline-offset: 3px; border-radius: 4px;
}

.ocw-piece {
  font-family: var(--ocw-font); font-weight: 600; font-size: 11px;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--ocw-muted); margin-right: -.32em; white-space: nowrap;
}

@media (max-width: 520px) {
  .ocw-back .ocw-verb, .ocw-back .ocw-sep { display: none; }
}

/* ── linha de procedência, logo abaixo da tarja ─────────────────────── */

/* ── pular para o conteúdo ──────────────────────────────────────────── */

.ocw-skip {
  position: absolute; left: 16px; top: -100px; z-index: 10000;
  display: inline-block; min-height: 48px; padding: 14px 24px;
  background: var(--ocw-cyan, #22D3EE); color: #0A0F1E;
  border-radius: 8px; text-decoration: none;
  font: 700 16px/1.2 'Chakra Petch', system-ui, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
.ocw-skip:focus { top: 16px; }

/* ── linha de procedência, logo abaixo da tarja ─────────────────────── */

.ocw-note {
  background: var(--ocw-bg);
  border-bottom: 1px solid var(--ocw-line);
  padding: 14px 0;
}
.ocw-note p {
  width: min(100% - 2.5rem, 1180px); margin: 0 auto;
  color: #C3CCE0;
  font: 400 14px/1.6 ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
}
.ocw-note b { color: var(--ocw-text); font-weight: 600; }

/* ── rodapé da moldura ──────────────────────────────────────────────── */

.ocw-foot {
  background: var(--ocw-bg);
  border-top: 1px solid var(--ocw-line);
  padding: 56px clamp(16px, 4vw, 32px);
  text-align: center;
}
.ocw-foot svg.ocw-mark { width: 26px; height: 26px; margin: 0 auto 20px; display: block; }
.ocw-foot__sig {
  font-family: var(--ocw-font); font-weight: 600; font-size: 11px; line-height: 1.6;
  letter-spacing: .47em; text-transform: uppercase;
  color: var(--ocw-muted); margin: 0 0 20px; margin-right: -.47em;
}
.ocw-foot a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  background: var(--ocw-cyan); color: var(--ocw-bg);
  border-radius: 999px; text-decoration: none;
  font-family: var(--ocw-font); font-weight: 700; font-size: 15px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 12px 32px -14px rgba(34,211,238,.45);
  transition: background-color 160ms cubic-bezier(.2,0,0,1),
              translate 160ms cubic-bezier(.2,0,0,1);
}
.ocw-foot a:hover { background: #67E3F5; translate: 0 -2px; }
.ocw-foot a:active { scale: .97; }
.ocw-foot a:focus-visible { outline: 2px solid var(--ocw-cyan); outline-offset: 3px; }
.ocw-foot a svg { width: 17px; height: 17px; }
.ocw-foot small {
  display: block; margin-top: 22px;
  color: var(--ocw-muted); font: 400 14px/1.6 ui-sans-serif, system-ui, sans-serif;
}
.ocw-foot small a {
  all: unset; color: #C3CCE0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ocw-foot small a:hover { color: var(--ocw-cyan); }

/* ── transição entre documentos ─────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: 120ms; }
::view-transition-new(root) { animation-duration: 260ms; animation-delay: 60ms; }
::view-transition-group(header),
::view-transition-group(brand) { animation-duration: 320ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(header), ::view-transition-new(header),
  ::view-transition-old(brand), ::view-transition-new(brand) {
    animation-duration: 1ms !important;
  }
  .ocw-foot a { transition-duration: 1ms; }
}

/* ── a galeria das telas reais ──────────────────────────────────────── */

/* Isto NÃO é moldura: é conteúdo do case. Por isso usa os tokens da
   própria página (--surface, --line, --muted, --accent-ink) e não os
   --ocw-*, e por isso não carrega a classe .ocw-chrome — que tem
   `display: contents` e desmontaria o grid. */
.ocw-shots {
  display: grid; gap: 1rem;
  margin-block: 2rem 2.5rem;
}
.ocw-shots figure { margin: 0; }
.ocw-shots a {
  display: block; position: relative;
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms cubic-bezier(.2,0,0,1),
              transform 160ms cubic-bezier(.2,0,0,1);
}
.ocw-shots a:hover { border-color: var(--accent-ink); transform: translateY(-2px); }
.ocw-shots a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.ocw-shots img { width: 100%; height: auto; display: block; }
.ocw-shots figcaption {
  margin-top: .6rem;
  font: 400 .875rem/1.5 var(--sans, ui-sans-serif);
  color: var(--muted);
}
.ocw-shots figcaption b { color: var(--ink-soft); font-weight: 600; }
.ocw-shots__nota {
  grid-column: 1 / -1;
  margin: .5rem 0 0;
  padding-left: 1rem; border-left: 1px solid var(--line);
  font: 400 .875rem/1.6 var(--sans, ui-sans-serif);
  color: var(--muted);
}
.ocw-shots a::after {
  content: "Ver em tamanho real";
  position: absolute; right: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(11,30,51,.88); color: #fff;
  font: 600 11px/1 var(--mono, ui-monospace);
  letter-spacing: .1em; text-transform: uppercase;
}
@media (min-width: 760px) {
  .ocw-shots { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .ocw-shots figure:first-of-type { grid-column: 1 / -1; }
  .ocw-shots a::after { opacity: 0; transition: opacity 160ms cubic-bezier(.2,0,0,1); }
  .ocw-shots a:hover::after, .ocw-shots a:focus-visible::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ocw-shots a { transition-duration: 1ms; }
  .ocw-shots a:hover { transform: none; }
}

/* ── correções herdadas, e só elas ──────────────────────────────────── */

/* Na faixa de números (fundo escuro) o eyebrow usa `--muted`, que é o tom
   pensado para fundo CLARO: #5F748B sobre #0B1E33 dá 3,48:1 e reprova o
   WCAG 1.4.3 em texto de 11px. A própria folha já tem o tom certo para
   faixa escura — `--deep-muted`, que dá 7,12:1. É só usá-lo aqui. */
.figures .eyebrow { color: var(--deep-muted, #93AAC4); }

/* A folha original declara `.cards { grid-template-columns: repeat(auto-fill,
   minmax(302px, 1fr)) }`. Em tela de 320px a coluna útil tem 280px, mas o
   piso de 302px vence e a página rola 2px na horizontal — reprova WCAG
   1.4.10 (Reflow), que é medido exatamente a 320px.
   Abaixo de 342px a grade passa a ter uma coluna fluida. Não é repintar o
   case: é o mínimo para ele não estourar a tela. */
@media (max-width: 341px) {
  .cards { grid-template-columns: 1fr; }
}

/* Impresso ou salvo em PDF, o documento tem de continuar dizendo de quem é.
   A tarja e o rodapé com o botão saem (não há onde clicar no papel), mas a
   linha de procedência fica — em tinta escura sobre papel branco, porque o
   #C3CCE0 sobre branco é ilegível na impressora. */
@media print {
  .ocw-bar, .ocw-foot a, .ocw-skip { display: none !important; }
  .ocw-foot { border-top: 1px solid #999; padding: 16px 0; }
  .ocw-foot svg.ocw-mark { filter: grayscale(1); }
  .ocw-foot__sig, .ocw-foot small { color: #333 !important; }
  .ocw-note { background: none; border-bottom: 1px solid #999; padding: 8px 0; }
  .ocw-note p { color: #333 !important; }
  .ocw-note b { color: #000 !important; }
}

/* Contraste alto do Windows: as cores do site são descartadas e a tarja
   ficava sem nada que a separasse do documento. */
@media (forced-colors: active) {
  .ocw-bar, .ocw-foot { border-color: CanvasText; }
  .ocw-foot a { border: 1px solid CanvasText; }
}
