/* Tema da direção D, comum a Home, About e Journal.
   Cores: 90% preto, 10% amarelo; creme só nas áreas de projetos. */
:root { --preto: #0c0c0c;
  /* Margem padrão das seções de conteúdo: o mesmo respiro lateral do "We Create All For You."
     (texto ocupando cerca de 82% da largura no desktop; no celular vale a margem normal) */
  --margem: max(var(--gutter), 9vw); }
@media (max-width: 760px) { :root { --margem: var(--gutter); } }
body { background: var(--preto); color: var(--creme); }
::selection { background: var(--amarelo); color: var(--preto); }
.suave { color: rgba(237,235,222,.55); }
.intro { background: var(--amarelo); color: var(--preto); }

/* Cursor: etiqueta amarela, sem borda */
.cursor { mix-blend-mode: normal; }
.cursor__ponto { background: var(--amarelo); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.cursor__etiqueta { display: none; }
/* Sem texto: sobre um projeto o ponto só cresce */
.cursor__ponto { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.cursor.ativo .cursor__ponto { transform: scale(2.6); }

/* Cabeçalho */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); color: var(--creme); transition: background .4s; }
/* Ao rolar (ou em páginas com topo claro, body.topo-solido) a barra fica preta sólida */
body.rolou .topo, body.topo-solido .topo { background: var(--preto); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { opacity: .8; transition: opacity .2s; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; }
.nav-links a[aria-current] { color: var(--amarelo); }
.nav-links .cta { color: var(--amarelo); opacity: 1; }
body.menu-aberto .nav-links { background: var(--preto); }

/* Área creme e legendas (nome sempre; serviço só no hover) */
.creme { background: var(--creme); color: var(--preto); }
.creme .suave { color: rgba(12,12,12,.55); }
.sec-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; padding: 0 var(--gutter) 56px; }
.sec-cab h2 { margin: 0; font-size: clamp(56px, 9vw, 150px); }
.info { margin-top: 10px; }
.info strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.info span { display: block; font-size: 13px; color: rgba(12,12,12,.6); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .35s; }
a:hover .info span, a:focus-visible .info span { max-height: 3em; opacity: 1; }

/* Topo de página interna */
.pagina-topo { padding: 160px var(--gutter) 80px; }
.pagina-topo h1 { margin: 0; font-size: clamp(64px, 14vw, 230px); }
.pagina-topo h1 .destaque { color: var(--amarelo); font-size: .9em; }

/* Botão e CTA final */
.botao { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; background: var(--amarelo); color: var(--preto); transition: transform .25s; }
.botao:hover { transform: translateY(-2px); }
/* Final em tela cheia amarela com texto e botão pretos */
.final { min-height: 38svh; display: grid; place-content: center; justify-items: center; padding: 72px var(--gutter); text-align: center; background: var(--amarelo); color: var(--preto); }
.final h2 { margin: 0 0 26px; font-size: clamp(40px, 5.2vw, 88px); }
.final h2 .destaque { font-size: inherit; color: var(--preto); }
.final p { margin: 28px auto 40px; max-width: 44ch; color: rgba(12,12,12,.75); }
.final .botao { background: var(--preto); color: var(--amarelo); }

/* Rodapé */
.rodape { padding: 64px var(--gutter) 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; font-size: 15px; border-top: 1px solid rgba(237,235,222,.14); }
.rodape h4 { margin: 0 0 14px; }
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: rgba(237,235,222,.7); }
.rodape .logo-gou { height: 40px; }
.rodape p { color: rgba(237,235,222,.7); max-width: 28ch; }
.rodape .base { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 28px; margin-top: 20px; color: rgba(237,235,222,.5); }
@media (max-width: 760px) { .rodape { grid-template-columns: 1fr 1fr; } .rodape > div:first-child { grid-column: 1 / -1; } .rodape .base { flex-direction: column; gap: 8px; } }

/* Fontes da D: 99% Hero New. A classe .destaque marca os candidatos a Addington;
   por enquanto fica em Hero (só a cor amarela, quando houver). Para ligar o Addington
   num ponto, use a classe .addington. */
.destaque { font-family: var(--texto); font-style: normal; font-weight: inherit; letter-spacing: inherit; }
.addington { font-family: var(--italico); font-style: italic; font-weight: 300; }

/* Telas infinitas: a seção é mais alta que a tela; a área de imagens fica fixa
   enquanto a pessoa rola, e a rolagem continua movendo as imagens */
.explore { position: relative; height: 260vh; }
@media (max-width: 760px) { .explore { height: 340vh; } }   /* celular: mais rolagem = mais projetos passando na vertical */
.explore__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.explore__cab { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 100px var(--gutter) 0; pointer-events: none; }
.explore__cab h2 { margin: 0; }
.explore__dica { position: absolute; z-index: 5; left: var(--gutter); bottom: 28px; margin: 0; pointer-events: none; }
.tela { position: relative; height: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tela.arrastando { cursor: grabbing; }
.tela .item { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
/* Moldura: a proporção vem da imagem (--ar, calculada pela tela-infinita), limitada entre 16:9 e 4:5; o excesso é recortado */
.tela .item .midia { position: relative; aspect-ratio: var(--ar, 0.8); overflow: hidden; }
/* Vídeo em loop e sequência animada ficam por cima da imagem de capa */
.tela .item .midia video.loop, .tela .item .midia .seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tela .item .midia .seq { opacity: 0; transition: opacity .35s ease; }
.tela .item .midia .seq.on { opacity: 1; }
.tela .item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
/* Hover: a peça cresce um pouco (a partir da base, para não cobrir o nome embaixo) e fica por cima das vizinhas */
.tela .item .midia { transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.tela .item:hover { z-index: 5; }
/* Botão de som dos vídeos: aparece no hover (no celular fica sempre visível) */
.tela .item .som-video { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(237,235,222,.92); color: var(--preto); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s, background .25s; }
.tela .item:hover .som-video, .tela .item.com-som .som-video { opacity: 1; transform: none; }
.tela .item .som-video:hover, .tela .item.com-som .som-video { background: var(--amarelo); }
.tela .item .som-video svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tela .item .som-video svg path:first-child { fill: currentColor; stroke: none; }
.tela .item .som-video .onda { display: none; }
.tela .item.com-som .som-video .onda { display: inline; }
.tela .item.com-som .som-video .corte { display: none; }
@media (hover: none) { .tela .item .som-video { opacity: 1; transform: none; } }
.tela .item:hover .midia { transform: scale(1.14); box-shadow: 0 14px 34px rgba(12,12,12,.18); }
.tela.arrastando .item:hover .midia { transform: none; box-shadow: none; }
.tela .item .info { position: absolute; left: 0; top: 100%; width: max-content; max-width: 260px; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.tela .item:hover .info { opacity: 1; transform: none; }
.tela .item .info span { max-height: none; opacity: 1; }
.tela.arrastando .item .info { opacity: 0; }

/* Serviços em lista; no hover aparece uma imagem pequena dos projetos relacionados */
.servicos { padding: clamp(96px, 12vw, 160px) var(--gutter) 64px; }
.servicos .sec-cab { padding: 0 0 48px; }
.servicos .sec-cab h2 { font-size: clamp(56px, 8vw, 128px); }
.serv { border-top: 1px solid rgba(237,235,222,.14); transition: color .3s; }
.serv:last-child { border-bottom: 1px solid rgba(237,235,222,.14); }
.serv summary { list-style: none; display: grid; grid-template-columns: 56px 1fr 24px; gap: 20px; align-items: center; padding: 26px 0; cursor: pointer; transition: padding .4s; }
.serv summary::-webkit-details-marker { display: none; }
.serv h3 { margin: 0; font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); letter-spacing: -.025em; line-height: 1.05; }
.serv .qtd { color: rgba(237,235,222,.5); }
.serv .mais { position: relative; width: 18px; height: 18px; }
.serv .mais::before, .serv .mais::after { content: ""; position: absolute; left: 0; top: 8.5px; width: 18px; height: 1px; background: currentColor; transition: transform .3s; }
.serv .mais::after { transform: rotate(90deg); }
.serv[open] .mais::after { transform: rotate(0); }
.serv[open] h3 { color: var(--amarelo); }
.lista-serv:hover .serv { color: rgba(237,235,222,.35); }
.lista-serv .serv:hover, .lista-serv .serv[open] { color: var(--creme); }
.lista-serv .serv:hover summary { padding-left: 14px; }
.serv .corpo { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 20px; padding: 0 0 32px; }
.serv .corpo > * { min-width: 0; }
.serv .corpo p { margin: 0; max-width: 48ch; color: rgba(237,235,222,.75); }
.serv .rel { color: rgba(237,235,222,.6); font-size: 14px; }
.serv .rel b { display: block; font-weight: 600; color: var(--creme); margin-bottom: 6px; }
@media (max-width: 760px) {
  .serv summary { grid-template-columns: 1fr 24px; }
  .serv summary .num, .serv summary .qtd { display: none; }
  .serv .corpo { grid-template-columns: 1fr; }
  .serv .corpo > span { display: none; }
}
.preview { position: fixed; left: 0; top: 0; z-index: 40; width: 150px; aspect-ratio: 4 / 5; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s; }
.preview.on { opacity: 1; transform: none; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview span { position: absolute; left: 0; top: calc(100% + 6px); font-size: 12px; color: var(--creme); white-space: nowrap; }
@media (hover: none), (max-width: 760px) { .preview { display: none; } }

/* Listas (Services e Full Cases): o nome fica amarelo ao passar o mouse */
.serv h3, .caso h3 { transition: color .3s; }
.lista-serv .serv:hover h3, .lista-cases .caso:hover h3 { color: var(--amarelo); }

/* Seções de texto e listas usam a margem padrão.
   Ficam de fora as áreas de tela cheia: vídeo, telas de projetos, faixas passando, menu e rodapé. */
body :is(.servicos, .planos, .topo-serv, .cases, .case-intro, .reels, .manifesto-home) { padding-left: var(--margem); padding-right: var(--margem); }
body .lado-a-lado { width: calc(100% - 2 * var(--margem)); }
body :is(.explore__cab) { padding-left: var(--margem); padding-right: var(--margem); }
body .explore__dica { left: calc(var(--margem) - 10px); }
/* Barra de vidro do Explore (Home e Works): fundo claro translúcido com desfoque, igual à barra de formatos.
   A dica "Role ou arraste" usa a mesma barra, sem mudar de cor; o link da Home fica amarelo ao passar o mouse. */
.explore__dica, .barra-vidro { background: rgba(237,235,222,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.explore__dica { padding: 10px 13px; color: var(--preto); }
.barra-vidro { pointer-events: auto; display: inline-flex; padding: 3px; margin-left: -10px; transition: background .35s; }
.barra-vidro a { padding: 7px 10px; color: var(--preto); text-decoration: none; transition: background .25s, color .25s; }
.barra-vidro:hover { background: var(--amarelo); }
.barra-vidro a:hover { background: var(--preto); color: var(--amarelo); }
@media (max-width: 760px) { body .explore__dica { left: calc(var(--margem) - 5px); padding: 10px 8px; } .barra-vidro { margin-left: -5px; } .barra-vidro a { padding: 7px 5px; } }
body .abertura-about h1, body .final h2 { max-width: calc(100vw - 2 * var(--margem)); margin-left: auto; margin-right: auto; }

/* Serviço aberto: linha de impacto, descrição, "ideal para" e o que entregamos */
.serv .texto-serv p { margin: 0 0 14px; }
/* Texto ao lado das entregas: tudo no mesmo tamanho; a frase de abertura só muda de cor */
.serv .texto-serv p { font-size: 16px; line-height: 1.55; }
.serv .texto-serv .linha-serv { color: var(--creme); }
.serv .texto-serv .ideal { color: rgba(237,235,222,.6); }
.serv .texto-serv .ideal b { color: var(--creme); font-weight: 600; margin-right: 6px; }
.serv .entregas { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; color: rgba(237,235,222,.8); }
.serv .entregas li::before { content: "✦ "; font-size: .7em; color: var(--amarelo); }

/* Aproximação no Explore (lightbox.js): a peça cresce a partir do lugar dela até ficar um pouco maior no centro.
   Fundo bege suave e levemente desfocado, sem barras; a legenda é a mesma do hover. A tela fica parada enquanto a peça está aproximada. */
.lightbox { position: fixed; inset: 0; z-index: 90; background: transparent; visibility: hidden; }
.lightbox.on { visibility: visible; }
/* Fundo bege suave e levemente desfocado atrás da peça aproximada */
.lightbox::before { content: ""; position: absolute; inset: 0; background: rgba(237,235,222,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .4s ease; }
.lightbox.on::before { opacity: 1; }
.lightbox.saindo::before { opacity: 0; transition-duration: .3s; }
.lb-palco { position: fixed; left: 0; top: 0; margin: 0; transform-origin: 0 0; transition: transform .42s cubic-bezier(.2,.7,.2,1); }
.lightbox.saindo .lb-palco { transition-duration: .36s; }
.lb-midia { position: relative; overflow: hidden; box-shadow: 0 18px 44px rgba(12,12,12,.22); }
.lb-midia img, .lb-midia video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-midia video { cursor: pointer; }
.lb-midia .seq { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.lb-midia .seq.on { opacity: 1; }
.lb-legenda { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; font-size: 13px; line-height: 1.35; color: rgba(12,12,12,.6);
  opacity: 0; transition: opacity .25s ease .2s; }
.lightbox.on .lb-legenda { opacity: 1; }
.lightbox.saindo .lb-legenda { opacity: 0; transition-delay: 0s; }
.lb-nome strong { display: block; color: var(--preto); font-weight: 600; }
.lb-acoes { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; }
.lb-som { font: inherit; background: none; border: 0; padding: 0; color: rgba(12,12,12,.6); cursor: pointer; }
.lb-som[hidden], .lb-case[hidden] { display: none; }
.lb-case { color: var(--preto); text-decoration: underline 1px; text-underline-offset: 3px; }
.lb-som:hover, .lb-case:hover { color: var(--preto); background: var(--amarelo); }
/* A peça original some enquanto a cópia está aproximada */
.tela .item.lb-origem { visibility: hidden; }

/* Animações de texto (animacoes.js): opção B "Ímã", escolhida pelo Vini em 2026-10-21. */
.an-titulo .an-p { display: inline-block; white-space: nowrap; }
.an-titulo .an-l { display: inline-block; will-change: transform; }
/* B · Ímã: letras saem de um leve desfoque, uma a uma; hover = letras perto do mouse sobem (feito no JS) */
[data-anim="b"] .an-titulo .an-l { opacity: 0; filter: blur(10px); transform: translateY(.18em); transition: opacity .8s ease calc(var(--i) * 28ms), filter .8s ease calc(var(--i) * 28ms), transform .8s ease, color .3s; }
[data-anim="b"] .an-titulo.an-in .an-l { opacity: 1; filter: none; transform: none; transition: opacity .8s ease calc(var(--i) * 28ms), filter .8s ease calc(var(--i) * 28ms), transform .35s cubic-bezier(.2,.7,.2,1), color .3s; }
/* Listas: entram em sequência; hover = número amarelo e traço amarelo crescendo embaixo */
.an-item { opacity: 0; transform: translateY(18px); transition: opacity .8s ease calc(var(--k) * 70ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--k) * 70ms); }
.an-item.an-in { opacity: 1; transform: none; }
/* Listas que já tinham transição própria: junta as duas para a entrada continuar suave */
.lista-cases .caso.an-item { transition: color .3s, padding .4s, opacity .8s ease calc(var(--k) * 70ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--k) * 70ms); }
.lista-serv .serv.an-item { transition: color .3s, opacity .8s ease calc(var(--k) * 70ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--k) * 70ms); }
.lista-ganhos li { position: relative; transition: padding .45s cubic-bezier(.2,.7,.2,1), opacity .8s ease calc(var(--k, 0) * 70ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--k, 0) * 70ms); }
.lista-ganhos li span { transition: color .3s; }
.lista-ganhos li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--amarelo); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lista-ganhos li:hover { padding-left: 12px; }
.lista-ganhos li:hover span { color: var(--amarelo); }
.lista-ganhos li:hover::after { transform: scaleX(1); }
.lista-serv .serv summary { position: relative; }
.lista-serv .serv summary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--amarelo); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lista-serv .serv:hover summary::after { transform: scaleX(1); }
.lista-serv .serv[open] summary::after { transform: scaleX(0); }   /* serviço aberto: a linha amarela some */
.lista-serv .serv .num { transition: color .3s; }
.lista-serv .serv:hover .num { color: var(--amarelo); }
.lista-serv .serv .mais { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.lista-serv .serv:not([open]):hover .mais { transform: rotate(90deg); }
/* Mesmo hover nas outras listas: Full Cases, planos (fundo bege: traço preto) e lista do About */
.lista-cases .caso { position: relative; }
.lista-cases .caso::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--amarelo); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lista-cases .caso:hover::after { transform: scaleX(1); }
.lista-cases .caso .num { transition: color .3s; }
.lista-cases .caso:hover .num { color: var(--amarelo); }
.planos .plano summary { position: relative; }
.planos .plano summary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--preto); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.planos .plano summary:hover::after { transform: scaleX(1); }
.planos .plano .num { transition: color .3s; }
.planos .plano summary:hover .num { color: var(--preto); }
.planos .plano .mais { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.planos .plano:not([open]) summary:hover .mais { transform: rotate(90deg); }
.lista-num li { position: relative; transition: padding .45s cubic-bezier(.2,.7,.2,1), opacity .8s ease calc(var(--k, 0) * 70ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--k, 0) * 70ms); }
.lista-num li span:first-child { transition: color .3s; }
.lista-num li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--amarelo); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lista-num li:hover { padding-left: 12px; }
.lista-num li:hover span:first-child { color: var(--amarelo); }
.lista-num li:hover::after { transform: scaleX(1); }
/* Botão do final: atraído de leve pelo mouse (JS) */
.final .botao { transition: transform .5s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.final .botao:hover { background: var(--creme); color: var(--preto); }