/* =========================================================
   sections.css — estilos por seção
   Ordem: nav → hero (terminal, título, CTAs, build.log, faixa)
   ========================================================= */


/* =========================================================
   NAV
   ========================================================= */
/* Fixa no topo. Transparente sobre o hero; ao rolar ganha fundo
   Carvão quase sólido e uma linha embaixo (classe .is-scrolled, main.js).
   Sem blur/vidro: fica sóbrio, como o resto do site. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease;
}
.nav.is-scrolled {
  background-color: var(--carvao);
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nav-h);
}

/* Wordmark: SVG oficial do kit (letras em vetor, não depende da fonte).
   "eb" Papel · ".webstudio" Pedra · bloco Fósforo piscando (1s, steps). */
.wordmark {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);   /* área de clique mais confortável */
  flex-shrink: 0;
}
.wordmark__svg {
  height: 1.05rem;                 /* ≈ corpo de 16px no logo */
  width: auto;
  overflow: visible;
}
/* Pisca só se o usuário não pediu movimento reduzido (senão fica aceso) */
@media (prefers-reduced-motion: no-preference) {
  .wordmark__cursor {
    animation: blink 1s steps(1, end) infinite;
  }
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Links no formato [ trabalhos ] */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.nav__link {
  display: inline-block;
  padding-block: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: pre;            /* preserva os espaços dentro dos colchetes */
  transition: color var(--dur-fast) ease;
}
.nav__link .bracket { transition: color var(--dur-fast) ease; }
.nav__link:hover,
.nav__link:focus-visible { color: var(--text); }
.nav__link:hover .bracket,
.nav__link:focus-visible .bracket { color: var(--accent); }

/* Botão [ menu ] — só aparece no celular */
.nav__toggle {
  display: none;
  min-height: 44px;
  padding-inline: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: pre;
}
.nav__toggle:hover,
.nav__toggle:focus-visible { color: var(--text); }
.nav__toggle[aria-expanded="true"] { color: var(--accent); }

/* CTA dentro do menu: escondido por padrão */
.nav__links-cta { display: none; }

/* Celular: links viram um painel abaixo da barra */
@media (max-width: 767px) {
  .nav__toggle { display: inline-flex; align-items: center; }

  .nav__right { gap: var(--space-3); }

  .nav__links {
    position: absolute;
    top: calc(var(--nav-h) - var(--space-2));
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2);
    background: var(--surface-terminal);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* fechado */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .nav__link {
    display: block;
    padding: var(--space-3) var(--space-3);
    font-size: 0.875rem;
  }

  .nav__cta { font-size: var(--fs-xs); padding-inline: 0.85rem; }
}

/* Telas bem estreitas: o CTA sai da barra e vai para dentro do menu */
@media (max-width: 479px) {
  .nav__cta { display: none; }
  .nav__links-cta {
    display: block;
    padding: var(--space-2) var(--space-3) var(--space-3);
    margin-top: var(--space-1);
    border-top: 1px solid var(--border);
  }
  .nav__links-cta .btn { width: 100%; margin-top: var(--space-2); }
}


/* =========================================================
   HERO
   ========================================================= */
/* A nav é fixa: o padding-top reserva o espaço dela,
   então o hero fica igual ao aprovado na etapa 1. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--nav-h);
}

/* Alvos de âncora (main, seções) recebem foco via JS para o teclado
   continuar dali — sem desenhar um contorno em volta da seção inteira */
[tabindex="-1"]:focus { outline: none; }

.hero__main {
  flex: 1;
  display: flex;
  align-items: flex-end;           /* conteúdo "assentado" na parte de baixo, como na referência */
  padding-top: clamp(var(--space-8), 14vh, var(--space-10));
  padding-bottom: clamp(var(--space-7), 6vh, var(--space-8));
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  width: 100%;
}

/* Desktop: texto à esquerda, build.log à direita alinhado embaixo */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: end;
    gap: var(--space-8);
  }
}

/* ---------- Linha de terminal ---------- */
.term {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.6em;
  align-items: baseline;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.term__path   { color: var(--accent); }
.term__input  { white-space: nowrap; }        /* comando e cursor nunca se separam */
.term__cmd    { color: var(--text); white-space: pre; }
.term .cursor { margin-left: -0.45em; font-weight: var(--fw-regular); }
.term.is-typing .cursor { animation: none; }   /* aceso enquanto digita */

/* ---------- Título ---------- */
.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-title);
  line-height: 1;
  color: var(--text);
}
.hero__title-line { display: block; }

.hero__title .serif-accent {
  /* A serifa tem olho menor: compensa levemente o tamanho */
  font-size: 1.08em;
  line-height: 1.05;
  padding-right: 0.08em;           /* respiro para o itálico não cortar */
}

/* Scramble: uma cópia invisível reserva o espaço do texto final,
   e a camada "viva" fica por cima — assim nada pula durante o efeito. */
.scramble {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scramble__ghost { visibility: hidden; }
.scramble__live {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}
.scramble__noise { color: var(--text-muted); opacity: 0.7; }

/* ---------- Parágrafo e CTAs ---------- */
.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-body);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Painel build.log ---------- */
.log {
  width: 100%;
  max-width: 480px;
  background: var(--surface-terminal);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow: hidden;
}

.log__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.log__head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.log__body {
  display: grid;
  gap: 0.7rem;
  padding: var(--space-4) var(--space-4) var(--space-5);
  list-style: none;
  margin: 0;
}

.log__line {
  display: flex;
  gap: 0.75em;
  color: var(--text-body);
}
.log__ok { color: var(--accent); }

.log__line--done {
  margin-top: var(--space-1);
  color: var(--text);
  font-weight: var(--fw-medium);
}
.log__line--done .log__arrow { color: var(--accent); }

/* ---------- Faixa inferior ---------- */
.strip {
  border-top: 1px solid var(--border);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.strip__sep  { color: var(--border); }
.strip__city { color: var(--text); font-weight: var(--fw-medium); }

@media (min-width: 768px) {
  .strip__list { gap: var(--space-2) var(--space-6); padding-block: var(--space-5); }
}

/* Telas altas: o hero não deve ficar "esticado" demais */
@media (min-height: 1000px) and (min-width: 1024px) {
  .hero { min-height: min(100svh, 1000px); }
}


/* =========================================================
   ESTADOS INICIAIS DA ANIMAÇÃO
   A classe .js-anim é colocada no <html> só quando há JS
   e o usuário NÃO pediu movimento reduzido. Sem ela,
   tudo aparece direto no estado final.
   ========================================================= */
.js-anim [data-typing]:not(.is-ready),
.js-anim [data-scramble]:not(.is-ready) {
  visibility: hidden;
}

.js-anim .log__line {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js-anim .log__line.is-in {
  opacity: 1;
  transform: none;
}

/* Entrada suave do parágrafo e CTAs (só opacidade/transform) */
.js-anim .hero__lead,
.js-anim .hero__ctas,
.js-anim .log {
  animation: rise var(--dur-slow) var(--ease-out) both;
}
.js-anim .hero__lead { animation-delay: 150ms; }
.js-anim .hero__ctas { animation-delay: 250ms; }
.js-anim .log        { animation-delay: 350ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* =========================================================
   SEÇÕES — padrão comum
   Rótulo "02 / serviços" em mono + título Geist com
   uma palavra em Instrument Serif itálico.
   ========================================================= */
.section {
  position: relative;
  padding-block: clamp(var(--space-9), 11vw, var(--space-10) + var(--space-6));
  border-top: 1px solid var(--border);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-mono);
  line-height: 1.5;
  color: var(--text-muted);
}
.section-label__num { color: var(--text); }

.section-title {
  margin-top: var(--space-5);
  font-size: var(--fs-h2);
  color: var(--text);
}
.section-title .serif-accent {
  font-size: 1.1em;          /* a serifa tem olho menor: compensa */
  line-height: 1;
  padding-right: 0.06em;     /* respiro para o itálico não cortar */
}



/* =========================================================
   02 — SERVIÇOS
   ========================================================= */
.services__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-7), 6vw, var(--space-9));
}
.services__head .section-title { max-width: 16ch; }

.services__intro {
  max-width: 30rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-body);
}

@media (min-width: 1024px) {
  .services__head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-8);
  }
}

/* ---------- Lista numerada ---------- */
.services__list {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid var(--border);
}

/* Cada linha: número | nome + frase | o que inclui */
.service {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  padding-block: var(--space-6);
}

/* Linha divisória superior (desenhada pelo GSAP na entrada) */
.service__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  transform-origin: left center;
}

/* Destaque do hover: uma linha na cor de destaque que corre por cima
   da divisória + um tom bem leve no fundo. Só transform/opacity. */
.service::before,
.service::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.service::before {           /* tom de fundo */
  inset: 0;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
.service::after {            /* linha de destaque */
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.service__num {
  padding-top: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) ease;
}

.service__main { min-width: 0; }

.service__name {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: transform var(--dur-base) var(--ease-out);
}

.service__desc {
  max-width: 30rem;
  margin-top: var(--space-3);
  color: var(--text-body);
  line-height: 1.55;
}

/* "O que inclui": itens em mono com marcador + */
.service__list {
  grid-column: 2;
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.service__list li {
  display: flex;
  gap: 0.75em;
}
.service__list li::before {
  content: "+";
  color: var(--text-muted);
  transition: color var(--dur-fast) ease;
}

/* Tablet em diante: número com mais respiro e linhas mais altas */
@media (min-width: 768px) {
  .service {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding-block: var(--space-7);
  }
}

/* Desktop: três colunas lado a lado */
@media (min-width: 1024px) {
  .service {
    grid-template-columns: 6rem minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .service__list {
    grid-column: 3;
    padding-top: 0.6em;   /* alinha com a linha do nome */
  }
}

/* Hover só em aparelhos com mouse (no toque ficaria "preso") */
@media (hover: hover) {
  .service:hover::before { opacity: 1; }
  .service:hover::after  { transform: scaleX(1); }
  .service:hover .service__num { color: var(--accent); }
  .service:hover .service__name { transform: translateX(6px); }
  .service:hover .service__list li::before { color: var(--accent); }
}

/* ---------- Chamada no fim da seção ---------- */
.services__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}
.services__cta p {
  max-width: 34rem;
  color: var(--text-body);
}


/* =========================================================
   03 — TRABALHOS
   Cada projeto: "janela" com a captura do site + ficha em mono.
   ========================================================= */
.works__head { margin-bottom: clamp(var(--space-7), 6vw, var(--space-9)); }
.works__head .section-title { max-width: 18ch; }

.works__list {
  display: grid;
  gap: clamp(var(--space-8), 9vw, var(--space-10));
}

.work {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

/* Desktop: imagem larga + ficha ao lado; o 2º projeto inverte o lado */
@media (min-width: 1024px) {
  .work {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
  }
  .work--reverse { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .work--reverse .work__frame { order: 2; }
}

/* ---------- Janela com a captura ---------- */
.work__frame {
  display: block;
  background: var(--surface-terminal);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) ease;
}

/* Barra superior em mono, como a do build.log */
.work__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.work__url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work__open {
  flex-shrink: 0;
  transition: color var(--dur-fast) ease;
}

.work__shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.work__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .work__frame:hover { border-color: var(--text-muted); }
  .work__frame:hover .work__open { color: var(--accent); }
  .work__frame:hover .work__shot img { transform: scale(1.025); }
}

/* ---------- Ficha do projeto ---------- */
.work__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.work__num { color: var(--text); }

.work__title {
  margin-top: var(--space-3);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  color: var(--text);
}

.work__desc {
  max-width: 32rem;
  margin-top: var(--space-4);
  color: var(--text-body);
}

/* Tags no formato de flags de terminal */
.work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}
.work__tags li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-body);
}

/* Link "ver site no ar ↗" com sublinhado que acende */
.work__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.work__link .arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.work__link:hover,
.work__link:focus-visible { border-bottom-color: var(--accent); }
.work__link:hover .arrow,
.work__link:focus-visible .arrow { transform: translate(2px, -2px); }

/* ---------- Próximos projetos (estilo log) ---------- */
.works__next {
  margin-top: clamp(var(--space-8), 8vw, var(--space-9));
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.works__next-head { color: var(--text-muted); }
.works__next-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
  color: var(--text-body);
}
.works__next-list li { display: flex; gap: 0.75em; }
.works__status { flex-shrink: 0; color: var(--text-muted); }
.works__status--ok { color: var(--accent); }


/* =========================================================
   04 — PROCESSO
   Trilha vertical + etapas com marcador [..] → [ok].
   ========================================================= */
.process__grid {
  display: grid;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
}

.process__intro {
  max-width: 28rem;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--text-body);
}
.process__cta { margin-top: var(--space-6); }

/* Desktop: título fixo à esquerda enquanto as etapas rolam */
@media (min-width: 1024px) {
  .process__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .process__head {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-7));
  }
}

/* ---------- Trilha ---------- */
.process__track {
  --mark-w: 3rem;          /* largura da coluna dos marcadores */
  position: relative;
}

/* Linha cinza do primeiro ao último marcador
   (--rail-h é medido no main.js; sem JS vai até o fim) */
.process__rail {
  position: absolute;
  top: 0.75rem;
  left: calc(var(--mark-w) / 2);
  width: 1px;
  height: var(--rail-h, calc(100% - 0.75rem));
  background: var(--border);
}
/* Parte em destaque: cresce com a rolagem (scaleY, via GSAP) */
.process__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top center;
}

.process__steps {
  list-style: none;
  padding: 0;
}

/* ---------- Etapa ---------- */
.step {
  display: grid;
  grid-template-columns: var(--mark-w) minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}
.step:last-child { padding-bottom: 0; }

/* Marcador: fundo da página por trás para "cortar" a linha */
.step__mark {
  position: relative;
  z-index: 1;
  align-self: start;
  padding-block: 0.25rem;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
}
.step__ok   { color: var(--accent); }
.step__todo { display: none; color: var(--text-muted); }

.step__title,
.step__desc,
.step__out,
.step__num { transition: color var(--dur-slow) var(--ease-out); }

/* Com a animação ativa (.is-live, scroll.js): etapas ainda não
   alcançadas ficam [..] e "apagadas". O apagado é feito com cores
   da paleta (Névoa/Pedra), não com opacidade — assim o texto
   continua com contraste mínimo de 4.5:1. */
.process__track.is-live .step:not(.is-done) .step__ok    { display: none; }
.process__track.is-live .step:not(.is-done) .step__todo  { display: inline; }
.process__track.is-live .step:not(.is-done) .step__title { color: var(--text-muted); }
.process__track.is-live .step:not(.is-done) .step__desc,
.process__track.is-live .step:not(.is-done) .step__num   { color: var(--text-muted); }
.process__track.is-live .step:not(.is-done) .step__out > span:first-child { color: var(--text-muted); }

.step__cmd {
  padding-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.step__num { color: var(--text); margin-right: 0.5em; }

.step__title {
  margin-top: var(--space-3);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  color: var(--text);
}

.step__desc {
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--text-body);
}

.step__out {
  display: flex;
  gap: 0.6em;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.step__out > span:first-child { color: var(--accent); }
.step__out--done { color: var(--text); font-weight: var(--fw-medium); }


/* =========================================================
   05 — SOBRE
   Texto + princípios à esquerda, painel "whoami" à direita.
   ========================================================= */
.about__grid {
  display: grid;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
}

.about__body {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--text-body);
}

/* Princípios: lista numerada curta, com divisórias */
.about__values {
  max-width: 36rem;
  margin-top: var(--space-7);
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--border);
}
.about__values li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
}
.about__values strong {
  font-weight: var(--fw-medium);
  color: var(--text);
}
.about__value-num {
  padding-top: 0.15em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Painel whoami (mesmo visual do build.log) ---------- */
.whoami {
  width: 100%;
  max-width: 520px;
  background: var(--surface-terminal);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .whoami { justify-self: end; }
}

.whoami__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.whoami__body { padding: var(--space-5) var(--space-4) var(--space-6); }
@media (min-width: 768px) {
  .whoami__body { padding-inline: var(--space-5); }
}

.whoami__prompt { margin-bottom: var(--space-5); }

.whoami__list {
  display: grid;
  gap: 0.75rem;
}
.whoami__line {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  line-height: 1.5;
}
@media (max-width: 479px) {
  .whoami__line { grid-template-columns: 5.25rem minmax(0, 1fr); gap: var(--space-2); }
}
.whoami__line dt { color: var(--text-muted); }
.whoami__line dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.whoami__line--status {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
}
.whoami__line--status dd { font-weight: var(--fw-medium); }
.whoami__ok { color: var(--accent); }

.whoami__link {
  border-bottom: 1px solid var(--border);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.whoami__link:hover,
.whoami__link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Linhas surgem em sequência depois do "whoami" (main.js).
   Sem .js-anim (movimento reduzido / sem JS): tudo visível. */
.js-anim .whoami__line {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js-anim .whoami__line.is-in {
  opacity: 1;
  transform: none;
}


/* =========================================================
   06 — CONTATO
   ========================================================= */
.contact__grid {
  display: grid;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
}
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

.contact__lead {
  max-width: 30rem;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--text-body);
}
.contact__cta { margin-top: var(--space-6); }

/* Canais diretos em linhas de terminal */
.contact__channels {
  max-width: 30rem;
  margin-top: var(--space-7);
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.contact__channels li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.contact__channel-label { color: var(--text-muted); }
.contact__channel-text  { color: var(--text-body); }
.contact__channel-link {
  justify-self: start;
  color: var(--text);
  transition: color var(--dur-fast) ease;
}
.contact__channel-link .arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.contact__channel-link:hover,
.contact__channel-link:focus-visible { color: var(--accent); }
.contact__channel-link:hover .arrow,
.contact__channel-link:focus-visible .arrow { transform: translate(2px, -2px); }

/* ---------- Painel do formulário ---------- */
.form-panel {
  background: var(--surface-terminal);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.form-panel__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4) var(--space-6);
}
@media (min-width: 768px) {
  .form { padding: var(--space-6) var(--space-6) var(--space-7); }
}

.form__field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 0;
  padding: 0;
}

.form__label {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.form__req { color: var(--accent); }
.form__opt { color: var(--text-muted); }

.form__input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 1rem;              /* 16px: evita zoom automático no iPhone */
  transition: border-color var(--dur-fast) ease;
}
.form__input::placeholder { color: var(--text-muted); opacity: 1; }  /* opacity 1: Firefox esmaece por padrão */
.form__input:hover { border-color: #3A3A36; }
.form__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form__input:focus-visible { outline: none; }
.form__input[aria-invalid="true"] { border-color: var(--danger); }

.form__textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.5;
}

.form__error {
  min-height: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--danger);
}
.form__error:empty { display: none; }

/* Escolha do tipo de projeto: pílulas (radio de verdade por baixo) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.chip:hover span { border-color: var(--text-muted); color: var(--text); }
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.form__note {
  flex: 1 1 14rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}


/* =========================================================
   RODAPÉ
   ========================================================= */
.footer {
  border-top: 1px solid var(--border);
  padding-top: clamp(var(--space-7), 6vw, var(--space-9));
}

/* Celular: marca em cima, navegação e contato lado a lado */
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7) var(--space-5);
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
  .footer__brand { grid-column: auto; }
}

.footer__logo {
  display: inline-block;
  padding-block: var(--space-2);
}
.footer__logo img { height: 1.35rem; width: auto; }

.footer__tagline {
  margin-top: var(--space-4);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-title);
  line-height: 1.1;
  color: var(--text);
}
.footer__tagline .serif-accent { font-size: 1.08em; }

.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.footer__col ul {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  list-style: none;
  padding: 0;
}
.footer__link {
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-body);
  transition: color var(--dur-fast) ease;
}
.footer__link:hover,
.footer__link:focus-visible { color: var(--accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(var(--space-7), 6vw, var(--space-9));
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.footer__top-link {
  color: var(--text-body);
  transition: color var(--dur-fast) ease;
}
.footer__top-link .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.footer__top-link:hover,
.footer__top-link:focus-visible { color: var(--accent); }
.footer__top-link:hover .arrow,
.footer__top-link:focus-visible .arrow { transform: translateY(-3px); }