/* Oficina da Photo — tema moderno.
   Veste o mesmo HTML da cópia fiel: estilo.css continua carregado por baixo e este arquivo só muda a
   aparência. Cores, fontes e o tempo da abertura vêm da configuração do site (--m-*, --f-*, --segundos,
   escritas no <head>). Regras da casa: nenhum escrito sobre rosto; movimento só depois da foto;
   quem pede menos movimento vê tudo parado. */

:root {
  --m-linha: color-mix(in srgb, var(--m-texto) 13%, transparent);
  --m-prata-clara: color-mix(in srgb, var(--m-prata) 40%, #fff);
  --m-prata-escura: color-mix(in srgb, var(--m-prata) 52%, #000);
  /* Prata escovada: a mesma luz da logo nova. */
  --m-metal: linear-gradient(100deg, var(--m-prata-escura) 0%, var(--m-prata-clara) 22%, var(--m-prata) 40%, #fff 50%, var(--m-prata) 60%, var(--m-prata-escura) 78%, var(--m-prata-clara) 100%);
  --m-curva: cubic-bezier(.16, .84, .24, 1);
  --m-margem: clamp(16px, 4vw, 56px);
  --m-largura: 1320px;
  --m-bloco: clamp(88px, 11vw, 168px);
  /* As variáveis da cópia passam a seguir o tema (menu, barra do topo, botões). */
  --fundo: var(--m-fundo);
  --texto: var(--m-texto);
  --menu: var(--m-texto);
  color-scheme: dark;
}
body { background: var(--m-fundo); color: var(--m-texto); font: 340 17px/1.7 var(--f-texto); -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--m-prata) 38%, transparent); }
:focus-visible { outline: 1px solid var(--m-prata); outline-offset: 4px; }
button, input, textarea, select { font-family: var(--f-texto); }

/* Rótulo em versal da logo (Cinzel): menu, botões, categorias. */
.cp-cats, .cg-texto h3, .cg-texto time, .botao-claro, .botao-borda, .cp-mais, .iniciar-slideshow,
.formulario button, .zap-botao, .rodape-colunas h4, .insta-chamada span {
  font-family: var(--f-detalhes); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}

/* ───── Topo: logo de prata no centro, sobre a foto; ao rolar, vira uma barra de vidro. ───── */
.topo { position: fixed; height: 136px; transition: height .6s var(--m-curva), background-color .6s, border-color .6s; border-bottom: 1px solid transparent; }
.topo::before { content: ''; position: absolute; inset: 0 0 -60px; background: linear-gradient(rgba(6, 6, 8, .6), rgba(6, 6, 8, 0)); pointer-events: none; transition: opacity .6s; }
.topo .logo { left: 50%; top: 20px; transform: translateX(-50%); transition: top .6s var(--m-curva), opacity .8s; }
.topo .logo img { height: 104px; width: auto; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .75)); transition: height .6s var(--m-curva); }
/* Um brilho atravessa o prata da logo de tempos em tempos, como luz batendo no metal. */
.topo .logo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--m-logo) center / contain no-repeat; mask: var(--m-logo) center / contain no-repeat;
  animation: brilho 5.5s 1.2s infinite; /* o Davi pediu o brilho mais vezes (18/10): passa a cada 5,5 s */
}
.topo .logo:hover::after { animation-duration: 2.4s; animation-delay: 0s; }
@keyframes brilho { 0% { background-position-x: 100%; } 42%, 100% { background-position-x: 0%; } }
.abrir-menu, .fechar-menu {
  display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid color-mix(in srgb, var(--m-texto) 28%, transparent);
  border-radius: 50%; font-size: 20px; color: var(--m-texto); background: rgba(10, 10, 12, .22); backdrop-filter: blur(10px);
  transition: border-color .4s, background-color .4s, top .6s var(--m-curva);
}
.abrir-menu:hover, .fechar-menu:hover { border-color: var(--m-prata); background: rgba(255, 255, 255, .06); }
.abrir-menu { right: var(--m-margem); top: 42px; }
body.rolou .topo { position: fixed; height: 76px; animation: none; background: color-mix(in srgb, var(--m-fundo) 74%, transparent); backdrop-filter: blur(18px) saturate(1.15); border-bottom-color: var(--m-linha); }
body.rolou .topo::before { opacity: 0; }
body.rolou .topo .logo { top: 9px; }
body.rolou .topo .logo img { height: 58px; filter: none; }
body.rolou .abrir-menu { top: 12px; }

/* ───── Menu em tela cheia: vidro escuro, o "OP" ao fundo, itens na versal da logo. ───── */
.menu { display: grid; place-items: center; background: color-mix(in srgb, var(--m-fundo) 90%, transparent); backdrop-filter: blur(24px); }
.menu[hidden] { display: none; }
.menu::before {
  content: ''; position: fixed; left: 50%; top: 50%; width: min(78vmin, 640px); aspect-ratio: 480 / 491; transform: translate(-50%, -50%);
  background: var(--m-simbolo) center / contain no-repeat; opacity: .055; pointer-events: none;
}
.fechar-menu { top: 42px; right: var(--m-margem); }
.menu ul { position: relative; margin: 0; padding: 110px 16px 60px; }
.menu li { margin: 0; animation: menu-entra .8s var(--m-curva) both; }
.menu .submenu { margin: 0 0 10px; padding: 0; }
.menu .submenu li { animation: none; }
.menu .submenu a { font-size: clamp(15px, 1.6vw, 18px); color: var(--m-suave); }
.menu li:nth-child(2) { animation-delay: .04s; } .menu li:nth-child(3) { animation-delay: .08s; } .menu li:nth-child(4) { animation-delay: .12s; }
.menu li:nth-child(5) { animation-delay: .16s; } .menu li:nth-child(6) { animation-delay: .2s; } .menu li:nth-child(7) { animation-delay: .24s; }
.menu li:nth-child(8) { animation-delay: .28s; } .menu li:nth-child(9) { animation-delay: .32s; } .menu li:nth-child(n+10) { animation-delay: .36s; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(18px); } }
.menu a {
  position: relative; padding: 9px 18px; border: 0; border-radius: 0;
  font: 500 clamp(19px, 2.3vw, 27px)/1.3 var(--f-detalhes); letter-spacing: .14em; color: var(--m-suave); transition: color .4s;
}
.menu a::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 1px; background: var(--m-metal); transform: scaleX(0); transition: transform .6s var(--m-curva); }
.menu a:hover, .menu a.atual { color: var(--m-texto); border-color: transparent; }
.menu a:hover::after, .menu a.atual::after { transform: scaleX(1); }

/* ───── Títulos de seção: versal espaçada, em pé, entre dois fios de prata com losango (a barra da logo). Nada de itálico (pedido do Davi). ───── */
.titulo { margin: 0; padding: 0 var(--m-margem); }
.titulo-icone { display: none; }
.titulo .linha { position: relative; flex: 0 1 150px; height: 1px; background: linear-gradient(90deg, transparent, var(--m-prata)); opacity: .75; transform-origin: right; transition: transform 1.4s .15s var(--m-curva); }
.titulo .linha:last-child { background: linear-gradient(270deg, transparent, var(--m-prata)); transform-origin: left; }
.titulo .linha::after { content: ''; position: absolute; top: 50%; right: -4px; width: 7px; height: 7px; border: 1px solid var(--m-prata); transform: translateY(-50%) rotate(45deg); }
.titulo .linha:last-child::after { right: auto; left: -4px; }
.titulo h1, .titulo h2 {
  margin: 0 clamp(18px, 2.6vw, 40px); font: 400 clamp(26px, 2.6vw, 38px)/1.25 var(--f-titulos);
  letter-spacing: .12em; text-transform: uppercase; color: var(--m-texto); text-wrap: balance;
}

/* ───── Abertura "cinema": fotos em movimento lento de câmera, luz que passeia, profundidade com o mouse. ───── */
.abertura.cinema { height: 100vh; height: 100svh; background: #000; perspective: 1400px; }
.cinema-camada { position: absolute; inset: 0; will-change: transform; } /* sem sobra: a foto não segue mais o mouse, e corta menos */
.quadro { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 1.9s cubic-bezier(.4, 0, .2, 1); }
.quadro.ativo, .quadro.saindo, .quadro.proximo { display: block; }
.quadro.ativo { opacity: 1; z-index: 1; }
.quadro.saindo { opacity: 1; z-index: 0; }
.quadro img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%);
}
.quadro[data-mov=aproximar] { --mov: aproximar; } .quadro[data-mov=afastar] { --mov: afastar; } .quadro[data-mov=deslizar] { --mov: deslizar; }
.cinema.pronta .quadro.ativo img, .cinema.pronta .quadro.saindo img { animation: var(--mov) calc(var(--segundos) + 2.2s) linear both; }
.cinema.pausada .quadro img { animation-play-state: paused; }
/* Aproximação contida (até 10%) e sempre em torno do foco: foto com o assunto embaixo (o barco) corta em cima. */
@keyframes aproximar { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes afastar { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes deslizar { from { transform: scale(1.07) translateX(-2%); } to { transform: scale(1.07) translateX(2%); } }
/* Luz: um véu morno que passeia devagar sobre a foto; vinheta e sombras para a logo e os controles. */
.cinema-luz {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .5), transparent 26%),
    linear-gradient(to top, rgba(0, 0, 0, .6), transparent 30%),
    radial-gradient(120% 110% at 50% 45%, transparent 58%, rgba(0, 0, 0, .42));
}
.cinema-luz::before {
  content: ''; position: absolute; inset: -30%; mix-blend-mode: screen;
  background: radial-gradient(32% 28% at 32% 30%, rgba(255, 236, 205, .17), transparent 70%);
  animation: luz 28s ease-in-out infinite alternate;
}
@keyframes luz { from { transform: translate(-10%, -6%); } to { transform: translate(16%, 10%); } }
.abertura.cinema::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--m-fundo); opacity: var(--escurecer, 0); pointer-events: none; }
/* Setas e progresso juntos à esquerda (o canto direito é do botão de orçamento). */
.cinema-controles {
  position: absolute; left: var(--m-margem); bottom: clamp(26px, 5vh, 52px); z-index: 3;
  display: flex; align-items: center; gap: 28px;
}
.cinema-progresso { display: flex; gap: 8px; width: clamp(160px, 24vw, 360px); }
.cinema-progresso span { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .34); box-shadow: 0 0 6px rgba(0, 0, 0, .5); }
.cinema-progresso i { display: block; height: 100%; background: var(--m-prata-clara); transform: scaleX(0); transform-origin: left; }
.cinema-progresso .feito i { transform: scaleX(1); opacity: .55; }
.cinema-progresso .agora i { animation: progresso var(--segundos) linear forwards; }
.cinema.pausada .cinema-progresso .agora i { animation-play-state: paused; }
@keyframes progresso { to { transform: scaleX(1); } }
.cinema .abertura-setas { order: -1; position: static; transform: none; display: flex; gap: 12px; }
.cinema .abertura-setas button {
  display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  font-size: 22px; color: #fff; filter: none; background: rgba(10, 10, 12, .22); backdrop-filter: blur(10px); transition: border-color .4s, background-color .4s;
}
.cinema .abertura-setas button:hover { border-color: var(--m-prata); background: rgba(255, 255, 255, .1); }
/* Convite para rolar: um fio com uma gota de luz descendo. */
.cinema-rolar { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 52px); z-index: 3; width: 1px; height: 54px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.cinema-rolar::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: gota 2.4s var(--m-curva) infinite; }

/* Escrito da abertura (título, subtítulo e botão que o painel põe numa foto): do lado oposto ao rosto,
   no meio da altura, longe das setas (canto esquerdo de baixo) e do botão de orçamento (canto direito). */
.escrito {
  position: absolute; top: 50%; z-index: 1; width: min(36%, 540px); transform: translateY(-50%);
  display: grid; justify-items: start; gap: 14px; color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .6);
}
.escrito[data-lado=esquerda] { left: calc(var(--m-margem) + 3%); }
.escrito[data-lado=direita] { right: calc(var(--m-margem) + 3%); justify-items: end; text-align: right; }
.escrito p { margin: 0; }
.escrito-titulo { font: 400 clamp(30px, 3.6vw, 58px)/1.12 var(--f-titulos); letter-spacing: .01em; }
.escrito-sub { font: 300 clamp(16px, 1.3vw, 21px)/1.5 var(--f-texto); color: rgba(255, 255, 255, .92); }
.escrito-botao {
  margin-top: 10px; padding: 14px 30px; color: #fff; text-decoration: none; text-shadow: none;
  font: 500 13px/1 var(--f-detalhes); letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .2); backdrop-filter: blur(4px);
  transition: background .3s, color .3s;
}
.escrito-botao:hover { background: #fff; color: #222; }
.quadro .escrito { opacity: 0; transition: opacity 1.2s .7s; }
.quadro.ativo .escrito { opacity: 1; }
@keyframes gota { to { top: 100%; } }

/* ───── Faixa das páginas internas: a foto grande em cima e o título embaixo dela, centralizado e com os dois
   fios, igual aos da home (pedido do Davi em 18/10). Embaixo da foto, o título nunca cobre rosto. ───── */
.faixa { display: block; height: auto; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.faixa-foto {
  position: relative; height: 76vh; height: 76svh; min-height: 460px;
  object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%);
}
.faixa::after {
  inset: 0 0 auto; height: 76vh; height: 76svh; min-height: 460px;
  background: linear-gradient(to top, var(--m-fundo), transparent 22%), linear-gradient(rgba(0, 0, 0, .4), transparent 28%);
}
/* O fundo do título fica firme desde o começo e só o texto sobe: assim ele tapa a foto, que no começo está maior
   (assentando) e passa um pouco da faixa. Antes, o fundo entrava transparente e aparecia uma tira da foto (Davi, 22/10). */
.faixa .titulo { position: relative; z-index: 2; padding: clamp(26px, 4vh, 44px) var(--m-margem) 0; background: var(--m-fundo); }
.faixa .titulo-linha { animation: subir 1.4s .3s var(--m-curva) both; }
.faixa .titulo h1 { max-width: 980px; }
.faixa.sem-foto { padding-top: clamp(140px, 22vh, 220px); }

/* ───── Fotos de destaque (topo das páginas, cartões e contato): ao aparecer, a foto vem um pouco mais perto e
   assenta devagar no enquadramento, como na abertura. Sem vídeo e sem escrito: só a foto (Davi, 18/10).
   Sair da tela e voltar repete (moderno.js põe e tira .assentando). No fim volta ao normal, e o zoom do mouse
   nos cartões continua valendo. ───── */
@keyframes assentar { from { transform: scale(1.12); } to { transform: scale(1); } }
html.pronto .assentando > img { transform-origin: var(--fx, 50%) var(--fy, 50%); animation: assentar 6s cubic-bezier(.3, .25, .3, 1) var(--atraso, 0s) backwards; }
@keyframes subir { from { opacity: 0; transform: translateY(30px); } }

/* ───── Galeria: compartilhar com as cores de cada rede, texto no centro, slideshow em pílula. ───── */
.compartilhar { height: auto; padding: 40px 0 0; gap: 10px; }
.compartilhar a { width: 44px; height: 44px; color: #fff; font-size: 18px; transition: transform .3s var(--m-curva), filter .3s; }
.compartilhar .c-facebook { background: #1877f2; } .compartilhar .c-pinterest { background: #e60023; } .compartilhar .c-twitter { background: #1d9bf0; } .compartilhar .c-whatsapp { background: #25d366; }
.compartilhar a:hover { transform: translateY(-3px); filter: brightness(1.08); }
.galeria-texto { max-width: 760px; margin: 48px auto 0; padding: 0 var(--m-margem); font-size: 18px; color: color-mix(in srgb, var(--m-texto) 82%, var(--m-fundo)); }
.slideshow { margin: 40px 0 0; }
.iniciar-slideshow { gap: 10px; padding: 15px 30px; border: 1px solid color-mix(in srgb, var(--m-prata) 45%, transparent); border-radius: 999px; font-size: 13px; transition: background-color .4s, color .4s; }
.iniciar-slideshow:hover { background: var(--m-texto); color: var(--m-fundo); }
.galeria > .mosaico { margin-top: 56px; }

/* ───── Mosaico (home e galerias): fotos com respiro, entrada em profundidade, inclinação ao passar o mouse. ───── */
.mosaico { gap: 6px; padding: 0 var(--m-margem); grid-auto-rows: calc((100cqw - 2 * var(--m-margem) - 24px) / 5 * 2 / 3); perspective: 1400px; }
.mosaico a { padding: 0; border-radius: 3px; }
.mosaico img { transition: transform 1.1s var(--m-curva); }
.mosaico a:hover img { transform: scale(1.06); }
.bloco-mosaico { padding: var(--m-bloco) 0 0; }
.bloco-mosaico .mosaico { margin-top: clamp(48px, 6vw, 80px); }

/* Entrada ao rolar (o moderno.js marca só o que está abaixo da tela; o que já aparece nunca some). */
html.pronto .revelar { opacity: 0; transform: translateY(44px); }
html.pronto .revelar.visto { opacity: 1; transform: none; transition: opacity 1.1s ease var(--atraso, 0s), transform 1.4s var(--m-curva) var(--atraso, 0s); }
html.pronto .mosaico a.revelar { transform: translateY(64px) rotateX(18deg) scale(.95); transform-origin: 50% 100%; }
html.pronto .mosaico a.revelar.visto { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
html.pronto .titulo.revelar { transform: none; }
html.pronto .titulo.revelar .linha { transform: scaleX(0); }
html.pronto .titulo.revelar.visto .linha { transform: scaleX(1); }

/* Inclinação com reflexo de luz (só com mouse). */
.inclina { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--m-curva); }
html.pronto .revelar.visto.inclina:hover, html.pronto .revelar.visto .inclina:hover { transition: transform .7s var(--m-curva); }
.inclina::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 55%);
}
.inclina:hover::after { opacity: 1; }

/* ───── Blocos da home: abas discretas, cartões com respiro, nomes dos trabalhos em letra em pé. ───── */
.bloco-secao { padding-top: var(--m-bloco); }
.bloco-galerias { padding-bottom: 0; }
.bloco-secao .abas, .bloco-galerias .abas { margin-top: 32px; }
.bloco-galerias .cartoes-galeria { margin-top: 52px; }
.bloco-galerias .titulo + .cartoes-galeria { margin-top: 64px; }
.bloco-secao .cartoes-post { margin-top: 52px; }
/* Abas de categoria: só o nome, pequeno, sem cara de botão (Davi, 18/10). Passar o mouse acende de leve;
   a categoria aberta fica clara, com um fiozinho de prata embaixo. */
.abas ul { gap: 4px 30px; padding: 0 var(--m-margem); }
.abas li { padding: 6px 0; }
.abas a { padding: 4px 0; font: 400 14px/1.5 var(--f-texto); letter-spacing: .06em; color: color-mix(in srgb, var(--m-texto) 58%, transparent); transition: color .3s, text-shadow .3s; }
.abas a:hover { color: var(--m-texto); text-shadow: 0 0 14px color-mix(in srgb, var(--m-prata) 55%, transparent); }
.abas li.ativa a { color: var(--m-texto); }
.abas li.ativa a::after { width: 18px; margin-top: 5px; background: var(--m-prata); opacity: .8; }

/* Cartões das listas e da home em relevo, como foto impressa sobre a mesa (o Davi achou a lista "chapadona", 18/10):
   fundo um tom acima do da página, fio de luz em cima, sombra embaixo e a foto num passe-partout. Com o mouse em
   cima, o cartão sobe e a sombra cresce. */
.cartoes-post, .cartoes-galeria { max-width: var(--m-largura); margin: 0 auto; padding: 0 var(--m-margem); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px); align-items: stretch; }
.cartao-post, .cartao-galeria {
  position: relative; display: flex; flex-direction: column; padding: 0; margin: 0; border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-superficie) 92%, #fff), var(--m-superficie) 34%, color-mix(in srgb, var(--m-superficie) 88%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .035), 0 24px 46px -24px rgba(0, 0, 0, .8), 0 8px 16px -8px rgba(0, 0, 0, .45);
  transition: transform .6s var(--m-curva), box-shadow .6s var(--m-curva);
}
.cartao-post:hover, .cartao-galeria:hover, html.pronto .cartao-post.revelar.visto:hover, html.pronto .cartao-galeria.revelar.visto:hover {
  transform: translateY(-6px); transition: transform .6s var(--m-curva), box-shadow .6s var(--m-curva);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px color-mix(in srgb, var(--m-prata) 20%, transparent), 0 36px 64px -26px rgba(0, 0, 0, .9), 0 12px 24px -10px rgba(0, 0, 0, .5);
}
.cartao-galeria > a { display: flex; flex-direction: column; flex: 1; }
.cp-foto, .cg-foto { position: relative; margin: 10px 10px 0; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .85); }
/* Vinheta suave embaixo da foto e um fio claro na borda, como luz de estúdio. */
.cp-foto::before, .cg-foto::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent 40%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.cp-foto img, .cg-foto img { transition: transform 1.2s var(--m-curva); }
.cartao-post:hover .cp-foto img, .cartao-galeria a:hover img { transform: scale(1.06); }
.cp-foto::after { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), transparent 55%); opacity: 0; mix-blend-mode: soft-light; transition: opacity .6s; }
.cp-foto:hover::after { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), transparent 55%); opacity: 1; }
.cp-texto { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
/* Nomes das galerias e dos casais na letra "nomes" e os textos delas na "descricao" (Fraunces, escolha do Davi em 18/10). */
.cp-texto h2, .cg-texto h2, .cartao-rel h3 { min-height: 0; margin: 0 0 10px; font: 400 clamp(19px, 1.45vw, 22px)/1.35 var(--f-nomes); letter-spacing: .005em; text-transform: none; text-wrap: balance; }
.cartao-rel h3 { padding: 14px 0 0; }
.cp-resumo, .galeria-texto, .lista-texto, .post-corpo .texto { font-family: var(--f-descricao); font-weight: 300; }
.post-corpo .texto { font-size: 18px; line-height: 1.8; color: color-mix(in srgb, var(--m-texto) 86%, var(--m-fundo)); }
.cp-texto h2 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--m-curva); }
.cp-texto h2 a:hover { background-size: 100% 1px; }
.cp-cats { margin: 0 0 12px; font-size: 13px; line-height: 1.6; text-transform: uppercase; color: var(--m-prata); opacity: .85; }
.cp-resumo { color: var(--m-suave); font-size: 16px; line-height: 1.7; }
.cp-mais { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 18px; font-size: 13px; color: var(--m-texto); }
.cp-mais::after { content: ''; width: 28px; height: 1px; background: var(--m-prata); transition: width .5s var(--m-curva); }
.cp-mais:hover::after { width: 48px; }
.cg-texto, .lista .cg-texto { padding: 18px 22px 22px; text-align: left; }
.cg-texto h3, .cg-texto time { font-size: 13px; line-height: 1.6; color: var(--m-prata); opacity: .8; }

.ver-mais { margin: clamp(48px, 5vw, 72px) 0 0; }
.botao-claro, .botao-borda {
  padding: 17px 42px; border: 1px solid color-mix(in srgb, var(--m-prata) 50%, transparent); border-radius: 999px;
  font-size: 13px; line-height: 1; color: var(--m-texto); transition: background-color .4s, color .4s, border-color .4s;
}
.botao-claro:hover, .botao-borda:hover { background: var(--m-texto); color: var(--m-fundo); border-color: transparent; }

/* ───── Quem somos: foto larga e texto de revista, com capitular de prata. ───── */
.bloco-conteudo { padding: var(--m-bloco) 0 0; }
.bloco-conteudo .titulo { margin-bottom: clamp(48px, 6vw, 80px); }
.bc-foto { max-width: var(--m-largura); padding: 0 var(--m-margem); }
.bc-foto img { border-radius: 3px; }
/* Foto dupla do Davi e do Renan: entre os dois retratos fica o fundo da página, como o espaço entre as fotos do
   mosaico (pedido do Davi em 18/10). Na foto antiga (-01) era no lugar de uma barrinha branca, entre 49,03% e 49,72%;
   na nova (-02, a foto nova do Davi com o fundo do Renan, 22/10) é na emenda, em 49,76%. */
.bc-foto img[src*="davi-chaim-renan-gomiero-fotografos-oficina-da-photo-jundiai-01-"] { --emenda: 49.375%; }
.bc-foto img[src*="davi-chaim-renan-gomiero-fotografos-oficina-da-photo-jundiai-02-"] { --emenda: 49.76%; }
.bc-foto img[src*="davi-chaim-renan-gomiero-fotografos-oficina-da-photo-jundiai-0"] {
  --vao: max(3px, .4%);
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--emenda) - var(--vao)), transparent 0 calc(var(--emenda) + var(--vao)), #000 0);
  mask: linear-gradient(90deg, #000 calc(var(--emenda) - var(--vao)), transparent 0 calc(var(--emenda) + var(--vao)), #000 0);
}
.duas-colunas { max-width: 1120px; padding: clamp(40px, 5vw, 64px) var(--m-margem) 0; column-gap: clamp(40px, 5vw, 72px); font-size: 17.5px; line-height: 1.85; color: color-mix(in srgb, var(--m-texto) 84%, var(--m-fundo)); }
.duas-colunas p { margin: 0 0 18px; }
/* "Olá!" e "Hello!" iguais (Davi, 18/10): a primeira letra grande na capitular, de prata, e o resto logo ao lado,
   na mesma linha, um pouco menor. A saudação vem marcada pelo componente Paragrafos. */
.duas-colunas .saudacao { display: inline-block; font: 400 1.9em/1.4 var(--f-titulos); letter-spacing: .02em; color: var(--m-texto); }
.duas-colunas .saudacao .capitular { margin-right: .03em; font: 700 1.6em/1 var(--f-capitular); color: var(--m-prata); }

/* ───── Contato: a foto inteira na largura toda, sem degradê e sem corte (o Davi achou que o corte e o degradê
   "amputaram" a foto, 22/10), e o formulário bem abaixo dela, em duas colunas. Na página de contato a foto começa
   no topo, como a faixa das outras. ───── */
.bloco-contato { display: block; max-width: none; margin: var(--m-bloco) 0 0; padding: 0 0 var(--m-bloco); }
.pagina-contato { padding-top: 0; }
.pagina-contato .bloco-contato { margin-top: 0; }
.bk-foto { position: relative; margin: 0; max-width: none; overflow: hidden; }
.bk-foto img { display: block; width: 100%; height: auto; border-radius: 0; }
.bk-form { position: relative; max-width: 780px; margin: clamp(150px, 17vh, 230px) auto 0; padding: 0 var(--m-margem); } /* bem abaixo da foto e no meio (Davi, 22/10) */
.formulario { grid-template-columns: 1fr 1fr; gap: 22px 44px; max-width: none; margin: 0; }
.formulario label:has(textarea) { grid-column: 1 / -1; }
.formulario button { grid-column: 1 / -1; justify-self: center; }
.bk-form .aviso { margin: 0 auto; text-align: center; }
.formulario input, .formulario textarea {
  height: 54px; padding: 14px 2px; border-bottom: 1px solid color-mix(in srgb, var(--m-texto) 22%, transparent);
  color: var(--m-texto); font: 340 17px/1.5 var(--f-texto); transition: border-color .4s;
}
/* A caixa de texto cresce com o que se escreve (moderno.js; field-sizing onde o navegador já sabe), sem a alça de arrastar. */
.formulario textarea { height: 54px; min-height: 54px; max-height: 320px; resize: none; overflow: hidden; field-sizing: content; }
.formulario ::placeholder { color: var(--m-suave); text-transform: none; }
.formulario input:focus, .formulario textarea:focus { border-bottom-color: var(--m-prata); }
.formulario button { margin: 22px 0 0; padding: 19px 56px; border-radius: 999px; background: var(--m-metal); background-size: 200% 100%; color: var(--m-fundo); font-size: 13px; transition: background-position 1s var(--m-curva), transform .4s var(--m-curva); }
.formulario button:hover { background-position: 100% 0; transform: translateY(-2px); }
.aviso { margin: 0; max-width: 520px; font-size: 18px; }

/* ───── Rodapé: Instagram grande e colorido, selos com as cores deles, e o grande final. ───── */
.rodape { border-top: 0; }
.insta { display: flex; flex-direction: column-reverse; padding: var(--m-bloco) 0 0; }
.insta-chamada {
  position: static; transform: none; display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin: 0 auto clamp(32px, 4vw, 48px); padding: 0 var(--m-margem); text-shadow: none; white-space: normal;
}
.insta-chamada strong { font: 400 clamp(24px, 2.4vw, 34px)/1.3 var(--f-titulos); letter-spacing: .03em; overflow-wrap: anywhere; }
.insta-chamada span {
  display: inline-block; margin: 0; padding: 14px 30px; border-radius: 999px; font-size: 13px; letter-spacing: .16em; color: #fff;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  box-shadow: 0 12px 30px rgba(220, 39, 67, .28); transition: transform .4s var(--m-curva), box-shadow .4s;
}
.insta-chamada:hover span { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(220, 39, 67, .38); }
.insta-grade { grid-template-columns: repeat(6, 1fr); gap: 3px; }
.insta-grade img { transition: transform 1.1s var(--m-curva), filter .6s; }
.insta-grade a:hover img { transform: scale(1.07); filter: brightness(1.06); }
.selos { gap: 30px clamp(36px, 6vw, 88px); padding: clamp(64px, 7vw, 96px) var(--m-margem); }
.selos img { border-radius: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); transition: transform .4s var(--m-curva); }
.selos a:hover img { transform: translateY(-4px); }

/* O grande final: o casal no alto do morro ao pôr do sol, a logo de prata no céu e os contatos no chão
   escuro (o casal, no meio, fica livre). Ao chegar, a foto se afasta devagar (moderno.js). */
.rodape-colunas {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 40px; padding: clamp(56px, 9vh, 110px) var(--m-margem) clamp(28px, 4vh, 44px); text-align: center;
  /* No fim da página o final cabe inteiro abaixo da barra do topo, com a logo à vista: --sobra é a altura do que
     vem depois dele (moderno.js mede); 76px é a barra. */
  min-height: clamp(560px, calc(100svh - var(--sobra, 180px) - 76px), 900px);
}
.rodape-colunas > .final-foto { position: absolute; inset: 0; z-index: -2; width: auto; max-width: none; overflow: hidden; } /* a cópia dá 324 px às colunas do rodapé */
/* A foto fica com o foco dela (a cruz) no centro, alinhado com o e-mail e o Instagram (pedido do Davi, 18/10):
   o moderno.js calcula o tamanho e o lugar. Sem o script, é o enquadramento comum. */
.final-foto img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
  transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--zoom-final, 1)); will-change: transform;
}
.rodape-colunas::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--m-fundo), rgba(0, 0, 0, .2) 14%, transparent 34%, transparent 56%, rgba(0, 0, 0, .5) 80%, var(--m-fundo));
}
/* Sem logo e sem a palavra "Contato" no final (o Davi: "não faz nenhum sentido"): só o e-mail embaixo e, logo
   abaixo dele, o Instagram, os dois no centro. O "Contato" fica só para leitor de tela. */
.rodape-colunas { justify-content: flex-end; }
.rodape-colunas > div:not(.final-foto) { width: auto; max-width: 960px; }
.rodape-colunas h4 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rodape-contato { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 16px; line-height: 1.4; }
.rodape-contato li {
  position: relative; gap: 10px; padding: 14px 26px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  background: rgba(20, 20, 22, .4); backdrop-filter: blur(8px); transition: transform .4s var(--m-curva), background-color .4s;
}
.rodape-contato li:hover { transform: translateY(-2px); background: rgba(20, 20, 22, .6); }
.rodape-contato li a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* o botão todo é clicável */
.rodape-contato .icone { font-size: 19px; }
/* Embaixo, tudo no centro: o Instagram primeiro (junto do e-mail), depois o texto e o ©. Espaço no fim para o botão verde. */
.rodape-fim { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 4px var(--m-margem) 104px; text-align: center; }
.rodape-seo { max-width: 680px; margin: 0; font-size: 14px; font-weight: 340; line-height: 1.7; color: var(--m-suave); }
.rodape-seo:empty { display: none; } /* fora da home ele vem vazio */
.rodape-redes { order: -1; justify-content: center; gap: 12px; }
.rodape-redes a { width: 46px; height: 46px; border: 0; color: #fff; font-size: 20px; transition: transform .3s var(--m-curva), filter .3s; }
.rodape-redes .r-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.rodape-redes .r-facebook { background: #1877f2; }
.rodape-redes a:hover { transform: translateY(-3px); filter: brightness(1.08); }
.rodape-credito { text-align: center; font-size: 13px; color: var(--m-suave); opacity: 1; }

/* ───── Botão de orçamento: verde e com a logo do WhatsApp, para se ver de cara que é WhatsApp. ───── */
.zap { right: 24px; bottom: 24px; }
.zap-botao {
  position: relative; width: auto; height: 56px; gap: 14px; padding: 6px 26px 6px 6px; border: 0; border-radius: 999px;
  background: #25d366; color: #fff; font-size: 13px; box-shadow: 0 14px 34px rgba(37, 211, 102, .3), 0 6px 16px rgba(0, 0, 0, .3);
  transition: transform .4s var(--m-curva), box-shadow .4s;
}
.zap-botao:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(37, 211, 102, .4), 0 8px 20px rgba(0, 0, 0, .3); }
.zap-botao span { white-space: nowrap; }
.zap-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 27px; color: #25d366; }
.zap-janela { border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.zap-balao, .zap-conversa input, .zap-conversa select, .zap-conversa textarea { font: 400 14px/1.45 var(--f-texto); }
.zap-conversa input, .zap-conversa select, .zap-conversa textarea { padding: 9px 10px; border-radius: 6px; }
.zap-conversa button[type=submit] { padding: 12px; border-radius: 6px; background: #25d366; font-family: var(--f-texto); }

/* ───── Visualizador de fotos: vidro escuro, foto entrando com suavidade. ───── */
.ver { background: rgba(6, 6, 8, .94); backdrop-filter: blur(14px); animation: ver-entra .5s ease; }
.ver img { max-width: 92vw; max-height: 88vh; box-shadow: 0 40px 120px rgba(0, 0, 0, .7); animation: ver-foto .8s var(--m-curva); }
.ver button {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--m-linha); border-radius: 50%;
  background: rgba(255, 255, 255, .04); font: 200 30px/1 var(--f-texto); color: var(--m-texto); transition: border-color .3s;
}
.ver button:hover { border-color: var(--m-prata); }
.ver .fechar { top: 20px; right: 20px; }
.ver .antes { left: 20px; }
.ver .depois { right: 20px; }
@keyframes ver-entra { from { opacity: 0; } }
@keyframes ver-foto { from { opacity: 0; transform: scale(.96); } }

/* ───── Tablet ───── */
@media (max-width: 991px) {
  .insta-grade { grid-template-columns: repeat(6, 1fr); }
}

/* ───── Celular ───── */
@media (max-width: 767px) {
  /* No celular a foto fica em pé e o rosto no meio: o escrito vai embaixo, ou em cima se o rosto estiver baixo. */
  .escrito, .escrito[data-lado] { left: 8%; right: 8%; width: auto; top: auto; bottom: 172px; transform: none; justify-items: center; text-align: center; }
  .escrito[data-altura=alto] { top: 118px; bottom: auto; }
  .escrito-titulo { font-size: 30px; }
  .escrito-sub { font-size: 16px; }
  body { padding-bottom: 0; }
  .topo, body.rolou .topo { position: fixed; animation: none; }
  .topo { height: 96px; background: none; border-bottom-color: transparent; }
  body.rolou .topo { height: 64px; background: color-mix(in srgb, var(--m-fundo) 78%, transparent); border-bottom-color: var(--m-linha); }
  .topo .logo { left: 50%; top: 14px; }
  .topo .logo img { height: 48px; } /* proporcional à tela, como no computador (o Davi achou a de 66 grande, 22/10) */
  body.rolou .topo .logo { left: 50%; top: 8px; }
  body.rolou .topo .logo img { height: 38px; }
  .abrir-menu, .fechar-menu { width: 44px; height: 44px; font-size: 18px; }
  .abrir-menu { right: 16px; top: 26px; }
  body.rolou .abrir-menu { right: 16px; top: 10px; }
  .fechar-menu { top: 26px; right: 16px; }
  .menu ul { margin-top: 0; padding-top: 96px; }
  .menu a { font-size: 18px; }
  .titulo h1, .titulo h2 { margin: 0 10px; font-size: clamp(19px, 5.4vw, 22px); letter-spacing: .08em; }
  .titulo .linha { flex-basis: 28px; }

  .abertura.cinema { height: 100vh; height: 100svh; }
  .cinema .abertura-setas { display: flex; }
  .cinema .abertura-setas button { width: 44px; height: 44px; font-size: 18px; }
  .cinema-controles { bottom: 92px; gap: 20px; } /* acima do botão de orçamento */
  .cinema-progresso { gap: 5px; width: calc(100vw - 32px - 100px - 20px); }
  .cinema-rolar { display: none; }
  /* Na tela em pé, o deslizar anda mais, para a foto deitada se revelar inteira. */
  @keyframes deslizar { from { transform: scale(1.1) translateX(-7%); } to { transform: scale(1.1) translateX(7%); } }

  /* Faixa no celular: a foto um pouco mais baixa, o título embaixo dela como no computador. */
  .faixa-foto, .faixa::after { height: 64vh; height: 64svh; min-height: 0; }
  .faixa .titulo { padding: 24px 16px 4px; }

  .mosaico { grid-auto-rows: calc((100cqw - 2 * var(--m-margem) - 6px) / 2 * 2 / 3); }
  .abas ul { padding: 0 16px; }
  .cartoes-post { grid-template-columns: 1fr; }
  .cartoes-galeria, .lista .cartoes-galeria, .bloco-galerias .cartoes-galeria { grid-template-columns: 1fr; padding-left: var(--m-margem); padding-right: var(--m-margem); }
  .bk-form { margin-top: 80px; }
  .formulario { grid-template-columns: 1fr; }
  .formulario, .aviso { margin: 0; }
  .duas-colunas { columns: 1; padding: 36px var(--m-margem) 0; }
  .galeria-texto { margin: 36px auto 0; }


  .insta-grade { grid-template-columns: repeat(3, 1fr); }
  .insta-chamada strong { font-size: 20px; }
  .selos { max-width: none; gap: 28px 32px; }
  .rodape-colunas { min-height: clamp(420px, calc(100svh - var(--sobra, 320px) - 64px), 760px); padding: 48px 16px 56px; }
  /* No celular, o orçamento é uma barra de vidro no pé da tela: não cobre botão nenhum da página. */
  body { padding-bottom: 58px; }
  .zap { left: 0; right: 0; bottom: 0; }
  .zap-botao { width: 100%; height: 58px; padding: 0 16px; border-radius: 0; justify-content: center; gap: 12px; box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); transform: none; }
  .zap-botao:hover { transform: none; }
  .zap-botao span { flex: none; }
  .zap-icone { width: 40px; height: 40px; font-size: 24px; }
  .zap-janela { left: 0; right: 0; width: auto; border-radius: 16px 16px 0 0; }
}

/* Quem pede menos movimento: fotos paradas, sem entradas, sem brilho passando. */
@media (prefers-reduced-motion: reduce) {
  .cinema.pronta .quadro.ativo img, .cinema.pronta .quadro.saindo img, .faixa-foto, .faixa .titulo-linha,
  .cinema-luz::before, .cinema-rolar::after, .topo .logo::after, .menu li, .ver, .ver img, .assentando > img { animation: none !important; }
  .quadro { transition-duration: .01s; }
  .cinema-progresso .agora i { animation: none; transform: scaleX(1); }
  .inclina, .mosaico img, .cp-foto img, .cg-foto img, .insta-grade img { transition: none; }
  .mosaico a:hover img, .cartao-post:hover .cp-foto img, .cartao-galeria a:hover img, .insta-grade a:hover img { transform: none; }
}