/*
 * Identidade "Luz e grão".
 * Fundo quase preto, um foco de luz, grão de filme e três vozes tipográficas:
 * Geist (títulos e texto), Instrument Serif itálico (uma palavra de destaque)
 * e JetBrains Mono itálico (rótulos e dados).
 *
 * As páginas usam estilos inline, por isso as regras abaixo usam !important
 * e seletores de atributo: é a forma de aplicar o sistema sem reescrever cada
 * elemento à mão.
 */

:root {
  --brand-black: #050505;
  --brand-paper: #F1F1EF;
  --brand-ink: #FFFFFF;
  --brand-mono: 'JetBrains Mono', ui-monospace, monospace;
  --brand-serif: 'Instrument Serif', Georgia, serif;
  --brand-sans: 'Geist', system-ui, sans-serif;
}

html, body { background: var(--brand-black) !important; }
body { font-family: var(--brand-sans) !important; }
::selection { background: #FFFFFF !important; color: #000 !important; }

/* Grão de filme sobre a página inteira. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Títulos: Geist Medium, caixa baixa, espaçamento apertado. */
h1, h2, h3 {
  font-family: var(--brand-sans) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.035em !important;
}
h1 { line-height: .98 !important; }

/* O runtime (React) reescreve o atributo style: "letter-spacing: 0.22em",
   "width: 34px", cores em rgb(). Os seletores casam com essa forma. */

/* A palavra em destaque deixa de ser colorida e vira Instrument Serif itálico. */
h1 span[style*="var(--accent)"], h2 span[style*="var(--accent)"], h3 span[style*="var(--accent)"],
h1 span[style*="rgb(255, 255, 255)"], h2 span[style*="rgb(255, 255, 255)"], h3 span[style*="rgb(255, 255, 255)"] {
  font-family: var(--brand-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
}

/* Rótulos (eyebrows): JetBrains Mono itálico, caixa alta, entre colchetes.
   Qualquer texto em caixa alta com espaçamento positivo é um rótulo; as
   etiquetas em pílula (com border-radius) ficam de fora e têm regra própria. */
[style*="text-transform: uppercase"][style*="letter-spacing: 0."]:not([style*="border-radius"]):not(h1):not(h2):not(h3) {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  letter-spacing: 1px !important;
}
[style*="text-transform: uppercase"][style*="letter-spacing: 0."]:not([style*="border-radius"]):not(h1):not(h2):not(h3)::before { content: '['; }
[style*="text-transform: uppercase"][style*="letter-spacing: 0."]:not([style*="border-radius"]):not(h1):not(h2):not(h3)::after { content: ']'; }

/* O fio ao lado dos rótulos sai: os colchetes cumprem esse papel. */
span[style*="width: 34px"][style*="height: 1px"] { display: none !important; }

/* Numerais de seção (01, 02, CASE, DESTAQUE) na voz de dados. */
span[style*="font-size: 13px"][style*="letter-spacing: 0.05em"],
span[style*="font-size: 13px"][style*="var(--accent)"],
span[style*="font-size: 14px"][style*="var(--accent)"],
div[style*="font-size: 14px"][style*="var(--accent)"],
div[style*="font-size: 13px"][style*="var(--accent)"] {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Etiquetas sobre imagens (badges dos cards) e tags em pílula. */
span[style*="border-radius: 50px"][style*="font-size: 11px"],
span[style*="border-radius: 50px"][style*="font-size: 12px"],
span[style*="border-radius: 50px"][style*="font-size: 13px"] {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  letter-spacing: .5px !important;
  border-radius: 2px !important;
}

/* Foco de luz: um refletor acende atrás do fechamento das páginas. */
#contact, section[data-screen-label="CTA"] { position: relative; overflow: hidden; }
#contact::before, section[data-screen-label="CTA"]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 1100px;
  height: 620px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,.06) 55%, rgba(255,255,255,0) 100%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
#contact > *, section[data-screen-label="CTA"] > * { position: relative; z-index: 1; }

/* Fundos que ainda estavam em cinza azulado viram o preto da marca. */
footer { background: var(--brand-black) !important; }

/* ===================================================================
   Segunda passada: geometria, luz, papel e voz de dados.
   =================================================================== */

/* Grão mais presente, como nas peças. */
body::after { opacity: .16; }

/* Cantos vivos. O brand não usa arredondamento; só o que é círculo
   (o ponto, as setas e os focos de luz) continua redondo. */
[style*="border-radius"]:not([style*="border-radius: 50%"]) { border-radius: 0 !important; }
image-slot { --radius: 0; }

/* Molduras de 1px um pouco mais visíveis, como os quadros do brand. */
[style*="border: 1px solid rgba(255, 255, 255, 0.08)"] { border-color: rgba(255,255,255,.16) !important; }

/* Botões: retângulo branco com a voz de dados. */
a[style*="background: var(--accent)"], a[style*="background-color: rgb(255, 255, 255)"],
a[style*="background: rgb(255, 255, 255)"] {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
}

/* Menu: barra reta com fio fino, links na voz de dados. */
#navbar > div {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(5,5,5,.72) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
#navbar a:not(:first-child), #mobile-menu a {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}
#mobile-menu { border-radius: 0 !important; }

/* Rodapé e créditos na voz de dados. */
footer [style*="font-size: 13px"], footer [style*="color: rgb(106, 106, 112)"] {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  font-size: 11px !important;
}

/* Foco de luz: o refletor das peças, grande e difuso, no canto das seções. */
#about, #why, #services, #capabilities, #cases,
section[data-screen-label="Intro"], section[data-screen-label^="Ação 01"],
section[data-screen-label="Muito além de fotos e vídeos"] {
  position: relative;
  isolation: isolate;
}
#why::before, #services::before, #capabilities::before, #cases::before,
section[data-screen-label^="Ação 01"]::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -260px;
  width: 980px;
  height: 980px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.30), rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}
#cases::before { right: auto; left: -360px; top: 10%; }
#contact::before, section[data-screen-label="CTA"]::before {
  width: 1300px; height: 760px; bottom: -380px;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
}

/* Papel: seções de apresentação em fundo claro, tinta preta, com sombra no
   lugar da luz — a alternância escuro/claro do brand book. A sombra de
   100vmax estende o fundo até as bordas da janela mesmo com max-width. */
#about, section[data-screen-label="Intro"], section[data-screen-label="Muito além de fotos e vídeos"] {
  background: var(--brand-paper) !important;
  box-shadow: 0 0 0 100vmax var(--brand-paper);
  clip-path: inset(0 -100vmax);
  color: #000 !important;
}
#about *, section[data-screen-label="Intro"] *, section[data-screen-label="Muito além de fotos e vídeos"] * { color: #000 !important; }
#about p, section[data-screen-label="Intro"] p, section[data-screen-label="Muito além de fotos e vídeos"] p { color: #3b3b39 !important; }
#about::before, section[data-screen-label="Intro"]::before, section[data-screen-label="Muito além de fotos e vídeos"]::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -320px;
  width: 900px;
  height: 900px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,.06) 55%, rgba(0,0,0,0) 100%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

/* ===================================================================
   Terceira passada: regras do deck comercial "Luz e grão".
   =================================================================== */

/* Grão de filme denso, como nos slides. */
body::after { opacity: .34; }

/* Rótulos com o espaçamento do deck e a palavra serifada 1.12× o título. */
[style*="text-transform: uppercase"][style*="letter-spacing: 0."]:not([style*="border-radius"]):not(h1):not(h2):not(h3) {
  letter-spacing: .06em !important;
}
h1 span[style*="var(--accent)"], h2 span[style*="var(--accent)"], h3 span[style*="var(--accent)"],
h1 span[style*="rgb(255, 255, 255)"], h2 span[style*="rgb(255, 255, 255)"], h3 span[style*="rgb(255, 255, 255)"] {
  font-size: 1.12em;
  line-height: .9;
}
h1 { letter-spacing: -0.05em !important; }

/* Numeração dos cards como ficha: [01]. */
span[style*="font-size: 13px"][style*="letter-spacing: 0.05em"]::before { content: '['; }
span[style*="font-size: 13px"][style*="letter-spacing: 0.05em"]::after { content: ']'; }

/* Botões: pílula branca com o ponto, em Geist (o CTA do deck). */
a[style*="border-radius: 50px"][style*="color: rgb(5, 5, 5)"] {
  border-radius: 999px !important;
  font-family: var(--brand-sans) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
a[style*="border-radius: 50px"][style*="color: rgb(5, 5, 5)"]::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
#navbar a[style*="border-radius: 50px"][style*="color: rgb(5, 5, 5)"] { font-size: 14px !important; }

/* Menu sem caixa: logo e links soltos sobre a imagem, invertendo sobre o papel. */
#navbar > div {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: difference;
}

/* O refletor do deck: elipse grande, inclinada, sem desfoque. */
#why::before, #services::before, #capabilities::before, #cases::before,
section[data-screen-label^="Ação 01"]::before {
  width: 70vw;
  height: 90vh;
  min-width: 620px;
  min-height: 620px;
  top: -10vh;
  right: -18vw;
  filter: none;
  transform: rotate(-18deg);
  background: radial-gradient(closest-side, rgba(255,255,255,.42), rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 100%);
}
#cases::before { right: auto; left: -26vw; top: 10vh; transform: rotate(20deg); }
#capabilities::before { top: auto; bottom: -30vh; }
#contact::before, section[data-screen-label="CTA"]::before {
  width: 80vw; height: 95vh; min-width: 700px; bottom: -40vh; filter: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.2) 55%, rgba(255,255,255,0) 100%);
}

/* No papel, a sombra faz o papel da luz, e o grão escurece em vez de clarear. */
#about::before, section[data-screen-label="Intro"]::before, section[data-screen-label="Muito além de fotos e vídeos"]::before {
  filter: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.30), rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 100%);
}
#about::after, section[data-screen-label="Intro"]::after, section[data-screen-label="Muito além de fotos e vídeos"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Faixa de dados na capa, como o rodapé dos slides. */
@media (min-width: 900px) {
  #hero::after {
    content: '[SP · 26]   Produtora audiovisual premium · São Paulo, SP · 2026';
    position: absolute;
    left: max(32px, calc((100% - 1340px) / 2 + 22px));
    top: 92px;
    z-index: 5;
    font: italic 400 12px/1 var(--brand-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: pre;
    color: #fff;
    opacity: .8;
    pointer-events: none;
  }
}
#navbar a[style*="border-radius: 50px"][style*="color: rgb(5, 5, 5)"] {
  font-family: var(--brand-sans) !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
/* O grão do papel vai de borda a borda, como o fundo. */
#about::after, section[data-screen-label="Intro"]::after, section[data-screen-label="Muito além de fotos e vídeos"]::after {
  left: -100vmax;
  right: -100vmax;
}

/* Todos os links do menu na voz de dados, inclusive o primeiro (Serviços). */
#navbar [data-desktop-nav] a:not([style*="border-radius: 50px"]) {
  font-family: var(--brand-mono) !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}

/* Sem o ponto pulsante ao lado do "Fale conosco" no menu. */
[data-nav-right] > span:first-child { display: none !important; }