/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Fontes */
  --font-primary: 'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  /* Só para trecho de código de verdade. Proibida em texto de interface (ver DESIGN.md).
     Fonte de sistema de propósito: nenhuma monoespaçada é baixada do Google Fonts. */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Escala tipográfica — Tailwind-style, base 16px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Line-heights por contexto */
  --leading-tight:   1.1;     /* Headings grandes (4xl+) */
  --leading-snug:    1.25;    /* Headings médios */
  --leading-normal:  1.5;     /* UI / títulos pequenos */
  --leading-relaxed: 1.625;   /* Corpo de texto */

  /* Letter-spacing */
  --tracking-tighter: -0.05em;   /* Display gigante (6xl+) */
  --tracking-tight:   -0.025em;  /* Headings normais */
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.08em;    /* Labels uppercase */

  /* Cores — warm dark editorial (identidade original) */
  --color-bg:          #0d0c0a;
  --color-surface:     #161410;          /* cards */
  --color-section-bg:  #100e0b;          /* banda escura — seções alternadas */
  --color-surface-2:   #1f1c17;          /* inputs, thumbs, surfaces elevadas */
  --color-border:      rgba(212, 165, 116, 0.16);
  --color-text:        #e8e1d4;
  --color-text-muted:  #9a9284;          /* 5.51:1 sobre input, 5.97:1 sobre card — AA com folga */
  --color-heading:     #f4efe4;
  --color-accent:      #d4a574;          /* dourado de marca — preenchimento de botão, borda, glow */
  /* Dourado quando ele é o TEXTO. No escuro é o mesmo tom; no claro precisa ser
     mais profundo pra passar em AA sobre o creme. Nunca use --color-accent em
     `color:`, senão o tema claro perde contraste. */
  --color-accent-ink:  #d4a574;
  --color-accent-hover: #e8d3a8;         /* hover de link no rodapé */
  /* Cor do texto quando o fundo é --color-accent ou --color-secondary. */
  --color-on-accent:   #0d0c0a;
  --color-secondary:   #bd8e5b;          /* dourado profundo — estado base dos botões (two-tone Adote-me) */
  --color-accent-soft: rgba(212, 165, 116, 0.12);
  --color-accent-glow:      rgba(212, 165, 116, 0.4);
  --color-accent-glow-soft: rgba(212, 165, 116, 0.25);
  --color-hero-blob-strong: rgba(212, 165, 116, 0.09);
  --color-hero-blob-soft:   rgba(212, 165, 116, 0.05);
  --color-header-bg:        rgba(13, 12, 10, 0.72);
  --color-nav-mobile-bg:    rgba(13, 12, 10, 0.98);
  --color-footer-bg:        #0a0907;
  --color-text-soft:        rgba(232, 225, 212, 0.78);   /* .lead */
  --color-text-soft-strong: rgba(232, 225, 212, 0.82);   /* .hero-tagline */
  --color-wordmark:         rgba(232, 225, 212, 0.035);  /* marca-d'água MONTESOUZA */
  /* Estados do formulário. Precisam de token porque o vermelho e o verde do tema
     escuro são claros demais para o creme do tema claro. */
  --color-error:   #e0a4a4;              /* 8.8:1 sobre card escuro */
  --color-success: #93c9a3;              /* 9.5:1 sobre card escuro */
  /* Botão "Ver projeto" da thumb: preenchimento transparente sobre a foto. */
  --color-thumb-btn-bg:     rgba(13, 12, 10, 0.55);
  --color-thumb-btn-border: rgba(212, 165, 116, 0.65);
  --gradient-heading: linear-gradient(135deg, #f4efe4 0%, #e8d3a8 50%, #d4a574 100%);

  /* Raios — Adote-me: pílulas e cards bem arredondados */
  --radius-pill:   100px;
  --radius-card:   20px;
  --radius-medium: 14px;
  --radius-sm:     10px;

  /* Sombra de elevação dos cards (dark) */
  --shadow-card:       0 10px 30px -18px rgba(0, 0, 0, 0.75);
  --shadow-card-hover: 0 22px 48px -20px rgba(212, 165, 116, 0.22);

  /* Transições */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Tema claro ─────────────────────────────
   O escuro continua sendo o padrão da marca: só entra aqui quem clicou no botão
   (a escolha fica no localStorage). Redefine apenas os tokens de cor, nada de
   duplicar regra de componente. */
:root[data-theme='light'] {
  --color-bg:          #f6f1e7;          /* creme, não branco: mantém o calor da marca */
  --color-surface:     #fffdf8;          /* cards */
  --color-section-bg:  #efe7d9;          /* banda clara — seções alternadas */
  --color-surface-2:   #eae0cf;          /* inputs, thumbs */
  --color-border:      rgba(122, 88, 48, 0.22);
  --color-text:        #2e2a23;
  --color-text-muted:  #635b4e;          /* 6.4:1 sobre card, 5.4:1 sobre input — AA */
  --color-heading:     #1c1811;
  /* No claro o dourado tem que ser profundo em todo uso: como preenchimento ele
     carrega texto creme por cima (5.7:1), e como texto ele fica sobre o creme
     (5.2:1). Um dourado claro falharia nos dois papéis. */
  --color-accent:      #8a5a1c;
  --color-accent-ink:  #8a5a1c;
  --color-accent-hover: #5a380f;
  --color-secondary:   #6f4614;
  --color-on-accent:   #fffdf8;
  --color-accent-soft: rgba(176, 124, 60, 0.14);
  --color-accent-glow:      rgba(176, 124, 60, 0.35);
  --color-accent-glow-soft: rgba(176, 124, 60, 0.2);
  --color-hero-blob-strong: rgba(176, 124, 60, 0.1);
  --color-hero-blob-soft:   rgba(176, 124, 60, 0.05);
  --color-header-bg:        rgba(246, 241, 231, 0.78);
  --color-nav-mobile-bg:    rgba(246, 241, 231, 0.98);
  --color-footer-bg:        #ebe2d2;
  --color-text-soft:        rgba(46, 42, 35, 0.82);
  --color-text-soft-strong: rgba(46, 42, 35, 0.88);
  /* Escuro sobre claro pesa mais que claro sobre escuro: mesmo alpha deixaria a
     marca-d'água mais gritante no tema claro do que ela é no escuro. */
  --color-wordmark:         rgba(46, 42, 35, 0.038);
  /* O vermelho e o verde do tema escuro dão ~2:1 sobre o creme: ilegíveis.
     Aqui eles viram tons profundos. */
  --color-error:   #a32f2f;              /* 6.9:1 sobre card claro */
  --color-success: #256a3d;              /* 6.4:1 sobre card claro */
  --color-thumb-btn-bg:     rgba(255, 253, 248, 0.62);
  --color-thumb-btn-border: rgba(138, 90, 28, 0.6);
  --gradient-heading: linear-gradient(135deg, #1c1811 0%, #6f4614 50%, #b07c3c 100%);
  --shadow-card:       0 10px 30px -18px rgba(60, 42, 20, 0.3);
  --shadow-card-hover: 0 22px 48px -20px rgba(176, 124, 60, 0.4);
}

/* O grain foi calibrado pra fundo escuro: no claro ele vira sujeira visível. */
:root[data-theme='light'] body::after {
  opacity: 0.012;
}

/* Troca de tema com fade curto, em vez de piscar de uma cor pra outra. */
body {
  transition: background-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

html {
  scroll-behavior: smooth;
}

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

/* Menu mobile aberto: trava o scroll da página atrás do overlay.
   Fica no html porque overflow no body faria dele um scroll container e o
   position: sticky da .contact-headline pararia de funcionar. */
html.nav-open {
  overflow: hidden;
}

body {
  /* dvh acompanha a barra do navegador que aparece e some. O vh acima é o
     fallback para quem não suporta a unidade; quem suporta ignora a primeira. */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  /* clip, não hidden: hidden faz o overflow-y computar como auto, o body vira
     scroll container e captura o position: sticky da .contact-headline */
  overflow-x: clip;
}

/* Wordmark oversized — referência editorial / capa de revista.
   Marca-d'água tipográfica fixa no viewport, cortada nas bordas, asimétrica.
   Pintado no root (html) pra ficar atrás do conteúdo de body sem precisar de z-index hack. */
html::before {
  content: 'MONTESOUZA';
  position: fixed;
  bottom: -7vw;
  right: -3vw;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 26vw;
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--color-wordmark);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* Grain texture — discreto, dá soul sem ruído visual */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
}

/* Anchors com scroll-margin pra não ficarem atrás do header fixo */
section[id], main[id] {
  scroll-margin-top: 5rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

main {
  flex: 1;
}

/* ── Tipografia base ────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--text-5xl), 6.5vw, var(--text-7xl));
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

p {
  text-wrap: pretty;
}

/* Itálico em palavra-chave dentro de heading — ênfase moderna */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-accent-ink);
  font-feature-settings: 'ss01';
}

/* Itálico em corpo: sem cor, só ênfase */
p em {
  font-style: italic;
  color: var(--color-heading);
}

/* Numerais tabulares globais — alinha métricas, datas, versões */
body {
  font-variant-numeric: tabular-nums;
}

/* Utility classes tipográficas */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ── Header glassmorphism ───────────────── */
.header {
  background-color: var(--color-header-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--color-heading);
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--color-border);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Container do header: layout horizontal (logo + nav) */
.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* As duas laterais ocupam a mesma fatia, então a nav cai no centro real do
   header. Com `space-between` sozinho ela caía no meio do espaço que sobra, e
   como o logo tem 191px contra 40px do botão de tema, o menu terminava 75px
   deslocado pra direita. No mobile a navbar é absoluta e sai do fluxo: aí o
   logo e as ações dividem a linha entre si, que é o comportamento desejado. */
.header .container > .logo,
.header .container > .header-actions {
  flex: 1 1 0;
  min-width: 0;
}

.header .container > .header-actions {
  justify-content: flex-end;
}

.logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  color: var(--color-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  border-radius: 6px;
  transition: transform 0.4s var(--ease-bounce), filter 0.3s ease;
}

.logo:hover .logo-icon {
  transform: rotate(-8deg) scale(1.06);
  filter: drop-shadow(0 0 12px var(--color-accent-glow));
}

.logo-text {
  display: inline-flex;
}

.logo-char {
  display: inline-block;
  transition:
    transform 0.45s var(--ease-bounce),
    color 0.3s var(--ease-smooth);
  transition-delay: calc(var(--i) * 18ms);
  will-change: transform, color;
}

.logo:hover .logo-char {
  color: var(--color-accent-ink);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .logo-char { transition: color 0.2s ease; transition-delay: 0s; transform: none !important; }
}

/* ── Navbar ─────────────────────────────── */
.navbar ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.navbar ul li a {
  text-decoration: none;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  transition: color 0.2s ease;
  position: relative;
}

/* Underline dourado que desliza da esquerda */
.navbar ul li a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-smooth);
}

.navbar ul li a:hover,
.navbar ul li a.nav-active {
  color: var(--color-accent-ink);
}

.navbar ul li a:hover::after,
.navbar ul li a.nav-active::after {
  transform: scaleX(1);
}

/* ── Hamburger ──────────────────────────── */
/* ── Ações do header (tema + hambúrguer) ─── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth),
    color 0.25s var(--ease-smooth);
}

.theme-toggle:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.theme-icon {
  width: 18px;
  height: 18px;
}

/* Mostra o ícone do tema que o clique vai ativar, não o que já está ligado. */
.theme-icon--lua {
  display: none;
}

:root[data-theme='light'] .theme-icon--lua {
  display: block;
}

:root[data-theme='light'] .theme-icon--sol {
  display: none;
}

/* Quadrado de 44px de verdade, do mesmo tamanho do botão de tema ao lado.
   Antes o alvo de toque vinha de `padding: 13px 10px` com `margin: -13px -10px`
   por cima: o truque ampliava a área clicável sem ocupar espaço no layout, o
   que servia quando o hambúrguer era o único item do canto. Com o botão de tema
   ao lado, o flex passou a medir 25px onde o botão pintava 45px, e o resultado
   era o hambúrguer 10px fora do container e 2px por cima do vizinho. */
.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  cursor: pointer;
  gap: 5px;
  background: transparent;
  border: 0;
  color: inherit;
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: var(--color-heading);
  border-radius: 3px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
  .navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-nav-mobile-bg);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    z-index: 999;
  }

  .navbar.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .navbar ul {
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 0;
  }

  .navbar ul li a {
    display: block;
    padding: 0.85rem 1.5rem;
    font-size: var(--text-2xl);
  }

  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 1001;
  }
}

/* ── Animações ──────────────────────────── */

/* Entrada suave de baixo */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada vinda da esquerda */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Sublinhar link nav animado */
@keyframes navUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─────────────────────────────────────────
   HERO — composição centrada (estilo Adote-me)
───────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dentro do navegador embutido do Instagram sobram barras em cima e embaixo:
     100vh mede a tela inteira e empurra os botões para fora da área visível.
     O dvh mede o que realmente aparece. O vh acima é fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 7rem 1.5rem 5rem;
  overflow: hidden;
  text-align: center;
}

/* Borda inferior diagonal — transição em corte para a próxima seção */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: var(--color-section-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 3vw, 3.25rem);
  width: 100%;
  max-width: min(1500px, 94vw);
  margin: 0 auto;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 100%;
}

.hero-content h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(var(--text-5xl), 10vw, 9.5rem);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  line-height: 0.92;
  color: var(--color-heading);
  margin-bottom: 0;
  animation: fadeUp 0.75s ease 0.1s both;
}

.hero-content h1 em {
  font-style: normal;
  color: var(--color-accent-ink);
}

.lead {
  font-size: clamp(var(--text-lg), 1.7vw, var(--text-2xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
  max-width: 60ch;
  margin: 1.75rem auto 0;
  text-wrap: pretty;
  animation: fadeUp 0.75s ease 0.2s both;
}

/* Hero CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  animation: fadeUp 0.75s ease 0.32s both;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: clamp(0.9rem, 1vw, 1.15rem) clamp(2rem, 2.4vw, 2.75rem);
  background: var(--color-secondary);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(var(--text-sm), 1.1vw, var(--text-lg));
  text-decoration: none;
  transition: background 0.25s var(--ease-smooth), transform 0.25s var(--ease-bounce), box-shadow 0.25s ease;
}

.btn-hero:hover {
  background: var(--color-accent);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 26px var(--color-accent-glow-soft);
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.9rem, 1vw, 1.15rem) clamp(2rem, 2.4vw, 2.75rem);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(var(--text-sm), 1.1vw, var(--text-lg));
  text-decoration: none;
  border: 2px solid var(--color-accent);
  background: transparent;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-bounce), background 0.25s ease;
}

.btn-hero-outline:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: translateY(-3px);
}

/* Ícones sociais no hero */
.hero-social {
  display: flex;
  gap: clamp(0.7rem, 1vw, 1.1rem);
  align-items: center;
  justify-content: center;
  margin: 2rem 0 0;
  animation: fadeUp 0.75s ease 0.44s both;
}

.hero-social a {
  width: clamp(46px, 4vw, 68px);
  height: clamp(46px, 4vw, 68px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-bounce);
  flex-shrink: 0;
}

.hero-social a:hover {
  color: var(--color-on-accent);
  border-color: transparent;
  background: var(--color-accent);
  transform: translateY(-4px) scale(1.1);
}

.hero-social svg {
  width: clamp(19px, 1.8vw, 28px);
  height: clamp(19px, 1.8vw, 28px);
}

/* Meta info do hero: faixa centrada de 3 colunas */
.hero-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem clamp(3rem, 6vw, 7rem);
  width: 100%;
  max-width: 1000px;
  padding-top: clamp(2rem, 2.5vw, 3rem);
  border-top: 1px solid var(--color-border);
  animation: fadeUp 0.75s ease 0.5s both;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  flex: 1 1 200px;
}

.hero-meta-label {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-xs), 0.8vw, var(--text-sm));
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-meta-value {
  font-size: clamp(var(--text-sm), 1vw, var(--text-lg));
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  max-width: 30ch;
}

.hero-meta-value strong {
  color: var(--color-accent-ink);
  font-weight: var(--weight-semibold);
}

/* Desktop: faixa de meta fixada no rodapé do hero, para o conteúdo
   principal (nome + tagline + lead + CTAs) centralizar de verdade na tela. */
/* Desktop: grid de 2 linhas — conteúdo principal centralizado na linha
   flexível de cima, faixa de meta na linha de baixo. Como ficam em trilhas
   separadas, nunca se sobrepõem, seja qual for a altura da tela. */
@media (min-width: 992px) {
  .hero {
    flex-direction: column;
  }

  .hero-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 0;
  }

  .hero-content {
    align-self: center;
  }

  .hero-meta {
    align-self: end;
    justify-self: center;
    padding-top: 0;
    border-top: 0;
  }
}

/* Tagline do hero: secundário mas presente */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 2.8vw, var(--text-4xl));
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-soft-strong);
  max-width: 40ch;
  margin: 1.25rem auto 0;
  text-wrap: balance;
  animation: fadeUp 0.75s ease 0.15s both;
}

.hero-tagline em {
  font-style: italic;
  color: var(--color-accent-ink);
  font-weight: var(--weight-semibold);
}

/* Magnetic CTA: short transition pra acompanhar o mouse sem jank */
.btn-magnetic {
  transition:
    background 0.25s var(--ease-smooth),
    transform 0.18s var(--ease-smooth),
    box-shadow 0.25s ease;
  will-change: transform;
  animation: none;
}

/* ── Section head — centralizado (estilo Adote-me) ── */
.section-head {
  margin: 0 auto 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 1100px;
  text-align: center;
}

.section-title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 auto 3rem;
  text-align: center;
  max-width: 24ch;
  text-wrap: balance;
}

.section-head .section-title {
  margin: 0;
  text-align: center;
  max-width: 24ch;
}

/* ── Destaques — faixa de números logo abaixo da hero ─── */
.highlights {
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
  border-block: 1px solid var(--color-border);
}

/* auto-fit em vez de repeat(3, 1fr): em tela estreita as colunas quebram
   sozinhas e "Recife" não estoura a própria coluna. */
.highlights-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0 auto;
}

.highlight {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}

.highlight__value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent-ink);
}

.highlight__label {
  font-size: clamp(var(--text-sm), 1.4vw, var(--text-base));
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* ── Services — featured blocks centrados ─── */
.services {
  position: relative;
  overflow: hidden;
  background: var(--color-section-bg);
  padding: 6rem 0 7rem;
}

.services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s ease, border-color 0.4s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 165, 116, 0.4);
  box-shadow: var(--shadow-card-hover);
}

.service-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-ink);
}

.service-card h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: 0.65rem;
}

.service-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-width: 36ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ── Seção de projetos (home) ───────────── */
.projects {
  padding: 7rem 0 8rem;
  text-align: center;
}

.projects > .section-title {
  padding: 0 1.5rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.projects-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 1.75rem;
}

.projects-grid--compact .project-item {
  padding: 1.25rem;
}

.projects-grid--compact h3 {
  font-size: var(--text-xl);
}

.projects-grid--compact p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.projects-grid--compact .project-thumb {
  margin: 0 0 1.25rem;
}

.projects-subhead {
  max-width: 1100px;
  margin: 4rem auto 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 820px) {
  .projects-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .projects-grid--compact {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
    gap: 1rem;
  }

  .projects-grid--compact .project-item {
    padding: 1rem;
  }

  .projects-grid--compact .project-thumb {
    margin: 0 0 1rem;
  }

  .projects-grid--compact h3 {
    font-size: var(--text-lg);
  }
}

@media (max-width: 560px) {
  .projects-grid--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .projects-grid--compact .tech-tags {
    gap: 0.3rem;
  }
  .projects-grid--compact .tech-tags .tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
  }
}

.project-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s ease, border-color 0.4s ease;
}

.project-item:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 165, 116, 0.4);
  box-shadow: var(--shadow-card-hover);
}

/* A imagem fica emoldurada dentro do card, com respiro e raio próprios.
   Antes ela sangrava até a borda (margem negativa) e o zoom do hover a empurrava
   contra a linha do card, sem folga nenhuma. */
.project-thumb {
  position: relative;
  margin: 0 0 1.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

/* Thumb clicável, só nos cards cujo projeto tem site no ar. Fica fora do tab
   order e escondida do leitor de tela de propósito: o botão logo abaixo leva ao
   mesmo lugar com rótulo, e dois links pro mesmo destino só atrapalhariam. */
a.project-thumb {
  display: block;
  cursor: pointer;
}

/* No hover da imagem sobe um botão, e só ele: nada de camada de cor por cima da
   foto. O pill tem fundo sólido, então se sustenta sobre qualquer preview.
   Vive no ::after porque o ::before já é o skeleton, e z-index 2 o mantém acima
   dele mesmo se a imagem ainda estiver carregando. */
a.project-thumb::after {
  content: "Ver projeto";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-pill);
  /* Preenchimento transparente: quem dá legibilidade é o blur, não uma cor
     chapada. Sem o blur o texto brigaria com preview claro. */
  background-color: var(--color-thumb-btn-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-thumb-btn-border);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translate(-50%, -38%);
  transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
  pointer-events: none;
}

a.project-thumb:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  a.project-thumb::after,
  a.project-thumb:hover::after { transform: translate(-50%, -50%); }
}

/* Shimmer skeleton só existe quando o JS está ativo (classe .js no <html>).
   Sem JS / JS travado / cache velho, o ::before não cobre a imagem — ela
   aparece direto, em vez de ficar presa atrás do skeleton pra sempre. */
.js .project-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 15%,
      rgba(232, 225, 212, 0.11) 50%,
      transparent 85%
    ),
    var(--color-surface-2);
  background-size: 200% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  animation: thumb-shimmer 1.6s linear infinite;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-smooth);
}

.js .project-thumb.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes thumb-shimmer {
  to { background-position: 150% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .project-thumb::before { animation: none; }
}

.js .project-thumb img,
.js .project-thumb .thumb-half {
  opacity: 0;
  transition: opacity 0.45s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.js .project-thumb.is-loaded img,
.js .project-thumb.is-loaded .thumb-half {
  opacity: 1;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-item:hover .project-thumb img {
  transform: scale(1.04);
}

/* Thumb com divisão diagonal: duas imagens cobrindo metades opostas */
.project-thumb--split {
  position: relative;
}
.project-thumb--split .thumb-half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-thumb--split .thumb-half--top {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.project-thumb--split .thumb-half--bottom {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.project-item:hover .project-thumb--split .thumb-half {
  transform: scale(1.04);
}
/* h4 nos cards de "Outros projetos": eles ficam abaixo de um h3, então o nível
   muda mas o estilo é o mesmo. */
.project-item h3,
.project-item h4 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: 0.6rem;
}

.project-item p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: 1.25rem;
  max-width: 52ch;
  text-wrap: pretty;
}

.project-item .btn {
  display: inline-block;
  margin-top: auto;
  padding: 0.6rem 1.5rem;
  background-color: var(--color-surface-2);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s var(--ease-bounce);
  text-decoration: none;
  align-self: flex-start;
}

.project-item .btn:hover {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-color: transparent;
  transform: translateY(-2px);
}

/* ── Card lead: trabalho mais recente, ocupa a fileira inteira da grade ── */
.project-item--lead {
  grid-column: 1 / -1;
}

/* No mobile o card empilha como um card normal; .project-body é só um
   wrapper transparente. O split horizontal só vale do tablet pra cima. */
@media (min-width: 821px) {
  .project-item--lead {
    flex-direction: row;
    align-items: stretch;
    /* O card mantém o próprio padding: é ele que dá o respiro entre a imagem e
       a borda. Com padding 0 a foto encostava nos quatro lados. */
    padding: clamp(1rem, 1.6vw, 1.5rem);
    gap: clamp(1.25rem, 2.4vw, 2rem);
  }

  .project-item--lead .project-thumb {
    flex: 1 1 56%;
    margin: 0;
    aspect-ratio: auto;
  }

  .project-item--lead .project-body {
    flex: 1 1 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(0.5rem, 1.4vw, 1.25rem);
  }

  .project-item--lead h3 {
    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
    margin-bottom: 0.75rem;
  }

  .project-item--lead p {
    font-size: var(--text-lg);
    margin-bottom: 1.5rem;
  }
}

/* Link de repositórios */
.delayExtraBigReveal {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  padding-bottom: 0.15rem;
  position: relative;
  transition: color 0.25s ease;
  align-self: center;
}

.delayExtraBigReveal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-smooth), opacity 0.3s ease;
  opacity: 0.4;
}

.delayExtraBigReveal:hover {
  color: var(--color-accent-ink);
}

.delayExtraBigReveal:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Link sempre centralizado, abaixo de todos os cards */
.projects-page .delayExtraBigReveal {
  display: block;
  width: max-content;
  margin: 2.5rem auto 0;
}

/* ── Footer ─────────────────────────────── */
.footer {
  background-color: var(--color-footer-bg);
  color: var(--color-text-muted);
  padding: 2rem 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  border-top: 1px solid var(--color-border);
  position: relative;
}

.footer-left,
.footer-right {
  margin: 0;
}

.footer-left p,
.footer-right p {
  margin: 0;
  font-family: var(--font-primary);
  letter-spacing: var(--tracking-normal);
}

.footer-left b,
.footer-right b {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.footer a {
  color: var(--color-accent-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--color-accent-hover);
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-bounce);
  flex-shrink: 0;
}

.footer-social a:hover {
  color: var(--color-on-accent);
  border-color: transparent;
  background: var(--color-accent);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 14px;
  height: 14px;
}

/* ── Page-hero (páginas internas) ───────── */
.page-hero {
  position: relative;
  padding: 9rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
  background: var(--color-section-bg);
}

.page-hero h1 {
  position: relative;
  z-index: 1;
  animation: fadeUp 0.75s ease 0.05s both;
}

.page-hero .lead {
  margin: 1.25rem auto 0;
  animation: fadeUp 0.75s ease 0.18s both;
}

/* ── Sobre ─────────────────────────────── */
.about-section {
  position: relative;
  overflow: hidden;
  padding: 6rem 1.5rem 7rem;
}


.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.about-text p {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  max-width: 65ch;
}

/* Skills abaixo do profile card, não mais lado a lado com o texto */
.about-grid--skills-only {
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.about-skills h3 {
  margin-bottom: 1.25rem;
}

.skills-groups {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.skills-group {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
}

.skills-group__label {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.skills-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.skill-item {
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.skill-item:not(:last-child)::after {
  content: '·';
  color: var(--color-text-muted);
  margin-left: 0.75rem;
  opacity: 0.6;
}

/* ── Profile card (Sobre) ───────────────── */
.profile-card {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.profile-card__photo {
  position: relative;
  width: clamp(15rem, 34vw, 29.375rem);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-2);
}

/* A foto fica por cima do monograma e o cobre quando existir.
   Nada aqui depende de `onerror` ter disparado: sem foto, o que
   aparece é a camada de baixo. */
.profile-card__photo > picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.profile-card__photo picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

/* `hidden` precisa vencer o `display: block` acima — regra de autor
   não perde para o UA stylesheet só por causa do atributo. */
.profile-card__photo > picture[hidden] { display: none; }

/* Camada de baixo: monograma, visível sempre que a foto não cobrir. */
.profile-card__monogram {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(212, 165, 116, 0.14), transparent 60%),
    var(--color-surface-2);
}

.profile-card__monogram img {
  width: 42%;
  height: auto;
  object-fit: contain;
  opacity: 0.55;
}

.profile-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  margin-left: clamp(-5rem, -4vw, -2.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.profile-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 0 0 0.4rem;
}

.profile-card__role {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent-ink);
  margin: 0 0 1.25rem;
}

.profile-card__bio {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0 0 1rem;
}

.profile-card__bio:last-of-type { margin-bottom: 1.75rem; }

.profile-card__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-card__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-border);
  transition: transform 0.3s var(--ease-bounce), background 0.25s ease, color 0.25s ease;
}

.profile-card__social a:hover {
  transform: translateY(-3px);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.profile-card__social svg {
  width: 18px;
  height: 18px;
}

/* Empilha antes que a sobreposição fique apertada demais */
@media (max-width: 860px) {
  .profile-card {
    flex-direction: column;
    align-items: stretch;
    max-width: 32rem;
  }

  .profile-card__photo {
    width: 100%;
  }

  .profile-card__body {
    margin-left: 0;
    margin-top: -3rem;
    text-align: center;
  }

  .profile-card__social { justify-content: center; }
}

/* ── Projetos (página dedicada / seção home) ── */
.projects-page {
  position: relative;
  overflow: hidden;
  padding: 6rem 1.5rem 7rem;
  background: var(--color-section-bg);
}


.projects-page .container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.tag {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: 1px solid rgba(212, 165, 116, 0.2);
}

.project-role {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: 0.5rem;
}

.project-role::before {
  content: "·";
  margin-right: 0.45rem;
  opacity: 0.6;
}

/* ── Contato ────────────────────────────── */
.contact-section {
  position: relative;
  /* clip, não hidden: hidden cria scrollport e desliga o sticky da .contact-headline */
  overflow: clip;
  padding: 6rem 1.5rem 7rem;
}


/* Split: headline (esquerda) + canais (direita) */
.contact-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 3.5rem;
}

/* Headline lado esquerdo */
.contact-headline {
  position: sticky;
  top: 6rem;
}

.contact-headline h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.contact-headline h2 em {
  font-style: normal;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-headline p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 42ch;
}

/* Canais empilhados (lado direito) */
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.channel-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-bounce), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.channel-card:hover {
  transform: translateX(6px);
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: var(--shadow-card-hover);
}

.channel-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-ink);
  transition: transform 0.3s var(--ease-bounce), background 0.3s ease;
}

.channel-card:hover .channel-icon {
  transform: scale(1.1) rotate(-5deg);
  background: rgba(212, 165, 116, 0.2);
}

.channel-icon svg {
  width: 20px;
  height: 20px;
}

.channel-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.channel-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  margin-bottom: 0.15rem;
}

.channel-value {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  word-break: break-word;
}

.channel-arrow {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}

.channel-card:hover .channel-arrow {
  transform: translateX(4px);
  color: var(--color-accent-ink);
}

/* WhatsApp em destaque */
.channel-card--featured {
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  padding: 1.15rem 1.25rem;
}

.channel-card--featured .channel-icon {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.channel-card--featured:hover {
  transform: translateX(4px);
}

/* Form colapsável */
.contact-form-toggle {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.contact-form-toggle summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-display);
  transition: color 0.2s ease, border-color 0.2s ease, border-style 0.2s ease;
  list-style: none;
  user-select: none;
}

.contact-form-toggle summary::-webkit-details-marker { display: none; }

.form-toggle-icon {
  font-size: 1.2rem;
  font-weight: var(--weight-bold);
  transition: transform 0.25s ease;
  display: inline-block;
}

.contact-form-toggle[open] .form-toggle-icon {
  transform: rotate(45deg);
}

.contact-form-toggle summary:hover {
  color: var(--color-accent-ink);
  border-color: rgba(212, 165, 116, 0.5);
  border-style: solid;
}

.contact-form-toggle[open] summary {
  border-style: solid;
  border-color: rgba(212, 165, 116, 0.4);
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

/* Previne overflow silencioso em grid items */
.project-item,
.service-card,
.about-text,
.about-skills,
.channel-card,
.contact-headline,
.contact-channels,
.contact-form {
  min-width: 0;
}

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font-primary);
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
  background-color: var(--color-surface-2);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 110px;
}

.btn-submit {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--color-secondary);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-submit svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-submit:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

/* Dois caminhos de envio: WhatsApp (primário) e e-mail (secundário) */
.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.btn-submit--email {
  background: transparent;
  color: var(--color-accent-ink);
  border: 1px solid var(--color-border);
}

.btn-submit--email:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  border-color: rgba(212, 165, 116, 0.5);
}

.form-optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.form-error,
.form-ok {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
}

.form-error { color: var(--color-error); }
.form-ok    { color: var(--color-success); }

/* Campo reprovado na validação. A cor sozinha não basta: o aria-invalid é o que
   o leitor de tela anuncia, e o texto do erro fica ligado por aria-describedby. */
.form-group input[aria-invalid='true'],
.form-group textarea[aria-invalid='true'] {
  border-color: var(--color-error);
}

/* Campo isca do antispam. Sai da tela sem usar display:none nem visibility:
   bot bom ignora campo escondido desse jeito, e é justamente quem preenche
   tudo que a gente quer pegar. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .form-actions { grid-template-columns: 1fr; }
}

/* ── Skip link ──────────────────────────── */
/* Fora da tela até receber foco. Não usa display: none nem visibility: hidden,
   que tirariam o link da ordem de tabulação e o tornariam inalcançável. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: transform 0.18s var(--ease-smooth);
}

.skip-link:focus {
  transform: translateY(0);
}

/* O main só recebe foco programaticamente (via skip link ou âncora).
   O anel do :focus-visible global cercaria a página inteira. */
.home[tabindex='-1']:focus {
  outline: none;
}

/* ── Foco acessível (keyboard nav) ──────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-hero:focus-visible,
.btn-hero-outline:focus-visible {
  outline-offset: 4px;
}

/* ── Scroll reveal ──────────────────────── */
.reveal,
.reveal-left,
.reveal-right {
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal       { opacity: 0; transform: translateY(32px); }
.reveal-left  { opacity: 0; transform: translateX(-32px); }
.reveal-right { opacity: 0; transform: translateX(32px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }
.reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal:nth-child(8) { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1; transform: none; transition: none;
  }
  .hero-content h1, .hero-content .lead, .btn-hero,
  .page-hero h1, .page-hero .lead,
  .hero-tagline, .hero-meta {
    animation: none;
  }
}

/* Scroll progress: linha dourada no topo */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 60%, #f4d8a8 100%);
  z-index: 1001;
  pointer-events: none;
  will-change: width;
  transition: width 0.08s linear;
}

/* ─────────────────────────────────────────
   RESPONSIVO
───────────────────────────────────────── */
@media (max-width: 960px) {
  .about-grid    { grid-template-columns: 1fr 1.1fr; gap: 2.5rem; }
  .contact-split { gap: 2.5rem; }
  .services-grid { gap: 1.25rem; }

  /* Reafirma o modificador: a regra genérica acima o sobrescreveria entre 769 e 960px */
  .about-grid--skills-only { grid-template-columns: 1fr; }
}

/* Tablet médio — colapsa grids de 2 colunas antes do mobile */
@media (max-width: 680px) {
  .about-grid,
  .contact-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-text p { max-width: 100%; }
  .contact-headline { position: static; top: auto; }
  .contact-headline p { max-width: 100%; }
}

@media (max-width: 768px) {
  .hero {
    padding: 7rem 1.25rem 5rem;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-meta { gap: 1.5rem 2rem; }

  .section-head { padding: 0 1.25rem; }

  .services-grid  { grid-template-columns: 1fr; gap: 1.25rem; }
  .services       { padding: 4rem 0; }

  .page-hero { padding: 7rem 1.25rem 3rem; }

  .about-grid,
  .contact-split { grid-template-columns: 1fr; gap: 2rem; }

  .about-section   { padding: 4rem 1.25rem; }
  .about-text p    { max-width: 100%; }
  .projects        { padding: 3rem 0; }
  .projects > .section-title { padding: 0 1.25rem; }
  .projects-page   { padding: 4rem 1.25rem; }
  .contact-section { padding: 4rem 1.25rem; }
  .contact-form    { padding: 1.5rem; }

  .contact-headline p { max-width: 100%; }

  .footer {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .hero   { padding: 6.5rem 1rem 4rem; }
  .page-hero { padding: 6.5rem 1rem 2.5rem; }
  .skills-group { grid-template-columns: 1fr; gap: 0.5rem; }
  .contact-form  { padding: 1.25rem; }
}

/* ═══ Enxugamento mobile ══════════════════════════════════════
   A maior parte de quem abre o portfólio abre no celular, e a 375px a home
   pedia 9.648px de rolagem: quase 12 telas. Aqui tipografia, respiro e botões
   encolhem juntos.

   Dois pisos que este bloco nunca atravessa:
   · 44px de altura em qualquer coisa clicável, que é o alvo mínimo de toque;
   · 16px de fonte em input e textarea, porque abaixo disso o iOS dá zoom
     sozinho quando o campo recebe foco e joga o layout pro lado. */
@media (max-width: 768px) {
  /* Hero: a tagline puxava três linhas de 24px antes do primeiro botão. */
  .hero-tagline    { font-size: var(--text-lg); }
  .hero-meta       { padding-top: 1.5rem; gap: 1.25rem 1.5rem; }
  .hero-meta-value { font-size: var(--text-sm); }

  .highlights       { padding-block: 2rem; }
  .highlight__value { font-size: var(--text-xl); }
  .highlight__label { font-size: var(--text-xs); }

  /* O padding de desktop comia quase um quinto da largura útil a 375px. */
  .service-card { padding: 1.5rem 1.25rem; }
  .project-item { padding: 1.25rem; }
  .channel-card { padding: 1rem 1.15rem; }

  .service-card p,
  .project-item p { font-size: var(--text-sm); }

  /* Parágrafo longo e centralizado em coluna estreita cansa a leitura: a bio
     do card de perfil vai pra esquerda só no mobile. */
  .profile-card__bio {
    text-align: left;
    font-size: var(--text-sm);
  }

  /* Botões menores no texto e no respiro lateral. O min-height segura o alvo
     de toque, e o flex recentraliza o rótulo que o padding menor desalinharia. */
  .btn-hero,
  .btn-hero-outline,
  .project-item .btn,
  .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    font-size: var(--text-sm);
  }

  .tag { font-size: var(--text-xs); padding: 0.15rem 0.6rem; }

  /* Os dois pisos do topo deste bloco, aplicados. O campo do formulário sobe
     pra 16px em vez de descer junto com o resto: a 14px o iOS dava zoom ao
     focar e o visitante perdia o enquadramento da página. */
  .form-group input,
  .form-group textarea { font-size: var(--text-base); }

  .theme-toggle { width: 44px; height: 44px; }

  /* Ícone social de 32px é confortável no mouse e apertado no dedo. */
  .footer-social a {
    width: 44px;
    height: 44px;
  }
}