:root {
  --preto: #0B0B0B;
  --grafite: #161616;
  --linha: #262626;
  --verde: #DADF51;
  --branco: #F5F5F2;
  --cinza: #9A9A96;
  --max: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--preto);
  color: var(--branco);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Tipografia da marca: contraste fino x pesado */
h1, h2 { line-height: 1.05; letter-spacing: -0.01em; }
.fino { font-weight: 200; font-style: italic; }
.pesado { font-weight: 900; color: var(--verde); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 2.5rem; }
.rotulo { font-size: .75rem; letter-spacing: .25em; color: var(--verde); font-weight: 600; margin-bottom: 1.2rem; }

/* Topo: só a marca, no centro */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: center; align-items: center;
  padding: 1rem;
  background: rgba(11,11,11,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; font-weight: 300; text-transform: none; }
.marca b { font-weight: 700; }

/* Seções */
main > section { padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 4vw, 2.5rem); position: relative; }
.secao > * { max-width: var(--max); margin-left: auto; margin-right: auto; }

/* Linha curva da marca */
.curva { position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); width: clamp(500px, 130%, 760px); pointer-events: none; z-index: 0; opacity: .9; }
.curva path { fill: none; stroke: var(--verde); stroke-width: 6; stroke-linecap: round; }

/* Abertura */
.abertura { overflow: hidden; }
.abertura > :not(.curva) { position: relative; z-index: 1; }
.abertura h1 { font-size: clamp(1.65rem, 7.4vw, 5.4rem); white-space: nowrap; margin-bottom: 1.4rem; }
.lead { color: #CFCFCB; font-size: clamp(.82rem, 1.4vw, 1rem); font-weight: 300; letter-spacing: .14em; line-height: 1.9; margin-bottom: 3rem; }
.abertura-foto { max-width: 340px; margin: 0 auto; }
.abertura-foto img { border-radius: 999px 999px 28px 28px; aspect-ratio: 3/4; object-fit: cover; object-position: 40% 50%; border: 1px solid var(--linha); width: 100%; }

/* Números */
.numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding-top: 2.5rem !important; padding-bottom: 2.5rem !important;
}
.numeros strong { display: block; font-size: clamp(1.9rem, 5vw, 3.2rem); font-weight: 900; color: var(--verde); line-height: 1.1; }
.numeros span { display: block; color: var(--cinza); font-size: clamp(.62rem, 1.2vw, .78rem); letter-spacing: .12em; margin-top: .4rem; }

/* Trabalhos: carrossel de vídeos verticais */
.trabalhos { padding-left: 0 !important; padding-right: 0 !important; }
.trabalhos > .carrossel { max-width: none; position: relative; }
.trilho {
  display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem calc(50% - min(140px, 34vw)); scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.reel { position: relative; flex: 0 0 min(280px, 68vw); scroll-snap-align: center; cursor: pointer; }
.reel video {
  display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 28px; background: var(--grafite); border: 1px solid var(--linha);
  transition: border-color .3s;
}
.reel:hover video { border-color: #3a3a3a; }
.reel figcaption { font-size: .78rem; font-weight: 600; letter-spacing: .12em; margin-top: .9rem; }
/* Botão de play em vidro fosco, no centro do vídeo */
.reel::after {
  content: ""; position: absolute; left: 50%; top: calc(50% - 1.2rem); transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(245,245,242,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23F5F5F2'/%3E%3C/svg%3E") center / 26px no-repeat;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity .25s; pointer-events: none;
}
.reel.tocando::after { opacity: 0; }
/* Ainda sem vídeo na pasta */
.reel.sem-video { cursor: default; }
.reel.sem-video video { background: radial-gradient(circle at 30% 20%, #23231a, var(--grafite) 70%); }
.reel.sem-video::after { content: "EM BREVE"; width: auto; height: auto; padding: .45rem 1rem; border-radius: 999px; background-image: none; font-size: .65rem; letter-spacing: .2em; color: var(--cinza); }

.seta {
  position: absolute; top: calc(50% - 1.2rem); transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linha); cursor: pointer;
  background: rgba(22,22,22,.8) center / 18px no-repeat; backdrop-filter: blur(10px);
  transition: border-color .2s;
}
.seta:hover { border-color: var(--verde); }
.seta-esq { left: max(16px, calc(50% - 500px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F2' stroke-width='2'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.seta-dir { right: max(16px, calc(50% - 500px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F2' stroke-width='2'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }

.pontos { display: flex; justify-content: center; gap: .5rem; margin-top: 1.6rem; }
.pontos i { width: 6px; height: 6px; border-radius: 999px; background: #3a3a3a; transition: width .3s, background .3s; }
.pontos i.ativo { width: 22px; background: var(--verde); }

/* Clientes */
.lista-clientes { color: #CFCFCB; font-size: clamp(.78rem, 1.3vw, .9rem); letter-spacing: .1em; line-height: 2.2; }
.secao > .lista-clientes { max-width: 64ch; }
.lista-clientes span { white-space: nowrap; }

/* Rodapé */
.rodape { padding: 3rem 1rem 4rem; border-top: 1px solid var(--linha); }
.rodape img { margin: 0 auto 1rem; }
.rodape p { color: var(--cinza); font-size: .75rem; letter-spacing: .12em; }

/* Celular */
@media (max-width: 820px) {
  .seta { display: none; }
  .rotulo { letter-spacing: .15em; }
  .abertura-foto { max-width: 300px; }
}