/* Produtora Bravo — demonstração de proposta.
   Identidade da marca: preto e branco. Nenhuma cor de marca além desses dois.
   As únicas cores do projeto estão no painel interno, como codificação de dado
   (canal de atendimento e status), nunca como cor da Bravo. */

:root {
  --tinta:    #0b0b0b;   /* preto da marca */
  --tinta-2:  #2b2b2b;
  --suave:    #6e6e6e;
  --fraco:    #9a9a9a;
  --bg:       #ffffff;
  --bg-2:     #f6f6f5;
  --bg-3:     #ecebea;
  --linha:    #e3e2e0;
  --linha-2:  #cfcecb;

  /* superfícies escuras: o mesmo preto, invertido */
  --esc:      #0b0b0b;
  --esc-2:    #171717;
  --esc-3:    #232323;
  --esc-linha:#303030;

  /* codificação de dado no painel — não é cor de marca */
  --ok:    #1f7a46;
  --aten:  #9a6b12;
  --alerta:#a33c34;
  --info:  #2a5f99;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r: 16px;
  --r-s: 10px;
  --max: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); margin: 0 0 .32em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); margin: 0 0 .4em; }
h3 { font-size: 1.22rem; margin: 0 0 .35em; letter-spacing: -.01em; }
p { margin: 0 0 1em; color: var(--suave); }
a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
@media (max-width: 620px) { .wrap { padding: 0 20px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fotografia da marca é sempre preto e branco */
.pb { filter: grayscale(1) contrast(1.06); }

/* ---------- tarja de demonstração ----------
   Fica no fluxo e rola junto: assim nenhuma altura precisa ser adivinhada
   por quem posiciona o cabeçalho. */
.faixa {
  position: relative; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: var(--esc); color: #fff;
  font-size: .76rem; letter-spacing: .02em;
  padding: 7px 16px; text-align: center;
}
.faixa b { font-weight: 600; }
.faixa span { color: rgba(255,255,255,.72); }
.faixa .btn { padding: 6px 15px; font-size: .74rem; }
@media (max-width: 720px) { .faixa { font-size: .68rem; } }

/* ---------- marca ---------- */
.marca {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: .34em;
  text-transform: uppercase; text-decoration: none; color: var(--tinta); line-height: 1;
  display: inline-block;
}
.marca small {
  display: block; font-family: var(--sans); font-size: .48rem; letter-spacing: .3em;
  color: var(--suave); margin-top: 6px; font-weight: 500;
}
.marca--claro { color: #fff; }
.marca--claro small { color: rgba(255,255,255,.6); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; border-radius: 999px; border: 1px solid var(--tinta);
  background: var(--tinta); color: #fff;
  font: inherit; font-size: .88rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { background: var(--tinta-2); transform: translateY(-1px); }
.btn--vazado { background: transparent; color: var(--tinta); border-color: var(--linha-2); }
.btn--vazado:hover { background: var(--bg-2); border-color: var(--tinta); color: var(--tinta); }
.btn--claro { background: #fff; color: var(--tinta); border-color: #fff; }
.btn--claro:hover { background: rgba(255,255,255,.88); }
.btn--claro-vazado { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--claro-vazado:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--mini { padding: 8px 16px; font-size: .78rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- pílulas de filtro ---------- */
.pilulas { display: flex; gap: 9px; flex-wrap: wrap; }
.pilula {
  background: transparent; border: 1px solid var(--linha-2); color: var(--suave);
  border-radius: 999px; padding: 9px 19px; font: inherit; font-size: .84rem; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s; white-space: nowrap;
}
.pilula:hover { border-color: var(--tinta); color: var(--tinta); }
.pilula.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ---------- etiquetas ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-size: .7rem; font-weight: 500; letter-spacing: .02em;
  border: 1px solid var(--linha-2); color: var(--suave); background: var(--bg);
  white-space: nowrap;
}
.tag--forte { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tag--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, #fff); }
.tag--aten { color: var(--aten); border-color: color-mix(in srgb, var(--aten) 35%, transparent); background: color-mix(in srgb, var(--aten) 8%, #fff); }
.tag--alerta { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 35%, transparent); background: color-mix(in srgb, var(--alerta) 8%, #fff); }
.tag--info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 8%, #fff); }

/* rótulo obrigatório em todo dado inventado */
.ficticio {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; letter-spacing: .04em;
  color: var(--tinta); border: 1px dashed var(--linha-2);
  padding: 4px 11px; border-radius: 999px; background: var(--bg-2);
}

/* ---------- cartões e grades ---------- */
.card { background: var(--bg); border: 1px solid var(--linha); border-radius: var(--r); padding: 26px; }
.card--cheio { background: var(--bg-2); border-color: transparent; }
.grade { display: grid; gap: 20px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.olho {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 18px; font-weight: 500;
}
.olho::before {
  content: ''; width: 30px; height: 1px; background: var(--linha-2); flex: none;
}
.olho--claro { color: rgba(255,255,255,.72); }
.olho--claro::before { background: rgba(255,255,255,.35); }

.regua { border: 0; border-top: 1px solid var(--linha); margin: 0; }