/* NitZ House — cores e formas tiradas da logo:
   cinza da letra, azul da casa, moldura de janela com barra de título
   e o cursor com contorno branco. */

@font-face {
  font-family: "Saira NitZ";
  src: url("/assets/fontes/saira-120-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/assets/fontes/golos-text.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --tinta: #424348;      /* cinza da logo */
  --tinta-funda: #2e2f33;
  --ceu: #91cdf1;        /* azul da logo */
  --ceu-forte: #6fbdeb;
  --ceu-claro: #e8f4fc;
  --link: #1f6a98;       /* azul escuro para texto sobre branco (5,9:1) */
  --papel: #fff;
  --suave: #5c5e64;
  --linha: #d6d8dc;

  --titulo: "Saira NitZ", "Arial Black", system-ui, sans-serif;
  --texto: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margem: 16px;
  --largura: 1200px;
  --traco: 3px;          /* espessura da moldura */
  --barra: 30px;         /* altura da barra de título da janela */
  --raio: 10px;
}
@media (min-width: 700px) {
  :root { --margem: 32px; --traco: 4px; --barra: 36px; --raio: 12px; }
}
@media (min-width: 1100px) {
  :root { --margem: 48px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 6px;
}
.pular:focus { top: 12px; }

/* ---------- moldura de janela (a mesma da logo) ---------- */
.janela {
  position: relative;
  display: block;
  border: var(--traco) solid var(--tinta);
  border-radius: var(--raio);
  background: var(--papel);
}
.janela::before {               /* linha da barra de título */
  content: "";
  position: absolute; left: 0; right: 0; top: var(--barra);
  border-top: var(--traco) solid var(--tinta);
  pointer-events: none;
}

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  background: var(--ceu); color: var(--tinta);
  border: 3px solid var(--tinta); border-radius: 6px;
  font: 650 1.0625rem/1.2 var(--texto);
  text-decoration: none;
  transition: background-color .15s;
}
.botao:hover { background: var(--ceu-forte); }
.botao:active { transform: translateY(1px); }
.botao--pequeno { min-height: 42px; padding: 8px 14px; font-size: 0.95rem; border-width: 2px; }
.botao--claro { background: var(--papel); }
.botao--claro:hover { background: var(--ceu-claro); }
.icone-whats { width: 20px; height: 20px; flex: none; }

.acao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.acao__numero { color: var(--suave); font-size: 0.98rem; }
.acao__numero a { color: inherit; font-weight: 600; white-space: nowrap; }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--papel);
  border-bottom: 2px solid var(--linha);
}
.topo__dentro {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto; padding: 10px var(--margem);
  display: flex; align-items: center; gap: 16px;
}
.topo__logo { margin-right: auto; border-radius: 6px; }
.topo__logo img { height: 42px; width: auto; }
.topo__nav { display: none; }
@media (min-width: 860px) {
  .topo__dentro { padding-block: 12px; }
  .topo__logo img { height: 48px; }
  .topo__nav { display: flex; gap: 28px; margin-right: 12px; }
  .topo__nav a { color: var(--tinta); font-weight: 500; text-decoration: none; padding: 6px 0; }
  .topo__nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* ---------- abertura: o título atravessa a borda da janela, como "NitZ House" na logo ---------- */
.abertura {
  --sal: 22px;            /* quanto o título sai para fora da moldura */
  --dentro: 18px;         /* respiro interno da moldura */
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 28px var(--margem) 72px;
}
.abertura__janela {
  margin-left: var(--sal);
  background: linear-gradient(var(--ceu) 0 var(--barra), var(--papel) 0);   /* barra de título azul: a janela "ativa" */
  padding: calc(var(--barra) + 96px) 20px 28px var(--dentro);
}
.casa {
  position: absolute; top: calc(var(--barra) + 14px); right: 14px;
  width: 92px; height: 92px;
  overflow: visible;
}
.casa__faces { fill: var(--ceu); }
.abertura__titulo {
  position: relative;
  width: fit-content;
  margin-left: calc(-1 * (var(--sal) + var(--traco) + var(--dentro)));
  padding: 4px 10px 6px 0;
  background: var(--papel);          /* "corta" a borda esquerda da janela */
  font-size: clamp(2.15rem, 1.1rem + 4.7vw, 4.7rem);
  line-height: 1.02;
  max-width: 13em;
}
.abertura__texto {
  margin: 22px 0 28px;
  max-width: 34em;
  font-size: 1.125rem;
}
@media (max-width: 699px) {
  .abertura { --sal: 18px; --dentro: 14px; }
  .abertura__janela { padding-right: 14px; }
  .abertura .botao { width: 100%; padding-inline: 12px; font-size: 1rem; }
  .abertura__texto { font-size: 1.0625rem; }
}
@media (min-width: 700px) {
  .abertura { --sal: 56px; --dentro: 32px; padding-top: 48px; padding-bottom: 104px; }
  .abertura__janela { padding: calc(var(--barra) + 48px) 40px 44px var(--dentro); }
  .casa { width: 150px; height: 150px; top: calc(var(--barra) + 24px); right: 28px; }
  .abertura__titulo { max-width: 11.5em; padding-right: 16px; }
  .abertura__texto { margin: 28px 0 32px; font-size: 1.2rem; }
}
@media (min-width: 1100px) {
  .abertura { --sal: 104px; --dentro: 48px; }
  .abertura__janela { padding: calc(var(--barra) + 56px) 56px 56px var(--dentro); }
  .casa { width: 230px; height: 230px; top: calc(var(--barra) + 40px); right: 56px; }
  .abertura__titulo { max-width: 10.4em; }
}

/* a casa se monta uma vez: arestas, cursor chegando e o clique que pinta as faces */
@media (prefers-reduced-motion: no-preference) {
  .casa__arestas > * { animation: desenha .8s cubic-bezier(.55, 0, .3, 1) .15s both; }
  .casa__arestas > polygon { animation-duration: 1s; animation-delay: .05s; }
  .casa__cursor { transform-box: fill-box; transform-origin: 100% 0; animation: chega .6s cubic-bezier(.2, .7, .2, 1) .7s both, clica .22s ease-in-out 1.32s; }
  .casa__faces { animation: pinta .35s ease-out 1.42s both; }
}
@keyframes desenha { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes chega { from { opacity: 0; transform: translate(-70px, 70px); } to { opacity: 1; transform: none; } }
@keyframes clica { 50% { transform: scale(.88); } }
@keyframes pinta { from { opacity: 0; } to { opacity: 1; } }

/* ---------- seções ---------- */
.secao {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 72px var(--margem);
}
@media (min-width: 700px) { .secao { padding-block: 112px; } }
.secao__cabeca { margin-bottom: 40px; max-width: 40em; }
.secao__cabeca h2, .faixa h2, .final h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
.secao__cabeca p { margin-top: 14px; color: var(--suave); font-size: 1.125rem; }

/* ---------- trabalhos ---------- */
.trabalhos { padding-top: 24px; }
.trabalho { display: grid; gap: 52px; }
.trabalho + .trabalho { margin-top: 96px; }
@media (min-width: 960px) {
  .trabalho { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .trabalho--invertido { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); }
  .trabalho--invertido .trabalho__tela { order: 2; }
  .trabalho + .trabalho { margin-top: 136px; }
}

.trabalho__tela {
  padding-top: calc(var(--barra) + var(--traco));
  margin-right: 12px;                 /* espaço para o celular que sai da moldura */
  color: var(--suave);
  text-decoration: none;
}
.janela__barra {
  position: absolute; top: 0; left: 0; right: 0; height: var(--barra);
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-radius: calc(var(--raio) - var(--traco)) calc(var(--raio) - var(--traco)) 0 0;
  font-size: 0.8125rem; font-weight: 550; letter-spacing: .01em;
  transition: background-color .15s, color .15s;
}
.janela__barra svg { width: 11px; height: 11px; }
.trabalho__tela:hover .janela__barra { background: var(--ceu); color: var(--tinta); }
.trabalho__desktop {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top;
  border-radius: 0 0 calc(var(--raio) - var(--traco)) calc(var(--raio) - var(--traco));
  background: var(--ceu-claro);
}
.trabalho__celular {               /* o celular sai da moldura com contorno branco, como o cursor da logo */
  position: absolute; right: -12px; bottom: -32px;
  width: 27%; height: auto; aspect-ratio: 400 / 866;
  border: var(--traco) solid var(--tinta);
  border-radius: 14px;
  box-shadow: 0 0 0 7px var(--papel);
  background: var(--papel);
}
@media (min-width: 700px) {
  .trabalho__celular { width: 23%; right: -24px; bottom: -40px; border-radius: 18px; box-shadow: 0 0 0 10px var(--papel); }
  .trabalho__tela { margin-right: 24px; }
}

.trabalho__tipo { color: var(--suave); font-weight: 600; font-size: .95rem; }
.trabalho__texto h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: 6px 0 14px; }
.trabalho__texto > p:not(.trabalho__tipo) { max-width: 34em; }
.trabalho__texto h4 { margin: 26px 0 10px; font-size: 1rem; font-weight: 650; }
.lista { list-style: none; padding: 0; display: grid; gap: 8px; }
.lista li { position: relative; padding-left: 26px; }
.lista li::before {                /* o quadrado azul do pingo do "i" */
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 11px; height: 11px; border-radius: 2px; background: var(--ceu);
}
.link-fora {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 26px;
  font-weight: 600;
}
.link-fora svg { width: 12px; height: 12px; }

/* ---------- o que fazemos ---------- */
.servicos { padding-top: 40px; }
.servicos__lista { list-style: none; padding: 0; border-top: var(--traco) solid var(--tinta); }
.servico {
  display: grid; gap: 10px;
  padding: 28px 0 30px;
  border-bottom: 2px solid var(--linha);
}
.servico h3 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); }
.servico p { max-width: 36em; }
.servico a { font-weight: 600; justify-self: start; }
@media (min-width: 960px) {
  .servico { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 10rem; gap: 40px; align-items: baseline; padding: 36px 0 38px; }
  .servico a { justify-self: end; text-align: right; }
}
.servicos__extra { margin-top: 24px; color: var(--suave); }

/* ---------- como funciona ---------- */
.passos { padding-top: 40px; }
.passos__lista { list-style: none; padding: 0; display: grid; gap: 0; }
.passo { position: relative; padding: 0 0 36px 44px; }
.passo::before {                   /* marcador: quadrado azul com contorno, como as faces da casa */
  content: ""; position: absolute; left: 0; top: 4px; z-index: 1;
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--ceu); border: var(--traco) solid var(--tinta);
}
.passo::after {                    /* trilho entre os passos */
  content: ""; position: absolute; left: 9.5px; top: 26px; bottom: 0;
  border-left: var(--traco) solid var(--tinta);
}
.passo:last-child { padding-bottom: 0; }
.passo:last-child::after { display: none; }
.passo h3 { font-size: 1.45rem; margin-bottom: 10px; }
.passo p { max-width: 30em; }
@media (min-width: 960px) {
  .passos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
  .passo { padding: 52px 0 0; }
  .passo::before { top: 0; width: 26px; height: 26px; }
  .passo::after { left: 26px; right: -32px; top: 11px; bottom: auto; border-left: 0; border-top: var(--traco) solid var(--tinta); }
  .passo:last-child::after { display: block; right: 0; }
}

/* ---------- diferenciais (faixa clara) ---------- */
.faixa { background: #f1f3f5; color: var(--tinta); }
.faixa__dentro {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto; padding: 80px var(--margem);
}
@media (min-width: 700px) { .faixa__dentro { padding-block: 120px; } }
.faixa h2 span { display: inline-block; }
.diferenciais__lista { display: grid; gap: 36px; margin-top: 48px; }
.diferenciais__lista > div { border-top: var(--traco) solid var(--tinta); padding-top: 22px; }
.diferenciais__lista dt { position: relative; padding-left: 26px; font-family: var(--titulo); font-weight: 700; font-size: 1.3rem; line-height: 1.15; margin-bottom: 10px; }
.diferenciais__lista dt::before { content: ""; position: absolute; left: 0; top: .22em; width: 14px; height: 14px; border-radius: 3px; background: var(--ceu); }
.diferenciais__lista dd { max-width: 32em; }
.diferenciais__lista dd.peso { margin-top: 12px; color: var(--suave); font-size: .95rem; }
.diferenciais__lista dd.peso strong { color: var(--tinta); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .diferenciais__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 56px; margin-top: 64px; }
}

/* ---------- chamada final: outra janela, fechando a página como o topo abre ---------- */
.final {
  --sal: 18px; --dentro: 14px;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 80px var(--margem) 88px;
}
.final__janela {
  margin-left: var(--sal);
  padding: calc(var(--barra) + 40px) 14px 32px var(--dentro);
  background: linear-gradient(var(--ceu) 0 var(--barra), var(--papel) 0);
  display: grid; gap: 44px;
}
.final__titulo {
  position: relative; width: fit-content;
  margin-left: calc(-1 * (var(--sal) + var(--traco) + var(--dentro)));
  padding: 4px 10px 6px 0;
  background: var(--papel);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
}
.final__texto > p { margin: 16px 0 28px; max-width: 30em; font-size: 1.125rem; }
.final .botao { width: 100%; }
@media (min-width: 700px) {
  .final { --sal: 56px; --dentro: 32px; padding-block: 120px 128px; }
  .final__janela { padding: calc(var(--barra) + 48px) 40px 48px var(--dentro); }
  .final .botao { width: auto; }
}
@media (min-width: 960px) {
  .final__janela { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
}
@media (min-width: 1100px) {
  .final { --sal: 104px; --dentro: 48px; }
  .final__janela { padding: calc(var(--barra) + 56px) 56px 56px var(--dentro); }
}
.mensagem { margin: 0; width: 100%; max-width: 26em; }
.mensagem__balao { width: fit-content; margin-left: auto !important; }
.mensagem figcaption { font-size: .95rem; font-weight: 550; color: var(--suave); margin-bottom: 12px; }
.mensagem__balao {
  position: relative; margin: 0;
  background: var(--ceu-claro); color: var(--tinta);
  border: var(--traco) solid var(--tinta);
  border-radius: 14px 14px 3px 14px;
  padding: 16px 20px 18px;
  font-size: 1.15rem; line-height: 1.45;
}
.mensagem__digitando { display: none; }
@media (min-width: 960px) { .mensagem { justify-self: end; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta-funda); color: #d3d5d9; font-size: .98rem; }
.rodape__dentro {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto; padding: 32px var(--margem) 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
}
.rodape strong { color: #fff; font-weight: 600; }
.rodape a { color: #fff; }
.rodape :focus-visible { outline-color: var(--ceu); }
.rodape img { width: 44px; height: 44px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 404 ---------- */
.nao-achou { min-height: 80vh; display: grid; align-content: center; gap: 20px; }
.nao-achou img { height: 64px; width: auto; }
.nao-achou h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }

/* ---------- movimento (só com JS e sem "reduzir movimento": a classe .mov fica no <html>) ---------- */
.casa { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* botões: o ícone do WhatsApp dá uma balançada */
@media (hover: hover) {
  .mov .botao:hover .icone-whats { animation: balanca .5s ease-in-out; }
}
@keyframes balanca { 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } 100% { transform: none; } }

/* trabalhos: o celular entra pela borda da janela; no hover, levanta um pouco */
.mov .trabalho__celular { transition: transform .7s cubic-bezier(.2, .8, .2, 1.15), opacity .5s; }
.mov .trabalho:not(.visto) .trabalho__celular { opacity: 0; transform: translate(18px, 40px) rotate(6deg); }
.mov .trabalho__desktop { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .mov .trabalho.visto .trabalho__tela:hover .trabalho__celular { transform: translateY(-10px) rotate(-3deg); transition-duration: .35s; }
}

/* o que fazemos: o quadrado azul do "i" entra na frente do nome */
@media (hover: hover) and (min-width: 960px) {
  .mov .servico h3 { position: relative; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .mov .servico h3::before {
    content: ""; position: absolute; left: -26px; top: .32em; width: 14px; height: 14px; border-radius: 3px;
    background: var(--ceu); transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
  }
  .mov .servico:hover h3 { transform: translateX(26px); }
  .mov .servico:hover h3::before { transform: scale(1); }
}

/* como funciona: o cursor da logo percorre os passos e "clica" em cada um */
.passos__lista { position: relative; }
.passos__cursor { position: absolute; left: 0; top: 0; width: 34px; height: 34px; z-index: 2; pointer-events: none; opacity: 0; }
.passos__cursor svg { width: 100%; height: 100%; overflow: visible; }
.mov .passos--animar .passo::before { background: var(--papel); transition: background-color .2s; }
.mov .passos--animar .passo.feito::before { background: var(--ceu); animation: estala .35s cubic-bezier(.3, 1.6, .5, 1); }
.mov .passos--animar .passo::after { transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.5, 0, .2, 1); }
.mov .passos--animar .passo.feito::after { transform: none; }
.mov .passos--animar .passo h3, .mov .passos--animar .passo p { transition: opacity .4s; }
.mov .passos--animar .passo:not(.feito) h3, .mov .passos--animar .passo:not(.feito) p { opacity: .35; }
@media (min-width: 960px) {
  .mov .passos--animar .passo::after { transform: scaleX(0); transform-origin: left; }
}
@keyframes estala { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }

/* mensagem final: "digitando…" antes do texto aparecer */
.mov .mensagem--esperando .mensagem__digitando { display: flex; gap: 6px; align-items: center; height: 1.45em; }
.mov .mensagem--esperando .mensagem__balao p { position: absolute; opacity: 0; }
.mensagem__digitando i { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); animation: pula 1s ease-in-out infinite; }
.mensagem__digitando i:nth-child(2) { animation-delay: .15s; }
.mensagem__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.mov .mensagem--chegou .mensagem__balao { animation: chegou .45s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 100% 100%; }
@keyframes chegou { from { transform: scale(.92); } to { transform: none; } }