/* Pedro Teixeira — portfólio (perlo.tech). Página única, HTML e CSS puros. */

:root{
  --fundo:   #0A0A0D;
  --fundo-2: #101015;
  --caixa:   #15151B;
  --texto:   #F2F2F4;
  --texto-2: #BCBCC6;
  --apagado: #8B8B97;
  --linha:   rgba(255,255,255,0.11);
  --moldura: #23232B;

  --azul:    #3B82F6;
  --violeta: #8B5CF6;
  --cor:     #8A84FA;   /* destaque em texto, sobre o fundo escuro */
  --cor-botao: #5B52E8; /* fundo de botão: texto branco com contraste 5,6:1 */

  --max: 1184px;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 84px; }
body{
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure{ margin: 0; padding: 0; }
ul,ol{ list-style: none; }
::selection{ background: var(--cor); color: #fff; }
:focus-visible{ outline: 2px solid var(--cor); outline-offset: 3px; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.skip{ position: absolute; left: 8px; top: -48px; background: #fff; color: #000; padding: 10px 14px; z-index: 100; }
.skip:focus{ top: 8px; }

/* Topo */
.topo{ position: sticky; top: 0; z-index: 50; background: var(--fundo); border-bottom: 1px solid transparent; }
.topo.rolou{ border-bottom-color: var(--linha); }
.topo .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.marca{ display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 16.5px; white-space: nowrap; }
.marca small{ font-weight: 400; font-size: 12.5px; color: var(--apagado); }
.menu{ display: flex; gap: 4px; }
.menu a{ padding: 8px 14px; font-size: 14.5px; color: var(--texto-2); }
.menu a:hover, .menu a.ativo{ color: #fff; }
.menu a.ativo{ box-shadow: inset 0 -2px 0 var(--cor); }
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-cheio{ background: var(--cor-botao); color: #fff; }
.btn-cheio:hover{ background: #fff; color: #000; }
.btn-borda{ border: 1px solid var(--linha); }
.btn-borda:hover{ border-color: #fff; }
.topo .btn{ padding: 10px 16px; font-size: 14px; }
.hamb{ display: none; width: 42px; height: 42px; border: 1px solid var(--linha); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamb span{ width: 18px; height: 2px; background: var(--texto); transition: transform .2s ease, opacity .2s ease; }
.hamb[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.menu-cel{ display: none; flex-direction: column; padding: 8px 28px 20px; border-bottom: 1px solid var(--linha); }
.menu-cel.aberto{ display: flex; }
.menu-cel a{ padding: 13px 0; border-bottom: 1px solid var(--linha); font-size: 16px; }
.menu-cel a.btn{ margin-top: 14px; border-bottom: none; }

/* Abertura */
.abre{ border-bottom: 1px solid var(--linha); overflow: hidden; }
.abre .wrap{ display: grid; grid-template-columns: 1fr 440px; gap: 12px; align-items: end; min-height: 640px; }
.abre-texto{ padding: 84px 0 80px; align-self: center; position: relative; z-index: 2; }
.sobrelinha{ font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--apagado); }
.nome{
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(76px, 12.4vw, 184px); line-height: 0.9;
  margin: 22px 0 34px -4px;
}
.nome span{ display: block; white-space: nowrap; }
.abre-texto p{ font-size: 20px; line-height: 1.55; color: var(--texto-2); max-width: 30em; }
.acoes{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.foto{ position: relative; align-self: end; height: 560px; }
.foto-circulo{
  position: absolute; left: 50%; top: 44px; width: 408px; height: 408px; transform: translateX(-50%);
  border-radius: 50%; background: linear-gradient(140deg, var(--azul) 8%, var(--violeta) 92%);
}
.foto img{ position: absolute; left: 50%; bottom: 0; width: 372px; max-width: none; transform: translateX(-50%); }

/* Números */
.numeros{ border-bottom: 1px solid var(--linha); }
.numeros .wrap{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 44px; padding-bottom: 44px; }
.numeros b{ display: block; font-family: var(--display); font-weight: 400; font-size: 62px; line-height: 1; color: var(--cor); }
.numeros span{ display: block; margin-top: 8px; font-size: 14.5px; color: var(--texto-2); }

/* Seções */
.secao{ padding: 104px 0; border-bottom: 1px solid var(--linha); }
.secao.fundo{ background: var(--fundo-2); }
.cab{ max-width: 760px; margin-bottom: 72px; }
.cab .sobrelinha{ color: var(--cor); }
.titulo{ font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 6.4vw, 88px); line-height: 0.96; margin: 14px 0 20px; }
.cab p{ font-size: 18.5px; line-height: 1.6; color: var(--texto-2); }

/* Projeto: texto e tela lado a lado */
.proj{ display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
.proj + .proj{ margin-top: 112px; }
.proj.inv{ grid-template-columns: 1.18fr 0.82fr; }
.proj.inv .proj-tela{ order: -1; }
.de{ font-size: 14px; color: var(--apagado); }
.proj h3{ font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 5vw, 66px); line-height: 0.98; margin: 8px 0 20px; }
.proj > div > p{ font-size: 17.5px; line-height: 1.62; color: var(--texto-2); }
.ficha{ margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.ficha dt{ font-weight: 600; font-size: 15.5px; }
.ficha dd{ font-size: 14.5px; color: var(--apagado); line-height: 1.55; margin-top: 2px; }
.estado{ margin-top: 28px; font-size: 13.5px; color: var(--apagado); }
.estado b{ color: var(--texto); font-weight: 600; }
.estado a{ color: var(--cor); font-weight: 600; margin-left: 12px; border-bottom: 1px solid transparent; }
.estado a:hover{ border-bottom-color: var(--cor); }

.tela{ display: block; width: 100%; border: 8px solid var(--moldura); border-radius: 8px; background: var(--moldura); overflow: hidden; cursor: zoom-in; }
.tela img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
figcaption{ margin-top: 14px; font-size: 13.5px; color: var(--apagado); max-width: 44em; line-height: 1.5; }
.celulares{ display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.cel{ display: block; width: 46%; max-width: 268px; border: 8px solid var(--moldura); border-radius: 28px; background: var(--moldura); overflow: hidden; cursor: zoom-in; }
.cel:nth-child(2){ margin-top: 48px; }
.cel img{ width: 100%; aspect-ratio: 9 / 15; object-fit: cover; object-position: top; }

/* Lista de itens menores */
.tambem{ margin-top: 104px; }
.tambem > h4{ font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--apagado); font-weight: 400; margin-bottom: 20px; }
.grade{ display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--linha); }
.grade.tres{ grid-template-columns: repeat(3, 1fr); }
.item{ padding: 28px 28px 28px 0; border-bottom: 1px solid var(--linha); }
.grade .item:nth-child(even){ padding-left: 28px; border-left: 1px solid var(--linha); }
.grade.tres .item{ padding-left: 28px; border-left: 1px solid var(--linha); }
.grade.tres .item:nth-child(3n+1){ padding-left: 0; border-left: none; }
.item h5{ font-size: 18.5px; font-weight: 600; margin: 0 0 8px; }
.item p{ font-size: 15px; color: var(--texto-2); line-height: 1.6; }
.item .meta{ display: block; margin-top: 12px; font-size: 13px; color: var(--apagado); }

/* Passo a passo */
.fluxo{ display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
.fluxo + .fluxo{ margin-top: 88px; padding-top: 88px; border-top: 1px solid var(--linha); }
.fluxo h3{ font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4vw, 52px); line-height: 1; margin: 8px 0 18px; }
.fluxo > div > p{ font-size: 17px; color: var(--texto-2); line-height: 1.62; }
.passos{ counter-reset: p; background: var(--caixa); border: 1px solid var(--linha); }
.passos li{ counter-increment: p; display: grid; grid-template-columns: 56px 1fr; padding: 18px 22px 18px 0; border-bottom: 1px solid var(--linha); }
.passos li:last-child{ border-bottom: none; }
.passos li::before{ content: counter(p); font-family: var(--display); font-size: 20px; color: var(--cor); text-align: center; line-height: 1.25; }
.passos b{ display: block; font-size: 15.5px; font-weight: 600; }
.passos span{ display: block; font-size: 14.5px; color: var(--apagado); line-height: 1.55; margin-top: 2px; }

/* Calendário do fechamento */
.calendario{ display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--linha); background: var(--caixa); }
.calendario li{ padding: 18px 16px 20px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); min-height: 128px; }
.calendario li:nth-child(5n){ border-right: none; }
.calendario li:nth-child(n+6){ border-bottom: none; }
.calendario b{ display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--cor); }
.calendario span{ display: block; margin-top: 10px; font-size: 13.5px; color: var(--texto-2); line-height: 1.45; }
.situacoes{ background: var(--caixa); border: 1px solid var(--linha); }
.situacoes li{ display: grid; grid-template-columns: 14px 190px 1fr; gap: 14px; align-items: baseline; padding: 15px 20px; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.situacoes li:last-child{ border-bottom: none; }
.situacoes i{ width: 11px; height: 11px; border-radius: 50%; display: block; transform: translateY(1px); }
.situacoes b{ font-weight: 600; }
.situacoes span{ color: var(--apagado); }

/* Sites */
.sites{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.site{ display: block; border: 1px solid var(--linha); background: var(--caixa); transition: border-color .15s ease; }
.site:hover{ border-color: #fff; }
.site img{ width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; object-position: top; border-bottom: 1px solid var(--linha); }
.site div{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 20px; }
.site b{ font-size: 17px; font-weight: 600; }
.site span{ font-size: 13.5px; color: var(--apagado); text-align: right; }

/* Sobre */
.sobre{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; }
.prosa p{ font-size: 18.5px; line-height: 1.68; color: var(--texto-2); }
.prosa p + p{ margin-top: 20px; }
.prosa strong{ color: var(--texto); font-weight: 600; }
.pilha{ border-top: 1px solid var(--linha); }
.pilha div{ padding: 20px 0; border-bottom: 1px solid var(--linha); }
.pilha dt{ font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cor); margin-bottom: 6px; }
.pilha dd{ font-size: 15.5px; color: var(--texto-2); line-height: 1.6; }

/* Contato: bloco claro, para fechar a página */
.fim{ background: var(--texto); color: #0A0A0D; padding: 104px 0 36px; }
.fim .sobrelinha{ color: #55555F; }
.fim h2{ font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(54px, 9vw, 136px); line-height: 0.94; margin: 18px 0 26px; }
.fim > .wrap > p{ font-size: 19px; color: #3C3C46; max-width: 34em; }
.canais{ display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid rgba(10,10,13,0.2); }
.canais a{ padding: 26px 24px 26px 0; border-bottom: 1px solid rgba(10,10,13,0.2); }
.canais a + a{ padding-left: 24px; border-left: 1px solid rgba(10,10,13,0.2); }
.canais small{ display: block; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #55555F; }
.canais b{ display: block; margin-top: 8px; font-size: 20px; font-weight: 600; }
.canais a:hover b{ color: #4338CA; }
.rodape{ margin-top: 72px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: #55555F; }

/* Imagem ampliada */
.luz{ position: fixed; inset: 0; z-index: 200; background: rgba(5,5,7,0.94); display: none; align-items: center; justify-content: center; padding: 28px; cursor: zoom-out; }
.luz.aberta{ display: flex; }
.luz[hidden]{ display: none; }
.luz img{ max-width: 100%; max-height: calc(100% - 56px); margin-top: 40px; }
.luz-fechar{ position: absolute; top: 14px; right: 14px; padding: 11px 16px; font-size: 14.5px; font-weight: 600; color: #000; background: #fff; }
body.travado{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ transition: none !important; } }

/* Telas menores */
@media (max-width: 1080px){
  .abre .wrap{ grid-template-columns: 1fr 360px; min-height: 560px; }
  .foto{ height: 470px; }
  .foto-circulo{ width: 344px; height: 344px; top: 36px; }
  .foto img{ width: 312px; }
  .proj, .proj.inv, .fluxo{ grid-template-columns: 1fr; gap: 36px; }
  .proj.inv .proj-tela{ order: 0; }
  .sobre{ grid-template-columns: 1fr; gap: 48px; }
  .grade.tres{ grid-template-columns: repeat(2, 1fr); }
  .grade.tres .item, .grade.tres .item:nth-child(3n+1){ padding-left: 0; border-left: none; }
  .grade.tres .item:nth-child(even){ padding-left: 28px; border-left: 1px solid var(--linha); }
}
@media (max-width: 860px){
  .menu, .topo .btn{ display: none; }
  .hamb{ display: flex; }
  .abre .wrap{ grid-template-columns: 1fr; min-height: 0; }
  .abre-texto{ padding: 56px 0 8px; }
  .foto{ height: 420px; width: 100%; max-width: 420px; margin: 0 auto; }
  .numeros .wrap{ grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .secao{ padding: 76px 0; }
  .cab{ margin-bottom: 48px; }
  .proj + .proj{ margin-top: 80px; }
  .sites{ grid-template-columns: 1fr; }
  .calendario{ grid-template-columns: repeat(2, 1fr); }
  .calendario li{ min-height: 0; border-right: 1px solid var(--linha) !important; border-bottom: 1px solid var(--linha) !important; }
  .calendario li:nth-child(2n){ border-right: none !important; }
  .calendario li:nth-last-child(-n+2){ border-bottom: none !important; }
  .canais{ grid-template-columns: 1fr; }
  .canais a, .canais a + a{ padding: 22px 0; border-left: none; }
  .situacoes li{ grid-template-columns: 14px 1fr; }
  .situacoes span{ grid-column: 2; }
}
@media (max-width: 600px){
  .wrap{ padding: 0 20px; }
  .menu-cel{ padding: 8px 20px 20px; }
  .marca small{ display: none; }
  .abre-texto p{ font-size: 17.5px; }
  .nome{ font-size: clamp(64px, 21vw, 110px); }
  .numeros b{ font-size: 48px; }
  .grade, .grade.tres{ grid-template-columns: 1fr; }
  .grade .item, .grade.tres .item, .grade .item:nth-child(even), .grade.tres .item:nth-child(even){ padding: 24px 0; border-left: none; }
  .celulares{ gap: 14px; }
  .cab p{ font-size: 17px; }
  .fim{ padding-top: 76px; }
}

/* Botões de abrir site e app dentro do projeto */
.proj .acoes{ margin-top: 18px; }
.proj .acoes .btn{ padding: 14px 22px; font-size: 15px; }
.estado{ margin-bottom: 0; }

/* Miniaturas extras de cada projeto */
.galeria{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.galeria button{ display: block; border: 1px solid var(--linha); background: var(--caixa); overflow: hidden; cursor: zoom-in; transition: border-color .15s ease; }
.galeria button:hover{ border-color: #fff; }
.galeria img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }

/* Documentos e e-mails reais das automações */
.fluxo .provas{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.fluxo .provas.uma{ grid-template-columns: minmax(0, 420px); }
.tela.doc{ border-width: 6px; }
.tela.doc img{ aspect-ratio: 4 / 4.6; }

/* Sites: deixa claro que o cartão abre o endereço */
.site em{ display: block; font-style: normal; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--cor-botao); padding: 13px 20px; transition: background .15s ease, color .15s ease; }
.site:hover em{ background: #fff; color: #000; }

@media (max-width: 860px){
  .fluxo .provas{ grid-template-columns: 1fr; }
  .fluxo .provas.uma{ grid-template-columns: 1fr; }
  .tela.doc img{ aspect-ratio: 4 / 3.4; }
}
@media (max-width: 600px){
  .galeria{ grid-template-columns: repeat(2, 1fr); }
  .proj .acoes .btn{ flex: 1 1 100%; }
}

/* Foto nova é mais alta que larga: no celular a largura segue a altura do bloco */
@media (max-width: 860px){ .foto img{ width: auto; height: 96%; } }

/* ===== Ajustes da auditoria (11/10/2026) ===== */

/* Rótulos em caixa alta: 12px no mínimo */
.sobrelinha, .tambem > h4, .pilha dt, .canais small{ font-size: 12px; }

/* Contato: botão principal e atalho fixo no celular */
.btn-escuro{ background: #0A0A0D; color: #fff; margin-top: 28px; padding: 16px 26px; font-size: 16px; }
.btn-escuro:hover{ background: var(--cor-botao); }
.zap{
  position: fixed; right: 14px; bottom: 14px; z-index: 40; display: none;
  padding: 13px 18px; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--cor-botao);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: opacity .2s ease, transform .2s ease;
}
.zap.some{ opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Em tela estreita, a ordem de cada projeto vira: título, texto, tela, ficha, botões.
   Antes a imagem só aparecia depois de toda a ficha. */
@media (max-width: 1080px){
  .proj, .proj.inv{ display: flex; flex-direction: column; gap: 0; }
  .proj > div{ display: contents; }
  .proj .de{ order: 1; }
  .proj h3{ order: 2; }
  .proj > div > p{ order: 3; }
  .proj .proj-tela, .proj.inv .proj-tela{ order: 4; margin: 28px 0 4px; }
  .proj .ficha{ order: 5; }
  .proj > div > p.estado{ order: 6; }
  .proj .acoes{ order: 7; }
}
@media (max-width: 860px){
  .zap{ display: inline-flex; }
  .fim{ padding-bottom: 84px; }
}
@media (max-width: 600px){
  .sobrelinha{ letter-spacing: 0.16em; }
  .btn-escuro{ width: 100%; }
}

/* Atalho do WhatsApp menor, para não cobrir o texto */
.zap{ padding: 10px 14px; font-size: 13.5px; right: 10px; bottom: 10px; }

/* Documentos e e-mails ampliados: no celular abrem em tamanho legível e a pessoa arrasta para ler */
.luz{ overflow: auto; }
.luz.doc{ align-items: flex-start; justify-content: flex-start; cursor: default; }
.luz.doc img{ max-width: none; max-height: none; width: max(100%, 860px); margin: 52px 0 24px; }
.luz-fechar{ position: fixed; }

/* ===== Planilhas com imagem ===== */
.plans{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px 36px; }
.plan h5{ font-size: 20px; font-weight: 600; margin: 22px 0 8px; }
.plan p{ font-size: 15.5px; color: var(--texto-2); line-height: 1.62; }
.plan .meta{ display: block; margin-top: 12px; font-size: 13px; color: var(--apagado); }
.tela.plan{ background: #fff; }
.tela.plan img{ aspect-ratio: 16 / 8.6; object-fit: cover; object-position: left top; }
.plan .galeria{ grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.plan .galeria img{ object-position: left top; background: #fff; }

/* ===== Só no celular: página mais curta, sem mexer no computador ===== */
.ver-ficha{ display: none; }
@media (max-width: 860px){
  /* ficha técnica recolhida atrás de um botão */
  .ver-ficha{
    display: flex; order: 5; align-items: center; justify-content: space-between; width: 100%;
    margin-top: 22px; padding: 14px 16px; font-size: 14.5px; font-weight: 600; text-align: left;
    border: 1px solid var(--linha); background: var(--caixa);
  }
  .ver-ficha::after{ content: "+"; font-size: 20px; line-height: 1; color: var(--cor); }
  .ver-ficha[aria-expanded="true"]::after{ content: "–"; }
  .proj .ficha{ display: none; margin-top: 18px; }
  .proj .ficha.aberta{ display: flex; }

  /* miniaturas e documentos em faixa que desliza para o lado */
  .galeria, .plan .galeria{ display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .galeria button{ flex: 0 0 46%; scroll-snap-align: start; }
  .fluxo .provas, .fluxo .provas.uma{ display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .fluxo .provas figure{ flex: 0 0 78%; scroll-snap-align: start; }
  .fluxo .provas.uma figure{ flex: 0 0 100%; }

  .plans{ grid-template-columns: 1fr; gap: 44px; }
  .proj + .proj{ margin-top: 64px; }
  .tambem{ margin-top: 64px; }
  .fluxo + .fluxo{ margin-top: 56px; padding-top: 56px; }
}


/* Nome no topo com área de toque de 44px */
.marca{ padding: 12px 0; }

/* ===== Three.js ===== */
/* Abertura: o desenho 3D fica atrás do círculo e da foto */
.foto-3d{ position: absolute; left: 50%; top: -72px; width: 640px; height: 640px; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.foto-circulo{ z-index: 1; }
.foto img{ z-index: 2; }
.abre .wrap{ overflow: visible; }

/* Contato: malha de pontos no fundo */
.fim{ position: relative; overflow: hidden; }
.fim-3d{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.fim .wrap{ position: relative; z-index: 1; }

/* Capa do visualizador 3D */
.tresd-proj{ margin-top: 96px; }
.tresd-capa{ position: relative; cursor: pointer; }
.tresd-capa img{ aspect-ratio: 1240 / 760; }
.tresd-selo{ position: absolute; left: 14px; bottom: 14px; padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--cor-botao); }
.tresd-capa:hover .tresd-selo{ background: #fff; color: #000; }
.tresd-quadro{ display: block; width: 100%; aspect-ratio: 16 / 11; border: 8px solid var(--moldura); border-radius: 8px; background: #0b0e12; }
@media (max-width: 1080px){ .tresd-proj{ margin-top: 72px; } }