/* ═══════════════════════════════════════════════════════════════════════════
   Jhonatas Geraldelli — página pessoal

   DIREÇÃO: escuro, silencioso e direto. Uma página só, que se lê em meio
   minuto. Três decisões sustentam o resto:

   1. SEM CAIXAS. Nada de cartão com borda em volta de cada serviço. A
      hierarquia se faz com escala, espaço em branco e um fio de 1px. Caixa
      empilhada em caixa é o que fazia a versão anterior parecer catálogo.
   2. SEM COR. Preto e um branco morno, e nada mais. Sem cor de destaque não há
      para onde fugir: ou a tipografia e o espaço sustentam a página, ou não há
      página. É a aposta mais difícil e a que não envelhece.
   3. DUAS FONTES EM TENSÃO. A serifada de traço fino (Cormorant) carrega o nome
      e os títulos; a geométrica estreita (Jost), em caixa alta bem espaçada,
      faz os rótulos. O contraste entre as duas É o desenho.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Preto de verdade, e um branco MORNO por cima. Branco puro sobre preto
     puro vibra e cansa a vista; o tom de papel assenta. */
  --fundo:#070707;
  --tinta:#F4F1EC;          /* o branco morno */
  --texto:#F4F1EC;
  --texto-fraco:#8C8781;
  --texto-tenue:#5E5A55;
  --fio:rgba(244,241,236,.11);

  /* Duas fontes, e o contraste entre elas é o desenho da página: a serifada
     de traço fino no nome e nos títulos, a geométrica estreita nos rótulos. */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ui:"Jost","Futura",system-ui,-apple-system,"Segoe UI",sans-serif;

  --margem:clamp(22px,6vw,40px);
  --limite:760px;            /* medida de leitura: linha longa cansa */
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:var(--ui); font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* rede de segurança: nenhuma largura fixa deveria vazar, mas se vazar,
     o celular não ganha uma barra de rolagem lateral por causa disso */
  overflow-x:hidden;
}

/* Brilho de canto. É o único "efeito" da página inteira: dois clarões muito
   difusos que tiram o chapado do fundo sem virar decoração. */
/* Um clarão só, cinza, quase imperceptível: tira o chapado do preto sem
   introduzir cor nenhuma na página. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120vw 90vh at 78% -18%, rgba(244,241,236,.055), transparent 62%);
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; }
/* nome comprido em tela estreita quebra em vez de empurrar a página */
h1,h2,p,li{ overflow-wrap:anywhere; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--tinta); color:#070707; padding:10px 16px;
}
.pular:focus{ left:0; }

:focus-visible{ outline:1px solid var(--tinta); outline-offset:4px; }

/* ── Topo ────────────────────────────────────────────────────────────────
   Sem menu. Uma página desta altura não precisa de navegação: o dedo chega
   ao fim antes de o menu ser útil, e um menu a menos é uma peça a menos
   disputando a atenção. */
.topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:calc(18px + env(safe-area-inset-top)) var(--margem) 0;
}
.marca{ text-decoration:none; }
/* O monograma é a arte da marca, recortada do arquivo original e vazada:
   o alfa saiu do próprio brilho, então ele pousa em qualquer tom de fundo
   sem carregar um retângulo preto junto. */
.monograma{ display:block; width:auto; height:30px; }
.monograma.pequeno{ height:24px; opacity:.42; }
.marca-grande{
  display:block; width:auto; height:clamp(74px,17vw,116px);
  margin:0 auto clamp(22px,4vh,34px);
}

/* Ícone do WhatsApp com o nome embaixo. O rótulo existe porque um ícone
   sozinho, em cinza, some no canto de uma página tão silenciosa — e este é o
   único caminho de contato do topo.
   O verde só aparece na intenção de uso: é a única cor da página. */
.zap-topo{
  display:inline-flex; flex-direction:column; align-items:center; gap:5px;
  min-width:56px; padding:6px 4px; margin-right:-4px;
  color:var(--texto-fraco); text-decoration:none;
  transition:color .3s ease, transform .3s ease;
}
.zap-topo svg{ width:29px; height:29px; fill:currentColor; }
.zap-topo span{
  font-size:9px; font-weight:300; letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase; line-height:1;
}
.zap-topo:hover, .zap-topo:focus-visible, .zap-topo:active{
  color:#25D366; transform:translateY(-1px);
}
@media (prefers-reduced-motion:reduce){ .zap-topo:hover{ transform:none; } }

/* ── Abertura ────────────────────────────────────────────────────────────
   A altura é 'auto' de propósito, não 100dvh: em celular baixinho uma tela
   inteira de abertura empurra tudo o que importa para fora da vista. */
.abertura{
  max-width:var(--limite); margin:0 auto; text-align:center;
  padding:clamp(40px,9vh,86px) var(--margem) clamp(48px,10vh,96px);
}
/* O fio da marca, entre o nome e a função — o mesmo gesto do arquivo original. */
.fio{
  width:clamp(74px,20vw,110px); height:1px; margin:clamp(16px,2.8vh,24px) auto;
  background:rgba(244,241,236,.28);
}

.sobretitulo{
  margin:0;
  font-size:clamp(9.5px,2.5vw,11px); font-weight:300;
  letter-spacing:.46em; text-indent:.46em; text-transform:uppercase;
  color:var(--texto-fraco);
}

h1{ margin:0; font-weight:200; line-height:1.02; }
/* O nome dimensionado pelo CONTÊINER, não pela janela: em tela larga o texto
   fica numa coluna limitada, e medir por vw fazia o nome estourar a coluna. */
.abertura{ container-type:inline-size; }
.nome, .sobrenome{ display:block; }
/* O nome é o desenho da página inteira: serifada de traço fino, corpo grande,
   quase sem entreletras. O sobrenome vem embaixo em caixa alta e bem espaçado
   — é o contraste entre os dois que faz o conjunto parecer composto. */
/* O nome em versais bem espaçadas, como na marca. O text-indent compensa o
   espaço que o letter-spacing acrescenta DEPOIS da última letra — sem ele o
   bloco fica visivelmente deslocado para a esquerda. */
.nome{
  display:block; font-family:var(--ui); font-weight:200;
  font-size:clamp(19px,6.4cqi,33px); line-height:1.25;
  letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:var(--texto);
}

.frase{
  max-width:46ch; margin:clamp(24px,4.6vh,38px) auto 0;
  font-size:clamp(15px,3.9vw,17.5px); color:var(--texto-fraco);
}
.chamada .frase{ margin-left:0; }

/* ── Botão ───────────────────────────────────────────────────────────────
   Um fio embaixo, não uma pílula preenchida: combina com o resto da página,
   que não tem caixa nenhuma. O azul entra no fio e na seta. */
.botao{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:clamp(28px,5vh,44px); padding:14px 2px;
  min-height:48px;                       /* alvo de toque confortável */
  font-size:clamp(12px,3.2vw,13.5px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto); text-decoration:none;
  border-bottom:1px solid rgba(244,241,236,.3);
  transition:border-color .3s ease, gap .3s ease;
}
.botao svg{
  width:17px; height:17px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.botao:hover{ border-color:var(--tinta); gap:20px; }

/* ── Blocos ──────────────────────────────────────────────────────────────── */
.bloco{
  max-width:var(--limite); margin:0 auto;
  padding:clamp(44px,9vh,80px) var(--margem);
  border-top:1px solid var(--fio);
}

.rotulo{
  margin:0 0 clamp(26px,5vh,40px);
  font-size:clamp(9.5px,2.5vw,10.5px); font-weight:400;
  letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  color:var(--texto-fraco);
}

/* ── O que eu faço ───────────────────────────────────────────────────────
   Lista, não grade de cartões. Cinco linhas que se leem de cima a baixo em
   segundos; a versão anterior tinha oito cartões com ícone e moldura, e
   nenhum deles chegava a ser lido. */
.lista{ list-style:none; margin:0; padding:0; }
.lista li{ padding:clamp(18px,3.4vh,26px) 0; border-bottom:1px solid var(--fio); }
.lista li:last-child{ border-bottom:0; padding-bottom:0; }
.lista h2{
  margin:0 0 7px; font-family:var(--serif); font-weight:300;
  font-size:clamp(21px,5.4vw,28px); letter-spacing:.005em; color:var(--texto);
}
.lista p{
  margin:0; max-width:52ch;
  font-size:clamp(13.5px,3.5vw,15px); color:var(--texto-fraco);
}

/* ── Como eu trabalho ────────────────────────────────────────────────────── */
.jeito{ display:grid; gap:clamp(16px,3vh,24px); }
.jeito p{
  margin:0; max-width:56ch;
  font-size:clamp(14px,3.6vw,15.5px); color:var(--texto-fraco);
}
.jeito b{ color:var(--texto); font-weight:400; }

.sobre{
  max-width:52ch; margin:clamp(30px,5.4vh,46px) 0 0;
  padding-left:clamp(16px,3.8vw,24px);
  border-left:1px solid var(--fio);
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(17px,4.4vw,20px); line-height:1.55; color:var(--texto-fraco);
}

/* ── Contato ─────────────────────────────────────────────────────────────── */
.chamada h2{
  margin:0; font-family:var(--serif); font-weight:300; max-width:18ch;
  font-size:clamp(30px,8.4vw,50px); line-height:1.12; color:var(--texto);
}
.chamada .frase{ margin-top:clamp(14px,2.6vh,20px); }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.rodape{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:clamp(36px,7vh,64px) var(--margem) calc(clamp(28px,5vh,44px) + env(safe-area-inset-bottom));
  border-top:1px solid var(--fio); text-align:center;
}
.rodape p{
  margin:0; font-size:10.5px; font-weight:300; letter-spacing:.28em;
  text-transform:uppercase; color:var(--texto-tenue);
}

/* ── Entrada ao rolar ────────────────────────────────────────────────────
   Deslocamento curto e opacidade. Quem pediu menos movimento no sistema não
   recebe animação nenhuma — e, sem JavaScript, tudo já nasce visível. */
.revelar{ opacity:0; transform:translateY(14px); }
.revelar.visivel{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .revelar, .revelar.visivel{ opacity:1; transform:none; transition:none; }
}