/*
 * ============================================================
 * styles.css — lp-cristian
 * ============================================================
 * FUNÇÃO DESTE ARQUIVO:
 * Arquivo CSS principal da landing page. Define a aparência
 * visual de TODOS os componentes, importando reset e tokens
 * como primeiras linhas.
 *
 * ESTRUTURA DO ARQUIVO (ordem visual de cima para baixo):
 *  1. @import (reset e tokens)
 *  2. Base (html, body)
 *  3. Skip link (acessibilidade)
 *  4. Container (centralizador de conteúdo)
 *  5. Animações
 *  6. Header fixo
 *  7. Logo
 *  8. Navegação desktop
 *  9. Toggle de idioma
 *  10. Menu mobile (hambúrguer + painel lateral)
 *  11. Botões reutilizáveis (.btn)
 *  12. Seções (layout base)
 *  13. Hero (seção inicial)
 *  14. Sobre (fundo escuro)
 *  15. Soluções (fundo claro)
 *  16. Resultados (fundo escuro)
 *  17. Contato (fundo escuro)
 *  18. Footer
 * ============================================================
 */

/* ── 1. IMPORTS ─────────────────────────────────────────────
 * @import carrega outros arquivos CSS como se o conteúdo deles
 * estivesse escrito aqui. Ordem importante: reset antes dos
 * tokens, ambos antes de qualquer estilo deste arquivo.
 */
@import './reset.css';
@import './tokens.css';


/* ── 2. BASE ────────────────────────────────────────────────
 * Estilos fundamentais de html e body que se propagam para
 * todos os elementos filhos via herança CSS.
 */
html {
  /* scroll-behavior:smooth ativa a rolagem suave nativa do
   * navegador para links de âncora (cliques em href="#secao").
   * Completado pelo smooth scroll manual em main.js para
   * compensar o header fixo. */
  scroll-behavior: smooth;
  overscroll-behavior: none; /* elimina o efeito "bounce" no iOS */
  background: var(--color-bg); /* cor de fundo fallback */
}

body {
  font-family: var(--font-body); /* Sora como fonte principal */
  font-size: 1rem;               /* 16px — tamanho base */
  color: var(--color-text);      /* azul-marinho escuro */
  /* Gradiente de fundo: branco no topo → cinza-lilás na base.
   * background-attachment:fixed mantém o gradiente parado
   * enquanto o conteúdo rola — efeito parallax sutil. */
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overscroll-behavior: none;
}


/* ── 3. SKIP LINK ───────────────────────────────────────────
 * Elemento de acessibilidade. Fica escondido acima da viewport
 * (top: -40px) e aparece visível apenas quando recebe foco
 * via teclado (Tab).
 *
 * Permite que usuários de teclado e leitores de tela pulem
 * diretamente para o conteúdo principal, sem navegar por todo
 * o header. Obrigatório para conformidade com WCAG.
 */
.skip-link {
  position: absolute;
  top: -40px;  /* escondido acima da tela */
  left: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 8px 16px;
  z-index: 9999; /* na frente de absolutamente tudo */
  border-radius: 0 0 var(--radius-md) 0; /* cantos inferiores arredondados */
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.2s; /* anima a entrada suave */
}
/* Quando o link recebe foco (Tab), desce para ficar visível */
.skip-link:focus { top: 0; }


/* ── 4. CONTAINER ───────────────────────────────────────────
 * Elemento centralizador usado em TODAS as seções.
 * Limita a largura máxima do conteúdo e adiciona padding
 * lateral responsivo para não colar nas bordas da tela.
 *
 * margin-inline: auto → centraliza horizontalmente.
 * padding-inline → padding apenas nas laterais (esquerda e direita).
 */
.container {
  width: 100%;
  max-width: 1200px; /* conteúdo nunca fica mais largo que 1200px */
  margin-inline: auto;
  padding-inline: var(--space-5); /* 20px lateral em telas pequenas */
}

/* Em telas maiores que 640px, aumenta o padding lateral */
@media (min-width: 640px) {
  .container { padding-inline: var(--space-8); } /* 32px */
}
/* Em telas maiores que 1024px, padding ainda maior */
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-10); } /* 40px */
}


/* ── 5. ANIMAÇÕES ───────────────────────────────────────────
 * Definições dos @keyframes e das classes utilitárias
 * que aplicam as animações nos elementos.
 */

/* Entrada de baixo para cima com fade — mesma da bio-cristian */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Levitação suave em loop — aplicada no avatar */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/*
 * Classe utilitária para animação de entrada ao carregar.
 * opacity:0 inicial previne flash (piscar) antes da animação.
 * 'forwards' mantém o estado final (opacity:1) após terminar.
 */
.animate-fade-in-up {
  animation: fade-in-up 0.6s var(--ease) forwards;
  opacity: 0; /* começa invisível */
}

/* Animação de flutuação contínua */
.animate-float { animation: float 3s ease-in-out infinite; }

/* Usada no avatar (hero e contato) — faz a foto flutuar */
.animate-avatar {
  animation: float 3s ease-in-out infinite;
  border-radius: 50%;    /* recorte circular no contêiner do avatar */
  display: inline-block; /* necessário para border-radius funcionar */
}

/*
 * Scroll Reveal — elementos com .reveal começam invisíveis
 * e transitam para visíveis quando o JS adiciona .is-visible.
 *
 * opacity:0 + translateY(20px) = invisível e deslocado para baixo.
 * transition define a animação ao mudar de estado.
 */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
/* Estado visível: adicionado pelo IntersectionObserver em main.js */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── 6. HEADER ──────────────────────────────────────────────
 * Barra de navegação fixada no topo da tela.
 * Permanece visível mesmo quando o usuário rola a página.
 */
.site-header {
  position: fixed;  /* fixado na janela, não no documento */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;     /* na frente de todo o conteúdo da página */
  border-bottom: 1px solid var(--color-border);
  /* Fundo semitransparente com desfoque (efeito vidro fosco) */
  background: rgba(244, 244, 249, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Layout interno do header: logo à esquerda, nav no centro,
 * controles à direita. justify-content:space-between distribui. */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px; /* altura fixa do header — usada no smooth scroll */
}


/* ── 7. LOGO ────────────────────────────────────────────────
 * A logo não é uma imagem direta — é uma "máscara CSS".
 * Funciona assim: cria um retângulo colorido e usa a imagem
 * PNG como recorte (mask). O resultado é que apenas a forma
 * da logo fica colorida, permitindo trocar a cor via CSS
 * sem precisar de um PNG diferente.
 */
.logo-link {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
}
.logo-link:hover { opacity: 0.75; } /* desbota levemente no hover */

.logo-mask {
  display: block;
  height: 32px;
  /* aspect-ratio preserva a proporção original do PNG da logo:
   * largura/altura original = 1652/1063 */
  aspect-ratio: 1652 / 1063;
  /* Cor de preenchimento da logo — muda a cor sem trocar o PNG */
  background-color: var(--color-primary);
  /* mask-image usa o PNG como recorte: apenas os pixels
   * opacos do PNG ficam visíveis. Os transparentes são cortados. */
  -webkit-mask-image: url(/assets/images/logo.png);
  mask-image: url(/assets/images/logo.png);
  -webkit-mask-size: contain;    /* redimensiona mantendo proporção */
  mask-size: contain;
  -webkit-mask-repeat: no-repeat; /* não repete o padrão */
  mask-repeat: no-repeat;
  -webkit-mask-position: center;  /* centraliza a máscara */
  mask-position: center;
}


/* ── 8. NAVEGAÇÃO DESKTOP ───────────────────────────────────
 * Links de navegação visíveis apenas em telas ≥ 768px.
 * Em telas menores, ficam escondidos (display:none) e o
 * menu hambúrguer é exibido no lugar.
 */
.nav-links {
  display: none; /* oculto por padrão (mobile first) */
  align-items: center;
  gap: var(--space-2); /* 8px entre os links */
}

/* Em telas a partir de 768px, mostra a navegação */
@media (min-width: 768px) {
  .nav-links { display: flex; }
}

.nav-links a {
  white-space: nowrap; /* impede que o texto do link quebre linha */
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.875rem;  /* 14px */
  font-weight: 500;
  color: rgba(0, 0, 43, 0.7); /* azul com 70% de opacidade */
  transition: background 0.2s, color 0.2s;
}
.nav-links a:hover {
  background: var(--color-surface-alt); /* fundo cinza claro no hover */
  color: var(--color-text);
}


/* ── 9. TOGGLE DE IDIOMA ────────────────────────────────────
 * Grupo PT/EN no header. Estrutura similar à bio-cristian.
 */

/* Grupo de controles à direita: toggle de idioma + hambúrguer */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Contêiner "pílula" dos botões PT/EN */
.lang-toggle {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 4px;
  backdrop-filter: blur(8px); /* vidro fosco */
  gap: 2px;
}

/* Cada botão do toggle */
.lang-toggle__btn {
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  line-height: 1.5;
}
.lang-toggle__btn:hover { color: var(--color-text); }

/* Botão ativo — adicionado via JS quando o idioma está selecionado */
.lang-toggle__btn.is-active {
  background: var(--navy-base);
  color: var(--color-text-inverse);
}


/* ── 10A. BOTÃO HAMBÚRGUER ───────────────────────────────────
 * Ícone de três linhas (≡) que abre o menu mobile.
 * Visível apenas em telas menores que 768px.
 */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background 0.2s;
}
.menu-toggle:hover { background: var(--color-surface-alt); }
.menu-toggle svg { width: 20px; height: 20px; }

/* Esconde o hambúrguer em telas grandes (onde o nav aparece) */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
}


/* ── 10B. MENU MOBILE ───────────────────────────────────────
 * Painel de navegação que aparece da direita em dispositivos
 * móveis. Composto por:
 *  - Backdrop: fundo escurecido semitransparente
 *  - Panel: o painel branco com os links
 *
 * O JS em main.js adiciona/remove a classe .is-open no
 * #mobile-menu para abrir e fechar.
 */

/* O overlay que cobre toda a tela (posição fixed) */
.mobile-menu {
  position: fixed;
  inset: 0; /* inset: top right bottom left = tudo 0 */
  z-index: 99; /* abaixo do header (z-index:100) */
  visibility: hidden;   /* ocultado mas não removido do DOM */
  pointer-events: none; /* cliques passam através quando fechado */
}
/* Estado aberto: torna o overlay clicável e visível */
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Fundo escurecido semitransparente (backdrop) */
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* preto com 40% de opacidade */
  opacity: 0;
  transition: opacity 0.25s;
}
/* Quando aberto, o backdrop aparece gradualmente */
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

/* O painel branco que desliza da direita */
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* min() escolhe o menor valor: 80% da viewport ou 288px.
   * Garante que o painel não seja maior que 288px em tablets. */
  width: min(80vw, 288px);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Começa deslocado 100% para fora (à direita) */
  transform: translateX(100%);
  transition: transform 0.3s var(--ease); /* anima o deslizamento */
}
/* Quando aberto, desliza de volta para a posição normal */
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

/* Botão ✕ para fechar — alinhado à direita dentro do painel */
.mobile-menu__close {
  align-self: flex-end; /* alinha à direita no flex column */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background 0.2s;
}
.mobile-menu__close:hover { background: var(--color-surface-alt); }
.mobile-menu__close svg { width: 20px; height: 20px; }

/* Links de navegação dentro do painel mobile */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px entre os links */
}
.mobile-menu__nav a {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 10px var(--space-4);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Hover nos links: fundo azul-marinho, texto branco */
.mobile-menu__nav a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}


/* ── 11. BOTÕES REUTILIZÁVEIS (.btn) ─────────────────────────
 * Classe base para todos os botões de ação da página.
 * Combinada com classes modificadoras (.btn-primary, .btn-outline)
 * para criar variações visuais.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;            /* espaço entre ícone e texto */
  border-radius: var(--radius-pill); /* forma de pílula */
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  text-decoration: none;
  white-space: nowrap; /* impede que o texto quebre linha */
}
/* No hover: sobe 1px criando sensação de elevação */
.btn:hover { transform: translateY(-1px); }

/* Botão primário: gradiente azul-marinho escuro → menos escuro */
.btn-primary {
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  color: var(--color-text-inverse);
}
/* No hover: inverte o gradiente e adiciona sombra colorida */
.btn-primary:hover {
  background: linear-gradient(135deg, var(--navy-lighter) 0%, var(--navy-base) 100%);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 43, 0.5);
}

/* Botão outline: transparente com borda e texto azul-marinho */
.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* No hover: preenche com azul-marinho e texto branco */
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Ícones dentro dos botões: tamanho fixo, flex-shrink:0
 * impede que encolha quando o espaço é limitado */
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }


/* ── 12. SEÇÕES — LAYOUT BASE ───────────────────────────────
 * Todas as seções (<section>) usam padding-block para
 * espaçamento vertical interno consistente.
 */
.section {
  padding-block: var(--space-16); /* 64px acima e abaixo */
}

/* Em telas menores, reduz o padding para não desperdiçar espaço */
@media (max-width: 767px) {
  .section { padding-block: var(--space-12); } /* 48px */
}


/* ── 13. HERO (#inicio) ──────────────────────────────────────
 * Primeira seção da página — ocupa a tela inteira (100vh).
 * Contém o nome, headline, subheadline, CTAs e card de avatar.
 */
#inicio {
  position: relative; /* para os blobs ficarem atrás do conteúdo */
  min-height: 100vh;  /* pelo menos a altura total da tela */
  display: flex;
  align-items: center; /* centraliza verticalmente o conteúdo */
  padding-block: var(--space-10);
  /* Compensa o header fixo de 64px + padding interno */
  padding-top: calc(64px + var(--space-10));
  /* Gradiente radial do centro para as bordas */
  background: radial-gradient(ellipse at center, #ffffff 0%, hsl(220, 10%, 95%) 52%, hsl(220, 8%, 90%) 100%);
  overflow: hidden; /* recorta os blobs que extravasam */
}

/* Blobs decorativos de fundo no hero */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  background: hsla(240, 100%, 15%, 0.1);
}
/* Blob superior esquerdo */
.hero-blob--tl { width: 200px; height: 200px; top: 96px; left: -48px; }
/* Blob inferior direito */
.hero-blob--br { width: 220px; height: 220px; bottom: 80px; right: -48px; }

/*
 * Grid de duas colunas no hero:
 * Coluna esquerda (texto): 1.2fr = 60% da largura
 * Coluna direita (card): 0.8fr = 40% da largura
 *
 * Em mobile (padrão), é uma única coluna — grid sem colunas.
 * A partir de 1024px (desktop), duas colunas lado a lado.
 */
.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-10);
  }
}

/* Badge de especialidades (não visível na versão atual do HTML) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  margin-bottom: var(--space-4);
  pointer-events: none;
}

/* Nome principal — tamanho responsivo via clamp */
.hero-name {
  /* clamp(mínimo, ideal, máximo):
   * em telas pequenas: 1.95rem
   * em telas médias: 8.4% da largura da viewport
   * em telas grandes: no máximo 4.5rem */
  font-size: clamp(1.95rem, 8.4vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* Headline principal: frase de impacto abaixo do nome */
.hero-headline {
  margin-top: 12px;
  font-size: clamp(1rem, 4.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy-mid); /* azul-marinho visível, não tão escuro */
}

/* Subtexto explicativo abaixo da headline */
.hero-subheadline {
  margin-top: var(--space-5);
  max-width: 560px; /* limita a largura de leitura */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
@media (min-width: 640px) {
  .hero-subheadline { font-size: 1.0625rem; } /* 17px em telas maiores */
}

/* Contêiner dos botões de CTA do hero */
.hero-ctas {
  display: flex;
  flex-direction: column; /* empilhados em mobile */
  gap: 10px;
  margin-top: var(--space-8);
}
/* Em telas maiores, os botões ficam lado a lado */
@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
    align-items: center;
  }
}

/* Botões ocupam 100% em mobile, largura auto em desktop */
.hero-ctas .btn { width: 100%; }
@media (min-width: 640px) {
  .hero-ctas .btn { width: auto; }
}

/* Card branco com o avatar na coluna direita do hero */
.hero-avatar-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid hsl(240, 20%, 80%);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  box-shadow: 0 24px 60px -36px hsla(240, 100%, 8%, 0.55);
  backdrop-filter: blur(12px); /* efeito vidro fosco */
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 640px) {
  .hero-avatar-card { padding: var(--space-8); } /* mais padding em telas maiores */
}

/* Foto do avatar dentro do card */
.hero-avatar-img {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%; /* circular */
  margin-inline: auto; /* centraliza horizontalmente */
  object-fit: cover;
  border: 4px solid var(--navy-base);
}
@media (min-width: 640px) {
  .hero-avatar-img { width: 144px; height: 144px; } /* maior em tablets */
}

/* "Marketing · Desenvolvimento · IA" acima da descrição no card */
.hero-avatar-eyebrow {
  margin-top: var(--space-5);
  font-size: 0.6875rem; /* 11px — bem pequeno */
  font-weight: 600;
  letter-spacing: 0.16em; /* letras bem espaçadas */
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Texto descritivo no card do avatar */
.hero-avatar-blurb {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Seta animada que indica "role para baixo" */
.scroll-indicator {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.scroll-indicator a {
  color: rgba(0, 0, 43, 0.4);
  transition: color 0.2s;
}
.scroll-indicator a:hover { color: var(--color-text-muted); }
.scroll-indicator svg { width: 24px; height: 24px; }


/* ── 14. SOBRE (#sobre) — FUNDO ESCURO ──────────────────────
 * Seção "Quem sou" com fundo degradê azul-marinho escuro.
 * Contrasta com o hero claro, criando ritmo visual alternado.
 */
#sobre {
  /* Degradê vertical do azul mais escuro para menos escuro */
  background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  color: var(--color-text-inverse); /* texto branco nesta seção */
}

/* Grid de duas colunas: bio (esquerda) e highlights (direita) */
.sobre-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  /* Bio ocupa 1.3fr (~57%), highlights 0.7fr (~30%) */
  .sobre-grid { grid-template-columns: 1.3fr 0.7fr; }
}

/* Cabeçalho centralizado acima do grid */
.sobre-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* "QUEM SOU" — texto discreto acima do título */
.sobre-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); /* branco com 55% de opacidade */
  margin-bottom: var(--space-3);
}

/* Título da seção Sobre */
.sobre-title {
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* Card com a biografia — efeito vidro fosco sobre fundo escuro */
.sobre-bio {
  background: rgba(255, 255, 255, 0.1); /* branco muito translúcido */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: var(--space-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* espaço entre os parágrafos */
}
@media (min-width: 640px) {
  .sobre-bio { padding: var(--space-8); border-radius: 24px; }
}

/* Parágrafos dentro da bio */
.sobre-bio p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8); /* branco com 80% de opacidade */
}

/* Parágrafo de destaque com borda lateral esquerda */
.sobre-bio p.bio-quote {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  padding-left: var(--space-4);
  font-style: italic;
  color: rgba(255, 255, 255, 0.9); /* um pouco mais opaco */
}

/* Coluna direita com os três "highlight cards" */
.sobre-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Cada card de destaque: ícone + texto */
.highlight-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(255, 255, 255, 0.95); /* quase totalmente branco */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: var(--space-4);
  box-shadow: 0 18px 40px -34px hsla(240, 100%, 8%, 0.65);
  transition: transform 0.3s var(--ease);
}
/* Sobe 2px no hover */
.highlight-card:hover { transform: translateY(-2px); }

/* Ícone quadrado com gradiente navy */
.highlight-icon {
  flex-shrink: 0; /* não encolhe em layouts apertados */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-lighter) 0%, var(--navy-base) 100%);
  color: #ffffff; /* ícone branco sobre fundo navy */
}
.highlight-icon svg { width: 20px; height: 20px; }

/* Texto descritivo do highlight */
.highlight-card span {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text); /* texto escuro (card é claro) */
  line-height: 1.3;
}


/* ── 15. SOLUÇÕES (#solucoes) — FUNDO CLARO ─────────────────
 * Seção "O que eu faço" com os 4 cards de serviço.
 * Fundo claro, alternando com a seção Sobre (escura).
 */
#solucoes {
  background: radial-gradient(ellipse at center, #ffffff 0%, hsl(220, 10%, 95%) 52%, hsl(220, 8%, 90%) 100%);
}

/* Cabeçalho centralizado acima do grid de soluções */
.section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
@media (min-width: 640px) {
  .section-header { margin-bottom: var(--space-12); }
}

.section-header h2 {
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.section-header p {
  max-width: 640px;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Grid de cards: 1 coluna em mobile, 2 colunas em desktop */
.solucoes-grid {
  display: grid;
  grid-template-columns: 1fr; /* uma coluna */
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .solucoes-grid { grid-template-columns: 1fr 1fr; } /* duas colunas */
}

/* Cada card de solução */
.solution-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid hsl(240, 20%, 80%);
  border-radius: 18px;
  padding: var(--space-4);
  box-shadow: 0 18px 40px -34px hsla(240, 100%, 8%, 0.6);
  /* Recebe transition-delay via style inline no HTML para
   * criar o efeito cascata de entrada (0, 0.1s, 0.15s, 0.2s) */
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.solution-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 43, 0.25); /* borda mais visível no hover */
}
@media (min-width: 640px) {
  .solution-card { border-radius: 20px; padding: var(--space-6); }
}

/* Ícone quadrado no topo do card */
.solution-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-surface-alt); /* cinza claro */
  color: var(--navy-mid);
  margin-bottom: var(--space-4);
}
.solution-icon svg { width: 24px; height: 24px; }

.solution-card h3 {
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .solution-card h3 { font-size: 1.125rem; } /* 18px */
}
.solution-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}


/* ── 16. RESULTADOS (#resultados) — FUNDO ESCURO ────────────
 * Seção "Resultados" com 3 cards de casos de sucesso.
 * Fundo escuro, voltando ao padrão alternado.
 */
#resultados {
  background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-dark) 100%);
}

/* Ajuste de cores para o cabeçalho sobre fundo escuro */
#resultados .section-header h2,
.resultados-title {
  color: #ffffff; /* título branco */
}

#resultados .section-header p,
.resultados-subtitle {
  color: rgba(255, 255, 255, 0.65); /* subtítulo branco translúcido */
  max-width: 600px;
  margin-inline: auto;
}

/* Grid dos cards de projeto: 1→2→3 colunas conforme a tela cresce */
.resultados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .resultados-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .resultados-grid { grid-template-columns: 1fr 1fr 1fr; } /* 3 colunas */
}

/* Cada card de projeto: layout em coluna com altura uniforme */
.project-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: var(--space-6);
  box-shadow: 0 20px 44px -34px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Título do projeto */
.project-card h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  line-height: 1.35;
}
@media (min-width: 640px) {
  .project-card h3 { font-size: 1.0625rem; }
}

/* Corpo do card: flex:1 faz todos os cards da linha terem a
 * mesma altura, independente do tamanho do conteúdo */
.project-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Cada item (Problema, Solução, Resultado) */
.project-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label "PROBLEMA", "SOLUÇÃO", "RESULTADO" */
.project-label {
  font-size: 0.6875rem; /* 11px — bem pequeno */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 43, 0.4);
  display: block;
}

/* Texto descritivo de cada item */
.project-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Item "Resultado" tem visual diferenciado (destaque em azul) */
.project-result .project-label {
  color: var(--navy-base); /* label azul-marinho para destacar */
}
.project-result .project-text {
  font-weight: 600;    /* texto em negrito */
  color: var(--color-text); /* cor mais escura = mais destaque */
}

/* Linha divisória horizontal entre Problema/Solução/Resultado */
.project-divider {
  height: 1px;
  background: rgba(0, 0, 43, 0.06); /* linha quase invisível */
  margin-block: 2px;
}

/* Bloco de texto de experiência profissional abaixo dos cards */
.experience-block {
  margin-top: var(--space-12);
  max-width: 720px;
  margin-inline: auto; /* centraliza */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: var(--space-6);
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 640px) {
  .experience-block { padding: var(--space-8); margin-top: var(--space-16); }
}

/* Label "ONDE CONSTRUÍ ESSE REPERTÓRIO" */
.experience-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: var(--space-6);
}

/* Texto de experiência profissional */
.experience-text {
  font-size: 0.9375rem;
  line-height: 1.75; /* entrelinhas generosas para fácil leitura */
  color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 640px) {
  .experience-text { font-size: 1rem; }
}


/* ── 17. CONTATO (#contato) — FUNDO ESCURO ──────────────────
 * Seção final de conversão com CTA do WhatsApp e e-mail.
 */
#contato {
  /* Degradê do escuro profundo até o navy-mid */
  background: linear-gradient(180deg, hsl(240, 100%, 4%) 0%, var(--navy-mid) 100%);
}

/* Card branco centralizado com avatar, título, texto e botões */
.contato-card {
  max-width: 768px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid hsl(240, 20%, 80%);
  border-radius: 20px;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  box-shadow: 0 24px 60px -36px hsla(240, 100%, 8%, 0.55);
}
@media (min-width: 640px) {
  .contato-card { border-radius: 24px; padding: var(--space-10) var(--space-6); }
}
@media (min-width: 768px) {
  .contato-card { padding: var(--space-10); }
}

/* Contêiner do avatar no card de contato */
.contato-avatar-wrap {
  display: block;
  width: fit-content; /* encolhe para o tamanho da imagem */
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* Avatar circular no card de contato */
.contato-avatar {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--navy-base);
}

/* "Vamos conversar?" */
.contato-card h2 {
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Texto de convite abaixo do título */
.contato-card p {
  max-width: 640px;
  margin-inline: auto;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
  .contato-card p { font-size: 1rem; }
}

/* Contêiner dos botões de contato */
.contato-ctas {
  display: flex;
  flex-direction: column; /* empilhados em mobile */
  gap: 10px;
  align-items: center;
}
@media (min-width: 480px) {
  .contato-ctas { flex-direction: row; justify-content: center; }
}

/* Botão primário do contato (WhatsApp) */
.contato-btn-primary {
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  color: var(--color-text-inverse);
  padding: 14px 28px;
  width: 100%; /* 100% em mobile */
}
.contato-btn-primary:hover {
  background: linear-gradient(135deg, var(--navy-lighter) 0%, var(--navy-base) 100%);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 43, 0.5);
}

/* Botão ghost (e-mail): transparente com borda */
.contato-btn-ghost {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 14px 28px;
  width: 100%;
}
.contato-btn-ghost:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Em telas maiores, os botões de contato voltam para largura automática */
@media (min-width: 480px) {
  .contato-btn-primary,
  .contato-btn-ghost { width: auto; }
}


/* ── 18. FOOTER ──────────────────────────────────────────────
 * Rodapé final com copyright.
 */
.site-footer {
  border-top: 1px solid var(--color-border);
  /* Gradiente claro do surface-alt para o bg */
  background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-bg) 100%);
  padding-block: var(--space-8);
  text-align: center;
}

.site-footer p {
  font-size: 0.6875rem; /* 11px — bem discreto */
  color: var(--color-text-muted);
}