/* ===== Site publico ===== */
:root {
  color-scheme: dark;
  --bg: #00031d;
  --ink: #e3dcd0;
  --faixa: #161514;
  --g: clamp(16px, 2vw, 30px);
  --raio: clamp(20px, 5.5vw, 84px);
  --raio-p: clamp(14px, 1.6vw, 24px);
  --condensada: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --larga: 'Archivo', system-ui, sans-serif;
  --nav-h: clamp(44px, 3.4vw, 50px);
}

*, *::before, *::after { box-sizing: border-box; }
/* Texto selecionado inverte fundo e letra. Nos botoes claros a inversao e ao contrario. */
::selection { background: var(--ink); color: var(--bg); }
.pilula::selection, .idioma-flutuante summary::selection, .filtros a.is-active::selection { background: var(--bg); color: var(--ink); }
/* O Lenis cuida da rolagem; sem ele (sem JS), fica a suave do navegador. */
html { scroll-padding-top: var(--nav-h); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--larga);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.35;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, p, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--g); top: -100px; z-index: 100; background: var(--ink); color: var(--bg); padding: .5em 1em; }
.pular:focus { top: 8px; }

/* Texto largo das etiquetas e linhas */
.nav a, .linha__nome, .voltar, .filtros a, .pilula, .lb__fechar, .lb__seta {
  font-family: var(--larga);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
}

/* ===== Navegacao ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  height: var(--nav-h);
  padding: 0 var(--g);
}
.nav nav { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.nav a { position: relative; padding: .4em 0 .4em 1.3em; font-size: clamp(12px, 1.35vw, 19px); }
.nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: .8em;
  height: .8em;
  margin-top: -.4em;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform .25s ease;
}
.nav a:hover::before { transform: scale(.5); }
.nav__idiomas { display: flex; gap: .7em; }
.nav__idiomas a { padding-left: 0; font-size: clamp(11px, 1vw, 14px); opacity: .55; transition: opacity .2s ease; }
.nav__idiomas a::before { display: none; }
.nav__idiomas a:hover, .nav__idiomas a.is-idioma { opacity: 1; }
.nav__idiomas a.is-idioma { text-decoration: underline; text-underline-offset: .25em; }
.nav a.is-active::before { transform: scale(1); }

/* ===== Banner ===== */
/* Nome em cima e imagem preenchendo o resto da primeira tela. */
.hero {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .7vw, 12px);
  min-height: calc(100svh - var(--nav-h));
  padding: 0 var(--g) var(--g);
}
.hero__dentro { container-type: inline-size; flex: none; }
.hero__nome {
  --fs: calc(100cqw / 4.36);
  --sy: .86;
  font: 400 var(--fs) / var(--sy) var(--condensada);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(var(--sy));
}
.hero__foto {
  flex: 1 1 0;
  width: 100%;
  min-height: clamp(220px, 24vw, 460px);
  object-fit: cover;
  border-radius: var(--raio);
  animation: subir .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

/* ===== Secoes ===== */
.secao { padding: clamp(56px, 5vw, 90px) var(--g) 0; }
/* Margem negativa desconta o respiro do hero: os 50vh vao da imagem ate os projetos. */
#work { padding-top: 0; margin-top: calc(-1 * var(--g)); }
/* Na home, cada titulo fica no centro de um espaco de 50vh. */
.pg-home .secao { padding-top: 0; }
.pg-home .secao > .titulo { display: flex; align-items: center; justify-content: center; height: 50vh; margin: 0; }
main { padding-bottom: clamp(64px, 8vw, 120px); }
.secao--topo { padding-top: clamp(16px, 2vw, 30px); }
.titulo {
  font-family: var(--larga);
  font-stretch: 125%;
  font-weight: 800;
  font-size: min(80px, max(4vw, min(8vw, 32px)));
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 2.6vw, 48px);
}
.vazio { font-size: 1.1em; }
.vazio a { text-decoration: underline; }

/* Linha com ponto e fio, como a lista de trabalhos */
.linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: .6em 0;
  border-top: 1px solid var(--ink);
}
.linha__nome {
  position: relative;
  padding-left: .8em;
  font-size: clamp(12px, .85vw, 15px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.linha__nome::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: currentColor;
}
.linha__qtd { flex: none; font-size: clamp(11px, .75vw, 13px); }

.campanhas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 44px) var(--g); }
/* Nome em duas linhas nao desalinha: as fotos ficam sempre na base do cartao. */
.campanha { display: flex; flex-direction: column; }
/* Marca de video sobre o quadro: o arquivo so baixa ao abrir. */
.tem-video, .capa[data-video], .mosaico__item[data-video] { position: relative; }
.tem-video::after, [data-video]::after {
  content: '▶';
  position: absolute;
  right: .7em;
  bottom: .7em;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  padding-left: .15em;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-size: clamp(11px, .8vw, 14px);
  pointer-events: none;
}
.lb__legenda a, .trabalho__info a, .trabalho__descricao a { text-decoration: underline; }
.campanha__img { display: block; margin-top: auto; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio-p); }
.campanha__img img, .campanha__img video { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.campanha:hover img, .campanha:hover video { transform: scale(1.03); }

/* Secao pessoal: grade de capas */
.capas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.capa { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--raio-p); width: 100%; }
.capa img, .capa video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.capa:hover img, .capa:hover video { transform: scale(1.03); }

/* ===== About ===== */
.sobre__texto { max-width: 44em; margin: 0 auto; font-size: 1.15em; line-height: 1.5; text-align: center; }
.sobre__texto > * { margin: 0 0 1em; }
.sobre__texto > :last-child { margin-bottom: 0; }
.sobre__texto h3 { font-stretch: 125%; font-weight: 800; font-size: 1.1em; text-transform: uppercase; }
.sobre__texto ul, .sobre__texto ol { padding-left: 1.3em; }
.sobre__texto a { text-decoration: underline; }
.medidas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-content: center; gap: 0 var(--g); min-height: 50vh; margin: 0; }
.medidas div { padding: .7em 0; border-top: 1px solid var(--ink); }
.medidas dt { font-weight: 500; font-size: .7em; }
.medidas dd { font-stretch: 125%; font-weight: 800; font-size: .8em; }
.contatos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; }
.pilula {
  display: inline-block;
  padding: .75em 1.6em;
  border-radius: 99px;
  background: var(--ink);
  color: var(--bg);
  transition: opacity .2s ease;
}
.pilula:hover { opacity: .75; }


.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5em 2em;
  padding: clamp(22px, 2.5vw, 36px) var(--g);
  background: var(--faixa);
  font-size: .85em;
  font-weight: 500;
}
.rodape__links { display: flex; flex-wrap: wrap; gap: .5em 2em; }
.rodape a:hover { text-decoration: underline; }

/* ===== Pagina da campanha ===== */
.voltar { display: inline-block; font-size: .85em; }
.voltar:hover { text-decoration: underline; }
.secao--topo { container-type: inline-size; }
.titulo--campanha {
  --sy: 1.35;
  font: 400 min(20cqw, calc(100cqw / (var(--letras) * .5))) / var(--sy) var(--condensada);
  text-align: left;
  white-space: nowrap;
  transform: scaleY(var(--sy));
  transform-origin: left center;
  margin-top: .12em;
  margin-bottom: clamp(10px, 2vw, 30px);
}
.trabalho__info { display: flex; flex-wrap: wrap; gap: .3em 2em; margin-bottom: clamp(20px, 3vw, 44px); font-weight: 500; }
.trabalho__descricao { max-width: 40em; margin-bottom: clamp(20px, 3vw, 44px); }
.mosaico { column-count: var(--cols); column-gap: var(--g); }
.mosaico--uma { max-width: 720px; }
.mosaico__item { display: block; width: 100%; margin-bottom: var(--g); overflow: hidden; border-radius: var(--raio-p); break-inside: avoid; }
.mosaico__item img, .mosaico__item video { width: 100%; height: auto; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mosaico__item:hover img, .mosaico__item:hover video { transform: scale(1.03); }
.linha--proxima { margin-top: clamp(40px, 6vw, 90px); padding-block: 1.2em; }
.linha--proxima .linha__nome { font-size: clamp(20px, 2.8vw, 42px); }
.linha--proxima:hover .linha__nome { text-decoration: underline; }

/* ===== Gallery: sem JS vira grade comum, com JS vira tela infinita ===== */
.tela { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; gap: 5px; padding: 5px; }
.tela__item img, .tela__item video { width: 100%; height: auto; pointer-events: none; user-select: none; }

.pg-gallery .rodape { display: none; }
.pg-gallery .filtros { padding: var(--g); }
.filtros { display: flex; flex-wrap: wrap; gap: .3em 1.2em; font-size: clamp(11px, .95vw, 14px); }
.filtros a { opacity: .55; transition: opacity .2s ease; }
.filtros a:hover, .filtros a.is-active { opacity: 1; }

.tem-tela, .tem-tela body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.tem-tela .nav { position: fixed; left: 0; right: 0; }
.tem-tela .tela {
  display: block;
  position: fixed;
  inset: 0;
  padding: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.tem-tela .tela.is-arrastando { cursor: grabbing; }
.tem-tela .tela__item {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  cursor: inherit;
  will-change: transform;
}
.tem-tela .tela__item img, .tem-tela .tela__item video { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.tem-tela .tela__item:hover img, .tem-tela .tela__item:hover video { transform: scale(1.06); }
.tem-tela .tela__item[data-video]::after { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tem-tela .filtros {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  justify-content: center;
  pointer-events: none;
}
.tem-tela .filtros a { pointer-events: auto; background: var(--bg); padding: .35em .8em; border-radius: 99px; opacity: 1; }
.tem-tela .filtros a:hover, .tem-tela .filtros a.is-active { opacity: 1; background: var(--ink); color: var(--bg); }

/* ===== Lightbox ===== */
.lb {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb__topo { justify-content: flex-end !important; }
.lb__topo, .lb__base { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: clamp(10px, 1.2vw, 16px) var(--g); font-size: clamp(13px, 1.1vw, 16px); }
.lb__fechar { font-size: clamp(12px, 1.35vw, 19px); padding: .4em 0; }
.lb__palco { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 clamp(8px, 5vw, 80px); }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--raio-p); }
.lb__seta { position: absolute; top: 0; bottom: 0; width: clamp(44px, 5vw, 80px); font-size: clamp(18px, 2vw, 30px); }
.lb__seta--ant { left: 0; }
.lb__seta--prox { right: 0; }
.lb__seta:hover { opacity: .6; }
.lb__seta[hidden] { display: none; }


/* ===== Idioma flutuante (so no celular) ===== */
.idioma-flutuante {
  display: none;
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30;
}
.idioma-flutuante summary, .idioma-flutuante__lista a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--larga);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}
.idioma-flutuante summary { list-style: none; background: var(--ink); color: var(--bg); cursor: pointer; }
.idioma-flutuante summary::-webkit-details-marker { display: none; }
.idioma-flutuante__lista { position: absolute; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 8px; }
.idioma-flutuante__lista a { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); animation: subir .2s ease both; }
/* ===== Carrossel ===== */
.carrossel { position: relative; }
.carrossel__trilho {
  display: flex;
  gap: var(--g);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho.is-arrastando { scroll-snap-type: none; user-select: none; }
.carrossel__item {
  position: relative;
  flex: none;
  height: clamp(280px, 62vh, 680px);
  overflow: hidden;
  border-radius: var(--raio-p);
  scroll-snap-align: start;
}
.carrossel__item img { width: auto; max-width: 88vw; height: 100%; object-fit: cover; }
.carrossel__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2.6em;
  height: 2.6em;
  margin-top: -1.3em;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
}
.carrossel__seta--ant { left: .6em; }
.carrossel__seta--prox { right: .6em; }
.carrossel__seta[hidden] { display: none; }

/* ===== Cursor ===== */
.tem-cursor, .tem-cursor * { cursor: none !important; }
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 0;
  height: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}
.cursor.is-visivel { opacity: 1; }
.cursor::before {
  content: '';
  position: absolute;
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.cursor.is-sobre::before { transform: scale(2.2); }
.cursor.is-apertado::before { transform: scale(.7); }
.cursor.is-sobre.is-apertado::before { transform: scale(1.7); }
@media (max-width: 1000px) {
  .campanhas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .medidas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .nav a { font-size: clamp(9px, 2.85vw, 12px); padding-block: 0; padding-left: 1.05em; white-space: nowrap; }
  .nav__idiomas { display: none; }
  .idioma-flutuante { display: block; }
  .sobre__texto { text-align: justify; hyphens: auto; }
  .sobre__texto h3 { text-align: left; hyphens: none; }
  /* No celular, 50vh deixava vazio demais entre as secoes. */
  .pg-home .secao > .titulo { height: 25vh; }
  .medidas { min-height: 25vh; padding-block: 24px; }
  /* Filtros da Gallery nao ficam embaixo do botao de idioma. */
  .tem-tela .filtros { justify-content: flex-start; padding-right: 68px; }
  .medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__nome { --sy: 1.6; }
  .carrossel__seta { display: none; }
  .campanhas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha__nome { font-size: 10.5px; }
  .linha--proxima .linha__nome { font-size: 16px; }
  .titulo--campanha { font-size: min(17cqw, calc(100cqw / (var(--letras) * .59))); }
  .capas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { column-count: min(2, var(--cols)); }
  .lb__seta { display: none; }
  .lb__palco { padding: 0 8px; }
}

/* Telas de toque: alvos de pelo menos 30 px. */
@media (pointer: coarse) {
  .nav a, .rodape a, .filtros a, .voltar { display: inline-flex; align-items: center; min-height: 30px; }
  .rodape__links { gap: 0 1.2em; }
}

/* Celular deitado: nome, imagem e menu ainda cabem na primeira tela. */
@media (max-height: 500px) {
  .hero__foto { min-height: 170px; }
}

/* Telas muito grandes: quadros nao crescem sem limite. */
@media (min-width: 2000px) {
  .campanhas, .capas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}