/* ==========================================================================
   TG Data | Folha de estilos do site

   Como este arquivo está organizado:
    1. Variáveis (cores, fontes, espaçamentos) .... comece por aqui para trocar o visual
    2. Base (reset e elementos do HTML)
    3. Blocos reutilizáveis (container, botões, cards, etiquetas)
    4. Header e menu
    5. Hero
    6. Seções e seus títulos
    7. Serviços
    8. Como trabalho
    9. Portfólio
   10. Sobre
   11. Contato e formulário
   12. Rodapé
   13. Botão flutuante de WhatsApp
   14. Páginas extras (privacidade e 404)
   15. Animações ao rolar a página

   O estilo é "mobile first": as regras normais valem para o celular, e os blocos
   @media (min-width: ...) acrescentam o que muda em telas maiores. Fazemos assim
   porque a maior parte dos visitantes deve chegar pelo celular.
   ========================================================================== */


/* ==========================================================================
   1. VARIÁVEIS
   ========================================================================== */

:root {
  /* Paleta da marca: troque aqui e a mudança vale para o site inteiro. */
  --tinta: #0E1726;          /* azul-tinta, fundo escuro principal */
  --grafite: #172233;        /* grafite azulado, cards no escuro */
  --nevoa: #EEF1F5;          /* texto principal no escuro */
  --cinza-azulado: #A9B4C4;  /* texto secundário no escuro */
  --papel: #F7F5F0;          /* off-white quente, fundo claro principal */
  --papel-escuro: #EFECE4;   /* fundo das seções alternadas no claro */
  --branco: #FFFFFF;         /* cards no claro */
  --cinza-texto: #4A5568;    /* texto secundário no claro */
  --ambar: #F5A623;          /* cor de destaque e botões */
  --ambar-claro: #FFBC4D;    /* botão com o mouse em cima */
  --ambar-escuro: #9A5B00;   /* âmbar para textos sobre fundo claro (contraste) */
  --verde-whatsapp: #25D366; /* usado só no botão flutuante */

  /* Cores por função, no MODO CLARO. O resto do CSS usa estas variáveis, e não
     a paleta diretamente: é o que permite trocar de tema mudando poucos valores. */
  --cor-fundo: var(--papel);
  --cor-fundo-alt: var(--papel-escuro);
  --cor-card: var(--branco);
  --cor-borda: #DDD8CC;       /* linhas decorativas */
  --cor-borda-forte: #8C8676; /* contorno de campos e botões: precisa ser bem visível */
  --cor-texto: var(--tinta);
  --cor-texto-sec: var(--cinza-texto);
  --cor-destaque: var(--ambar-escuro);
  --cor-erro: #B42318;

  /* Fontes: se trocar, ajuste também o link do Google Fonts nos arquivos .html */
  --fonte-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  /* Tamanhos de texto. clamp(mínimo, ideal, máximo) cresce junto com a tela. */
  --texto-base: 1.0625rem;
  --titulo-1: clamp(2.6rem, 1.4rem + 5.4vw, 4.75rem);
  --titulo-2: clamp(1.9rem, 1.45rem + 2.2vw, 3rem);
  --titulo-3: 1.3rem;

  /* Escala de espaçamentos: usar sempre os mesmos valores dá ritmo à página. */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --esp-9: 7rem;

  /* Medidas gerais */
  --largura-max: 75rem;  /* largura máxima do conteúdo */
  --margem-lateral: 1rem;
  --altura-topo: 4.25rem;
  --raio: .375rem;       /* cantos pouco arredondados, com cara de relatório */
  --raio-grande: .625rem;
}

/* MODO ESCURO: entra sozinho quando o aparelho do visitante está no modo escuro. */
@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: var(--tinta);
    --cor-fundo-alt: #121C2D;
    --cor-card: var(--grafite);
    --cor-borda: #2A3850;
    --cor-borda-forte: #76839A;
    --cor-texto: var(--nevoa);
    --cor-texto-sec: var(--cinza-azulado);
    --cor-destaque: var(--ambar);
    --cor-erro: #FFA799;
  }
}

/* Blocos que ficam sempre escuros, mesmo no modo claro: hero, portfólio e rodapé.
   Repete os valores acima porque o CSS não permite aproveitar o bloco @media. */
.tema-escuro {
  --cor-fundo: var(--tinta);
  --cor-fundo-alt: #121C2D;
  --cor-card: var(--grafite);
  --cor-borda: #2A3850;
  --cor-borda-forte: #76839A;
  --cor-texto: var(--nevoa);
  --cor-texto-sec: var(--cinza-azulado);
  --cor-destaque: var(--ambar);
  --cor-erro: #FFA799;

  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

/* Faz a largura incluir borda e preenchimento, deixando as medidas previsíveis. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;           /* barras de rolagem e campos seguem o tema */
  -webkit-text-size-adjust: 100%;     /* impede o iPhone de aumentar o texto sozinho */
  /* Ao clicar no menu, o título não fica escondido atrás do header fixo. */
  scroll-padding-top: calc(var(--altura-topo) + var(--esp-4));
}

/* A rolagem suave só liga para quem não pediu ao sistema para reduzir movimento. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;  /* distribui melhor as palavras entre as linhas do título */
}

h1 {
  font-size: var(--titulo-1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.012em;
}

h2 {
  font-size: var(--titulo-2);
}

h3 {
  font-size: var(--titulo-3);
  line-height: 1.2;
}

p {
  margin: 0 0 var(--esp-4);
  text-wrap: pretty;  /* evita uma palavra sozinha na última linha */
}

a {
  color: inherit;
  text-underline-offset: .18em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Foco do teclado bem visível: essencial para quem navega sem mouse. */
:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Cor do texto selecionado com o mouse: um detalhe de marca. */
::selection {
  background-color: var(--ambar);
  color: var(--tinta);
}

/* Atalho "Pular para o conteúdo": escondido acima da tela até receber foco. */
.pular-conteudo {
  position: fixed;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--ambar);
  color: var(--tinta);
  font-weight: 600;
  transform: translateY(-300%);
}

.pular-conteudo:focus {
  transform: none;
}


/* ==========================================================================
   3. BLOCOS REUTILIZÁVEIS
   ========================================================================== */

/* Centraliza o conteúdo e garante a margem lateral em qualquer tela. */
.container {
  width: min(100% - 2 * var(--margem-lateral), var(--largura-max));
  margin-inline: auto;
}

/* Tamanho padrão dos ícones que acompanham texto. */
.icone {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

/* Trecho de texto em âmbar. */
.texto-destaque {
  color: var(--cor-destaque);
}

/* Botões. A altura mínima de 48px deixa o toque confortável no celular. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 3rem;
  padding: var(--esp-3) var(--esp-5);
  border: 1px solid transparent;
  border-radius: var(--raio);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Botão principal: sempre âmbar com texto escuro, nos dois modos. */
.botao-primario {
  background-color: var(--ambar);
  color: var(--tinta);
}

/* Botão secundário: só o contorno, para não competir com o principal. */
.botao-secundario {
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.botao-pequeno {
  min-height: 2.75rem;
  padding: var(--esp-2) var(--esp-3);
  font-size: .9375rem;
}

.botao-largo {
  width: 100%;
}

/* Efeitos de mouse ficam neste bloco para não "grudarem" no toque do celular. */
@media (hover: hover) {
  .botao-primario:hover {
    background-color: var(--ambar-claro);
    transform: translateY(-1px);
  }

  .botao-secundario:hover {
    border-color: var(--cor-destaque);
  }
}

/* Card genérico: serve para serviços, portfólio e formulário. */
.card {
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background-color: var(--cor-card);
}

/* Etiquetas com nomes de ferramentas. */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.etiquetas li {
  padding: .15rem .55rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto-sec);
  font-size: .8125rem;
  font-weight: 500;
}

.etiquetas-grandes li {
  padding: .35rem .75rem;
  color: var(--cor-texto);
  font-size: .9375rem;
}


/* ==========================================================================
   4. HEADER E MENU
   ========================================================================== */

/* Header fixo no topo. Fundo sólido para o texto continuar legível ao rolar. */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid var(--cor-borda);
  background-color: var(--cor-fundo);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  height: var(--altura-topo);
}

/* Logo em texto. O quadradinho âmbar vem do ::after, para ser fácil de remover. */
.logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.logo::after {
  content: "";
  width: .3em;
  height: .3em;
  margin-left: .12em;
  background-color: var(--ambar);
}

.logo-data {
  margin-left: .2em;
  font-weight: 500;
}

/* No header, a logo empurra os outros itens para a direita. */
.topo .logo {
  margin-right: auto;
}

/* No celular, o WhatsApp aparece antes do botão de menu. */
.topo-whatsapp {
  order: 1;
}

/* Botão do menu no celular (as três barrinhas). */
.menu-botao {
  order: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: none;
  color: var(--cor-texto);
  cursor: pointer;
}

/* Sem JavaScript o botão não funcionaria, então some e o menu fica sempre aberto. */
html:not(.js) .menu-botao {
  display: none;
}

/* As três barras: a do meio é o elemento, as outras são ::before e ::after. */
.menu-botao-barras,
.menu-botao-barras::before,
.menu-botao-barras::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: currentColor;
  transition: transform .2s ease, background-color .2s ease;
}

.menu-botao-barras {
  position: relative;
}

.menu-botao-barras::before,
.menu-botao-barras::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-botao-barras::before {
  top: -6px;
}

.menu-botao-barras::after {
  top: 6px;
}

/* Com o menu aberto, as barras viram um X. */
.menu-botao[aria-expanded="true"] .menu-botao-barras {
  background-color: transparent;
}

.menu-botao[aria-expanded="true"] .menu-botao-barras::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-botao-barras::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Painel do menu no celular: abre embaixo do header. */
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: var(--esp-2) var(--margem-lateral) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
  background-color: var(--cor-fundo);
}

/* Sem JavaScript, o menu vira um bloco normal na página. */
html:not(.js) .menu {
  position: static;
  order: 3;
}

html:not(.js) .topo {
  position: static;
}

html:not(.js) .topo-interno {
  flex-wrap: wrap;
  height: auto;
  padding-block: var(--esp-3);
}

/* Fechado, o menu usa visibility: hidden para os links não receberem foco do teclado. */
.js .menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.js .menu.aberto {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: block;
  padding: var(--esp-3) 0;
  color: var(--cor-texto);
  font-weight: 500;
  text-decoration: none;
}

/* A partir de 900px, o menu vira uma linha dentro do header. */
@media (min-width: 900px) {
  .topo-interno {
    gap: var(--esp-5);
  }

  .menu-botao {
    display: none;
  }

  .menu,
  .js .menu {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .menu ul {
    display: flex;
    gap: var(--esp-5);
  }

  .menu a {
    padding: var(--esp-2) 0;
    font-size: .9375rem;
    background-image: linear-gradient(var(--cor-destaque), var(--cor-destaque));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 2px;
    transition: background-size .2s ease;
  }

  .menu a:hover {
    background-size: 100% 2px;
  }
}


/* ==========================================================================
   5. HERO
   ========================================================================== */

/* isolation cria uma "camada" própria: a grade e a linha ficam atrás do texto,
   mas na frente do fundo azul. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--altura-topo) + var(--esp-7));
}

/* Linhas horizontais finas que lembram a grade de um gráfico. */
.hero-grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 79px,
    rgba(238, 241, 245, .055) 79px 80px
  );
}

.hero-sobretitulo {
  margin-bottom: var(--esp-4);
  color: var(--cor-destaque);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .03em;
}

/* Cada frase do título começa em uma linha própria, em qualquer tela. */
.hero h1 .texto-destaque {
  display: block;
}

.hero-subtitulo {
  max-width: 38rem;
  margin-block: var(--esp-5) var(--esp-6);
  color: var(--cor-texto-sec);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.hero-nota {
  margin: var(--esp-5) 0 0;
  color: var(--cor-texto-sec);
  font-size: .9375rem;
}

/* A linha âmbar. No celular fica abaixo do texto, para nunca passar por cima dele.
   overflow: visible deixa o início da linha ir até a borda esquerda da tela. */
.hero-linha {
  width: 100%;
  height: auto;
  margin-top: var(--esp-3);
  overflow: visible;
}

/* pathLength="1" no HTML permite animar a linha de 0 a 100%, como se fosse
   desenhada na hora. O efeito mexe só no traço, sem pesar para o navegador.
   O desenho encolhe junto com a tela, por isso o traço e o ponto são maiores no
   celular e diminuem nos @media abaixo: na tela, a espessura fica parecida. */
.hero-linha-tracado {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: desenhar-linha 2.2s ease-out .2s forwards;
}

.hero-linha-area,
.hero-linha-ponto {
  opacity: 0;
  animation: aparecer .6s ease 1.9s forwards;
}

.hero-linha-ponto {
  fill: var(--ambar);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(2.2);
}

@media (min-width: 600px) {
  .hero-linha-tracado {
    stroke-width: 5;
  }

  .hero-linha-ponto {
    transform: scale(1.5);
  }
}

/* Halo do ponto final: pulsa devagar, como um indicador ao vivo. */
.hero-linha-halo {
  fill: var(--ambar);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsar 3s ease-out 2.4s infinite;
}

@keyframes desenhar-linha {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aparecer {
  to {
    opacity: 1;
  }
}

@keyframes pulsar {
  0% {
    opacity: .5;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* A partir de 900px, a linha vira fundo do hero e sobe ao lado do texto. */
@media (min-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(100svh, 52rem);
    padding-block: calc(var(--altura-topo) + var(--esp-6)) var(--esp-9);
  }

  .hero-linha {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 100%;
    margin: 0;
  }

  .hero-linha-tracado {
    stroke-width: 3;
  }

  .hero-linha-ponto {
    transform: none;
  }
}


/* ==========================================================================
   6. SEÇÕES E SEUS TÍTULOS
   ========================================================================== */

.secao {
  padding-block: var(--esp-8);
}

.secao-alternada {
  background-color: var(--cor-fundo-alt);
}

/* Faixa do portfólio: um tom acima do fundo escuro, para se destacar nos dois modos.
   Os cards ficam mais escuros que a faixa, invertendo a relação normal. */
.secao-faixa {
  --cor-card: var(--tinta);
  background-color: var(--grafite);
}

.secao-topo {
  margin-bottom: var(--esp-6);
}

.secao-topo h2 {
  max-width: 20em;
}

/* Rótulo numerado, como o sumário de um relatório. A linha fina vem do ::after. */
.secao-rotulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  color: var(--cor-texto-sec);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.secao-rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--cor-borda);
}

.secao-numero {
  color: var(--cor-destaque);
  font-variant-numeric: tabular-nums;
}

.secao-intro {
  max-width: 40rem;
  margin: var(--esp-4) 0 0;
  color: var(--cor-texto-sec);
  font-size: 1.125rem;
}

@media (min-width: 900px) {
  .secao {
    padding-block: var(--esp-9);
  }

  .secao-topo {
    margin-bottom: var(--esp-7);
  }
}


/* ==========================================================================
   7. SERVIÇOS
   ========================================================================== */

.servicos-grade {
  display: grid;
  gap: var(--esp-4);
}

/* Flex em coluna: mantém as etiquetas alinhadas na base de todos os cards. */
.servico {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--cor-texto-sec);
}

/* Barra âmbar que cresce no topo do card quando o mouse passa. */
.servico::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-color: var(--ambar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

@media (hover: hover) {
  .servico:hover::before {
    transform: scaleX(1);
  }
}

.servico-icone {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--esp-4);
  color: var(--cor-destaque);
}

.servico h3 {
  margin-bottom: var(--esp-2);
  color: var(--cor-texto);
}

/* A frase de resultado é o que mais importa no card, por isso vem em destaque. */
.servico-resultado {
  color: var(--cor-texto);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

.servico .etiquetas {
  margin-top: auto;
  padding-top: var(--esp-2);
}

@media (min-width: 720px) {
  .servicos-grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .card.servico {
    padding: var(--esp-6);
  }
}


/* ==========================================================================
   8. COMO TRABALHO
   ========================================================================== */

/* No celular, os passos ficam em coluna, ligados por uma linha vertical. */
.passos {
  position: relative;
  display: grid;
  gap: var(--esp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A linha que liga os passos. O tamanho 100% é o estado final, e a animação na
   seção 15 parte de zero. */
.passos::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: calc(1.375rem - 1px);
  width: 2px;
  background-color: var(--ambar);
  transform-origin: top;
}

.passo {
  position: relative;
  padding-left: 4rem;
}

/* O último passo tem fundo próprio para cobrir a sobra da linha:
   ela termina na bolinha 4, sem continuar ao lado do texto. */
.passo:last-child {
  background-color: var(--cor-fundo-alt);
}

.passo h3 {
  margin-bottom: var(--esp-2);
}

.passo p {
  margin: 0;
  color: var(--cor-texto-sec);
}

/* Bolinha numerada: o fundo igual ao da seção "corta" a linha que passa atrás. */
.passo-numero {
  position: absolute;
  top: -.35rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ambar);
  border-radius: 50%;
  background-color: var(--cor-fundo-alt);
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

/* A partir de 900px, os passos ficam lado a lado e a linha vira horizontal. */
@media (min-width: 900px) {
  .passos {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-5);
  }

  /* right: faz a linha terminar exatamente na bolinha do passo 4. */
  .passos::before {
    top: calc(1.375rem - 1px);
    right: calc(25% - 2.5rem);
    bottom: auto;
    left: 1.375rem;
    width: auto;
    height: 2px;
    transform-origin: left;
  }

  .passo {
    padding-top: 4rem;
    padding-left: 0;
  }

  .passo-numero {
    top: 0;
  }
}


/* ==========================================================================
   9. PORTFÓLIO
   ========================================================================== */

/* auto-fit organiza sozinho 2 ou 3 cards, sem precisar mexer no CSS
   quando o terceiro card for adicionado. */
.portfolio-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--esp-4);
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  color: var(--cor-texto-sec);
}

.portfolio-tipo {
  margin-bottom: var(--esp-2);
  color: var(--cor-destaque);
  font-size: .875rem;
  font-weight: 600;
}

.portfolio-card h3 {
  margin-bottom: var(--esp-3);
  color: var(--cor-texto);
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
}

/* margin-top: auto prende o link na base do card, mesmo com textos de tamanhos diferentes. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  width: fit-content;
  min-height: 2.75rem;
  margin-top: auto;
  color: var(--cor-destaque);
  font-weight: 600;
  overflow-wrap: anywhere;  /* evita que o @ longo estoure a largura no celular */
}

@media (min-width: 900px) {
  .card.portfolio-card {
    padding: var(--esp-6);
  }
}


/* ==========================================================================
   10. SOBRE
   ========================================================================== */

.sobre-grade {
  display: grid;
  gap: var(--esp-5);
}

/* Aqui quem controla o espaço é a grade, não a margem padrão do título. */
.sobre-topo {
  margin-bottom: 0;
}

/* No celular: foto pequena à esquerda, nome e cargo à direita. */
.sobre-identidade {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  column-gap: var(--esp-4);
}

/* Bloco que ocupa o lugar da foto até ela ser enviada. A borda separa
   o bloco do fundo da página no modo escuro. */
.sobre-monograma {
  grid-row: span 2;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 23px,
    rgba(238, 241, 245, .055) 23px 24px
  );
  color: var(--ambar);
  font-family: var(--fonte-titulo);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* Estilo pronto para quando a foto substituir o monograma. */
.sobre-foto {
  grid-row: span 2;
  width: 100%;
  height: auto;
  border-radius: var(--raio-grande);
}

/* align-self junta nome e cargo no meio da altura da foto. */
.sobre-nome {
  align-self: end;
  margin-bottom: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
}

.sobre-cargo {
  align-self: start;
  margin-bottom: 0;
  color: var(--cor-texto-sec);
}

/* Os textos do Sobre precisam de uma linha confortável de ler. */
.sobre-texto > p {
  max-width: 40rem;
  color: var(--cor-texto-sec);
}

.ferramentas-titulo {
  margin-block: var(--esp-6) var(--esp-3);
  font-size: 1.125rem;
}

/* A partir de 900px: foto e nome à esquerda, título e texto à direita. */
@media (min-width: 900px) {
  .sobre-grade {
    grid-template-columns: 16rem 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--esp-8);
  }

  .sobre-topo {
    grid-column: 2;
    grid-row: 1;
  }

  .sobre-identidade {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .sobre-texto {
    grid-column: 2;
    grid-row: 2;
  }

  .sobre-monograma {
    margin-bottom: var(--esp-4);
    font-size: 4.5rem;
  }

  .sobre-foto {
    margin-bottom: var(--esp-4);
  }
}


/* ==========================================================================
   11. CONTATO E FORMULÁRIO
   ========================================================================== */

.contato-grade {
  display: grid;
  gap: var(--esp-6);
}

.contato-lista {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contato-lista li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.contato-lista .icone {
  color: var(--cor-destaque);
}

/* Links com área de toque mais alta, sem alterar o visual. */
.contato-lista a {
  padding-block: var(--esp-2);
  font-weight: 600;
}

.campo {
  margin-bottom: var(--esp-4);
}

.campo label {
  display: block;
  margin-bottom: var(--esp-1);
  font-weight: 600;
}

.campo-opcional {
  color: var(--cor-texto-sec);
  font-weight: 400;
}

/* Fonte de 16px ou mais: abaixo disso, o iPhone dá zoom ao tocar no campo. */
.campo input,
.campo textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font: inherit;
}

.campo textarea {
  resize: vertical;
}

/* Quando o main.js marca o campo com erro, a borda muda de cor. */
.campo [aria-invalid="true"] {
  border-color: var(--cor-erro);
  box-shadow: 0 0 0 1px var(--cor-erro);
}

.campo-erro {
  margin: var(--esp-1) 0 0;
  color: var(--cor-erro);
  font-size: .9375rem;
  font-weight: 500;
}

/* O status só ocupa espaço quando tem mensagem. */
.formulario-status:empty {
  display: none;
}

.formulario-status {
  margin: var(--esp-3) 0 0;
  font-weight: 500;
}

.formulario-nota {
  margin: var(--esp-3) 0 0;
  color: var(--cor-texto-sec);
  font-size: .875rem;
}

@media (min-width: 900px) {
  .contato-grade {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-8);
    align-items: start;
  }

  .card.formulario {
    padding: var(--esp-6);
  }
}


/* ==========================================================================
   12. RODAPÉ
   ========================================================================== */

.rodape {
  padding-top: var(--esp-7);
  color: var(--cor-texto-sec);
  font-size: .9375rem;
}

.rodape-grade {
  display: grid;
  gap: var(--esp-6);
}

.rodape-frase {
  margin: var(--esp-2) 0 0;
}

.rodape-titulo {
  margin-bottom: var(--esp-2);
  color: var(--cor-texto);
  font-weight: 600;
}

.rodape ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape li {
  padding-block: var(--esp-1);
}

/* A linha final tem respiro à direita para o botão flutuante não cobrir o texto. */
.rodape-base {
  margin-top: var(--esp-6);
  padding-block: var(--esp-4);
  padding-right: 4.5rem;
  border-top: 1px solid var(--cor-borda);
}

.rodape-base p {
  margin: 0;
}

@media (min-width: 720px) {
  .rodape-grade {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}


/* ==========================================================================
   13. BOTÃO FLUTUANTE DE WHATSAPP
   ========================================================================== */

/* max() com safe-area respeita a área de gestos e o entalhe dos iPhones.
   O ícone é escuro porque o branco sobre este verde ficaria com pouco contraste. */
.whatsapp-flutuante {
  position: fixed;
  right: max(var(--esp-4), env(safe-area-inset-right));
  bottom: max(var(--esp-4), env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--verde-whatsapp);
  box-shadow: 0 6px 18px rgba(14, 23, 38, .35);
  color: var(--tinta);
  transition: transform .2s ease;
}

.whatsapp-flutuante svg {
  width: 1.75rem;
  height: 1.75rem;
}

@media (hover: hover) {
  .whatsapp-flutuante:hover {
    transform: scale(1.07);
  }
}


/* ==========================================================================
   14. PÁGINAS EXTRAS
   ========================================================================== */

/* Link "Voltar ao site" no header da política de privacidade. */
.topo-voltar {
  font-size: .9375rem;
  font-weight: 600;
}

/* Política de privacidade: coluna estreita, própria para leitura longa. */
.pagina-legal {
  width: min(100% - 2 * var(--margem-lateral), 46rem);
  margin-inline: auto;
  padding-block: calc(var(--altura-topo) + var(--esp-7)) var(--esp-8);
}

.pagina-legal h1 {
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3rem);
}

.pagina-legal h2 {
  margin-block: var(--esp-7) var(--esp-3);
  font-size: 1.5rem;
}

.pagina-legal-data {
  margin-block: var(--esp-3) var(--esp-6);
  color: var(--cor-texto-sec);
}

.pagina-legal ul {
  margin: 0 0 var(--esp-4);
  padding-left: 1.25rem;
}

.pagina-legal li {
  margin-bottom: var(--esp-2);
}

/* Página 404: mesma linguagem do hero, com a linha do gráfico despencando. */
.pagina-erro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  padding-block: var(--esp-7);
}

.pagina-erro-numero {
  margin-bottom: var(--esp-2);
  color: var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.pagina-erro p {
  max-width: 34rem;
}

.pagina-erro-texto {
  margin-block: var(--esp-4) var(--esp-6);
  color: var(--cor-texto-sec);
}

.pagina-erro-linha {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(100%, 44rem);
  height: auto;
  opacity: .9;
}


/* ==========================================================================
   15. ANIMAÇÕES AO ROLAR A PÁGINA
   ========================================================================== */

/* Tudo aqui depende da classe .js: se o JavaScript falhar, nada fica escondido.
   O main.js adiciona .visivel quando o elemento entra na tela. */
.js .revelar {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .6s ease, transform .6s ease;
  /* --atraso cria o efeito "um depois do outro" entre cards vizinhos. */
  transition-delay: calc(var(--atraso, 0) * 90ms);
}

.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

/* A linha que liga os passos se desenha quando a lista aparece. */
.js .passos::before {
  transform: scaleY(0);
  transition: transform 1.1s ease .15s;
}

.js .passos.visivel::before {
  transform: scaleY(1);
}

@media (min-width: 900px) {
  .js .passos::before {
    transform: scaleX(0);
  }

  .js .passos.visivel::before {
    transform: scaleX(1);
  }
}

/* Quem pediu ao sistema para reduzir movimento vê tudo pronto, sem animação.
   Essa preferência é importante para pessoas com labirintite ou enxaqueca. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .js .revelar {
    opacity: 1;
    transform: none;
  }

  .js .passos::before {
    transform: none;
  }

  .hero-linha-halo {
    display: none;
  }
}