/* Layout do portfólio — as classes que só existem nesta página.
   Tudo que era style="" no HTML mora aqui. */

/* ══ Links ═════════════════════════════════════════════════════════════
   Links de texto do site. Os que são botão (.btn) ficam de fora: cor e
   sublinhado deles vêm do componente. */

a:not(.btn) {
  color: var(--color-accent-700);
  text-decoration: none;
}

a:not(.btn):hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ══ Estrutura comum ═══════════════════════════════════════════════════ */

.accent { color: var(--color-accent); }

.container {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}

.section { border-bottom: 2px solid var(--color-divider); }
.section--clip { position: relative; overflow: hidden; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.section-head--spaced { margin-bottom: clamp(24px, 4vh, 44px); }

.section-title {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Compensa o sidebearing do Archivo para o texto alinhar com a coluna. */
  margin: 0 0 0 -0.04em;
}

/* Rótulo curto em caixa alta — usado em kickers, notas e legendas. */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.meta-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.prose {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  max-width: 52ch;
  margin: 0;
}

.prose--narrow { max-width: 46ch; margin-bottom: 20px; }

.tag-list { display: flex; gap: 8px; flex-wrap: wrap; }

.link-uppercase {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Números tabulares: dígitos de mesma largura não "pulam" ao trocar de idioma. */
.tnum { font-feature-settings: 'tnum' 1; }

/* Palavra gigante ao fundo das seções — puramente decorativa. */
.bg-word {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.bg-word > span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--color-neutral-200);
  white-space: nowrap;
}

.bg-word--hero { left: 0; right: 0; top: 8%; }
.bg-word--hero > span {
  font-size: clamp(150px, 22vw, 340px);
  line-height: 0.78;
  padding-left: var(--page-gutter);
}

.bg-word--about { right: 0; bottom: -4%; }
.bg-word--about > span {
  font-size: clamp(110px, 17vw, 260px);
  padding-right: var(--page-gutter);
}

.bg-word--contact { left: 0; right: 0; top: 10%; }
.bg-word--contact > span {
  font-size: clamp(130px, 20vw, 300px);
  color: var(--color-accent-600);
  padding-left: var(--page-gutter);
}

/* ══ Barra de progresso e grade de referência ══════════════════════════ */

.progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--color-accent);
  z-index: 60;
  pointer-events: none;
}

/* Overlay de colunas para conferir alinhamento — some com [hidden]. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  display: flex;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}

.grid-overlay > span {
  flex: 1;
  border-left: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.grid-overlay[hidden] { display: none; }

.grid-overlay > span:last-child {
  border-right: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ══ Navegação ═════════════════════════════════════════════════════════ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  flex-wrap: wrap;
  row-gap: 8px;
  /* Alinha com o .container mesmo quando a nav ocupa a largura toda. */
  padding-inline: max(
    var(--page-gutter),
    calc((100% - var(--page-max)) / 2 + var(--page-gutter))
  );
}

.site-nav .nav-brand { font-size: 16px; letter-spacing: -0.02em; }
.site-nav a { white-space: nowrap; }

/* No desktop o wrapper não participa do layout; a ordem recoloca as ações
   antes do CTA, como no desenho original. */
.nav-links { display: contents; }
.nav-actions { display: flex; gap: 6px; align-items: center; order: 1; }
.nav-cta { order: 2; }

.nav-btn { min-width: 44px; min-height: 36px; }

/* Estado do idioma ativo — vem do aria-pressed, não de style inline. */
.lang-btn[aria-pressed='true'] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* Botões cujo texto deve encostar à esquerda (largura mínima maior que o texto). */
.btn-start { justify-content: flex-start; }

/* ══ Hero ══════════════════════════════════════════════════════════════ */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  padding: clamp(72px, 11vh, 150px) 0 clamp(40px, 7vh, 80px);
  min-height: clamp(520px, 80vh, 860px);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 3vh, 34px);
}

.hero-kicker::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--color-accent);
}

.hero-title {
  font-size: clamp(40px, 5.8vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(20px, 3vh, 32px) -0.058em;
}

.hero-title span { display: block; }

.hero-lead {
  font-size: 17px;
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 0 clamp(24px, 3.5vh, 36px);
  color: var(--color-neutral-800);
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 300px;
  margin: 0 0 68px;
  justify-self: end;
  align-self: end;
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
}

.hero-photo__frame {
  position: absolute;
  inset: 16px;
  overflow: hidden;
  background: var(--color-neutral-200);
  transition: inset 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-photo:hover .hero-photo__frame { inset: 0; }

.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: clamp(20px, 3vh, 34px);
}

.scroll-cue {
  color: var(--color-neutral-700);
  animation: px-cue 2.4s ease-in-out infinite;
}

/* ══ Números ═══════════════════════════════════════════════════════════ */

.stats-inner { padding-block: clamp(44px, 7vh, 76px); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.05;
  color: var(--color-accent);
  margin: 0 0 12px -0.045em;
}

.stat-label {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-800);
  margin: 0;
}

/* ══ Serviços ══════════════════════════════════════════════════════════ */

.services-inner { padding-block: clamp(56px, 9vh, 110px); }

.service-list { display: grid; grid-template-columns: minmax(0, 1fr); }

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 3vw, 56px);
  border-top: 2px solid var(--color-divider);
  padding: clamp(24px, 4vh, 40px) 0;
}

.service-row:last-child { border-bottom: 2px solid var(--color-divider); }

.service-head { display: flex; gap: 20px; align-items: baseline; }

.service-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-accent);
  margin: 0;
}

.service-title {
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ══ Experiência ═══════════════════════════════════════════════════════ */

.exp-head { padding-block: clamp(56px, 9vh, 110px) clamp(24px, 4vh, 48px); }
.exp-list { padding-block: 0 clamp(56px, 9vh, 110px); }

.exp-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  border-top: 2px solid var(--color-divider);
  padding: clamp(32px, 5vh, 64px) 0;
}

.exp-item:last-child { border-bottom: 2px solid var(--color-divider); }

.exp-period {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin: 0 0 16px;
}

.exp-title {
  font-size: clamp(25px, 2.7vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.exp-role {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0 0 16px;
}

/* ══ Painel lateral (usado em Experiência e Sobre) ═════════════════════ */

.panel {
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
  padding: clamp(20px, 3vw, 32px);
}

.panel-title {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0 0 20px;
}

.panel-list {
  display: grid;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-neutral-800);
}

.panel-list > :not(:last-child) {
  border-bottom: 2px solid var(--color-divider);
  padding-bottom: 12px;
}

.panel-row--split { display: flex; justify-content: space-between; gap: 16px; }

.panel-row--accent {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-accent);
}

.panel-value {
  font-family: var(--font-heading);
  font-weight: 800;
  white-space: nowrap;
}

.panel-value--accent { color: var(--color-accent); }

/* ══ Projetos ══════════════════════════════════════════════════════════ */

.projects-inner { padding-block: clamp(56px, 9vh, 110px); }

.projects-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  max-width: 56ch;
  margin: 0 0 clamp(24px, 4vh, 40px);
}

.projects-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  padding: 26px;
  border: 2px solid var(--color-divider);
}

.project-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin: 0;
}

.project-title {
  font-size: 21px;
  line-height: 1.15;
  color: var(--color-neutral-600);
  margin: 0 0 10px;
}

.project-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-600);
  margin: 0;
}

/* ══ Sobre ═════════════════════════════════════════════════════════════ */

.about-inner { padding-block: clamp(56px, 9vh, 110px); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.about-eyebrow { display: block; margin: 0 0 18px; }

.about-title {
  font-size: clamp(27px, 2.9vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 22px -0.04em;
}

.about-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  max-width: 46ch;
  margin: 0 0 18px;
}

.about-text--last { margin-bottom: 26px; }

.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr));
  gap: 20px;
  border-top: 2px solid var(--color-divider);
  padding-top: 22px;
}

.fact-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 0 0 6px;
}

.fact-value { font-size: 16px; line-height: 1.5; margin: 0; }

/* — painel de ferramentas — */

.tools-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 26px);
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
  padding: clamp(22px, 3vw, 34px);
}

.tools-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.tools-list { display: flex; flex-direction: column; }

.tools-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 2px solid var(--color-divider);
  padding: 10px 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: -0.01em;
}

.tools-row--accent { color: var(--color-accent); }

.tools-kind {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
}

.tools-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-700);
  margin: 0;
  border-top: 2px solid var(--color-accent);
  padding-top: 14px;
}

/* ══ Contato ═══════════════════════════════════════════════════════════ */

.contact {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-bg);
}

.contact-inner { padding-block: clamp(64px, 10vh, 124px); }

.contact-title {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(24px, 4vh, 40px) -0.058em;
}

.contact-title span { display: block; }

.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.contact-link {
  color: var(--color-bg);
  border-color: var(--color-bg);
  text-decoration: none;
}


/* ══ Rodapé ════════════════════════════════════════════════════════════ */

.site-footer { padding-block: clamp(32px, 5vh, 56px); }

.footer-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVO

   A base deste arquivo é a tela estreita: todo grid nasce com uma coluna
   só. As colunas extras entram nos blocos abaixo, na ordem crescente de
   largura — assim o celular nunca precisa desfazer regra de desktop.

   Pontos de corte, escolhidos pelo conteúdo e não por aparelho:
     560px  cartões de projeto cabem em dois
     820px  as seções de duas colunas cabem lado a lado
    1000px  a nav inteira cabe em uma linha
    1100px  os quatro cartões de projeto cabem em uma fileira
   ══════════════════════════════════════════════════════════════════════ */

/* ── ≥560px: dois cartões de projeto por linha ── */
@media (min-width: 560px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥820px: o layout de duas colunas ──
   Abaixo disso tudo empilha; é o ponto em que duas colunas de texto ainda
   têm largura de leitura decente. */
@media (min-width: 820px) {
  /* A foto tem 300px fixos: o resto é da manchete, em vez de dividir a
     largura no meio e deixar meia coluna vazia ao lado do retrato. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) 300px; }

  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-row,
  .exp-item,
  .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥1100px: os quatro projetos em uma fileira ── */
@media (min-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── <820px: empilhado ── */
@media (max-width: 819.98px) {
  /* Empilhado, a foto centralizada equilibra melhor que encostada à
     direita, e a margem que a descolava do rodapé do hero vira buraco. */
  .hero-photo {
    justify-self: center;
    margin-bottom: 0;
  }

  .hero-grid {
    min-height: 0;
    padding-block: clamp(40px, 7vh, 96px) clamp(32px, 5vh, 64px);
  }

  /* Empilhado, quem lê quer o texto antes da ficha técnica. */
  .exp-item .panel,
  .about-grid .tools-panel { order: 2; }
}

/* ── <1000px: a nav em duas linhas ──
   Deixada solta, ela quebrava sozinha em 2–4 linhas e chegava a 170px de
   altura grudada no topo. Agora são duas linhas fixas: identidade e
   controles em cima, navegação rolável embaixo. */
@media (max-width: 999.98px) {
  .site-nav {
    padding-block: 6px;
    gap: 6px 12px;
  }

  .site-nav .nav-brand {
    font-size: 14px;
    /* O nome quebra em duas linhas aqui; sem apertar a entrelinha ele
       sozinho já era mais alto que os botões ao lado. */
    line-height: 1.2;
    /* base 0 e sem a margem automática do componente: com a largura natural
       do nome (366px) como base, o flex jogava os controles para uma
       terceira linha em vez de deixar o nome quebrar. */
    flex: 1 1 0;
    min-width: 0;
    margin-right: 0;
  }

  .nav-links {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    align-items: center;
    gap: 16px;
    /* Rola na horizontal em vez de quebrar em mais linhas; o CTA cortado na
       borda direita é o próprio aviso de que há mais coisa. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Sangra até a borda para o conteúdo rolar por baixo do respiro. */
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .site-nav .nav-links a:not(.btn) {
    flex: none;
    font-size: 13px;
    padding-block: 9px; /* leva o alvo de toque de 23px para 38px */
  }

  .nav-cta {
    flex: none;
    order: 0; /* dentro da faixa ele é o último, na ordem do HTML */
    min-height: 38px;
  }
}

/* ── <620px: celular ── */
@media (max-width: 619.98px) {
  /* A manchete passa a escalar pela largura da tela: em 320px o tamanho
     mínimo de 40px estourava a coluna. */
  .hero-title { font-size: clamp(30px, 8vw, 40px); }
  .contact-title { font-size: clamp(26px, 7vw, 34px); }
  .section-title { font-size: clamp(26px, 6.5vw, 32px); }

  .hero-lead { font-size: 16px; }

  /* Quatro cartões de 200px viram 800px de "Em breve". */
  .project-card { min-height: 140px; }

  /* Nesta largura é dedo quase sempre, mesmo que o browser não admita
     (o bloco pointer:coarse mais abaixo cobre o resto). */
  .btn { min-height: 42px; }

  .about-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ── <420px: telas pequenas ──
   Aqui as linhas rótulo↔valor não cabem lado a lado: o `white-space: nowrap`
   do valor empurrava a página 54px para fora da tela. Empilhadas, cabem. */
@media (max-width: 419.98px) {
  .panel-row--split,
  .tools-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .panel-value,
  .tools-kind { white-space: normal; }

  .stats-grid { gap: 24px 20px; }
}

/* ── Telefone deitado ──
   Com 400px de altura, um hero de 520px mínimos esconde a página inteira. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-grid {
    min-height: 0;
    padding-block: clamp(28px, 8vh, 56px);
  }
}

/* ── Dedo em vez de mouse ──
   Pergunta pelo apontador, não pela largura: tablet com mouse continua
   compacto, celular grande ganha alvo de toque. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-btn { min-width: 44px; min-height: 44px; }
  .site-nav .nav-links a:not(.btn) { padding-block: 11px; }
  /* Link de texto solto: 21px de altura é pouco para o dedo. */
  .link-uppercase { display: inline-block; padding-block: 10px; }
}