/* ============================================================
   ARQUIVO: optimized.css
   OBJETIVO:
   Controlar todo o visual do site: cores, fontes, fundos,
   botões, cards, seções, modais, responsividade e impressão.

   PADRÃO DE DOCUMENTAÇÃO:
   Antes de cada bloco de CSS existe um comentário explicando
   o que aquele bloco faz e onde ele interfere no site.

   ORIENTAÇÃO:
   Para mudar cores e combinações visuais, comece pelo :root.
   Para mudar tamanho, espaçamento ou comportamento específico,
   procure a classe da seção desejada.
   ============================================================ */


/* Importa as fontes usadas no site.
   Inter é usada para textos comuns.
   Manrope é usada para títulos. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap");


/* Define variáveis globais do site.
   Este é o principal painel de controle visual.
   Altere este bloco para testar novas paletas, fundos, fontes,
   botões, bordas, sombras e cores gerais. */
:root {
  /* Fonte usada em textos comuns, parágrafos, descrições,
     categorias e botões. */
  --fonte-texto: "Inter", "Segoe UI", Arial, sans-serif;

  /* Fonte usada em títulos principais, títulos de seção e
     títulos dos cards. */
  --fonte-titulo: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;

  /* Primeira cor do gradiente alternativo do Hero/topo.
     Essa cor é usada se você remover a imagem e quiser usar apenas cor. */
  --cor-hero-inicio: #f0e2d7;

  /* Cor intermediária do gradiente alternativo do Hero/topo. */
  --cor-hero-meio: #CEBCAE;

  /* Cor final do gradiente alternativo do Hero/topo. */
  --cor-hero-fim: #8C644D;

  /* Imagem usada no fundo da parte superior do site.
     Como o CSS está dentro da pasta css, o caminho correto é ../imgs/... */
  --imagem-hero: url("../imgs/engenharia-de-dados4.webp");

  /* Primeira cor da máscara sobre a imagem do topo.
     O último número controla a transparência:
     0.00 = imagem totalmente visível
     0.30 = máscara leve
     0.70 = máscara forte */
  --hero-mascara-inicio: rgba(42, 33, 29, 0.58);

  /* Segunda cor da máscara sobre a imagem do topo. */
  --hero-mascara-fim: rgba(140, 100, 77, 0.28);

  /* Posição da imagem de fundo do topo.
     Exemplos: center, top, bottom, center 35%. */
  --hero-posicao-imagem: center;

  /* Tamanho da imagem de fundo do topo.
     cover preenche toda a seção sem deformar a imagem. */
  --hero-tamanho-imagem: cover;

  /* Fundo alternativo sem imagem para o topo.
     Use apenas se quiser trocar a classe .hero para gradiente puro. */
  --hero-background-gradiente:
    linear-gradient(
      135deg,
      var(--cor-hero-inicio) 0%,
      var(--cor-hero-meio) 29%,
      var(--cor-hero-fim) 50%
    );

  /* Cor do texto pequeno "Olá, seja bem-vindo!" no Hero. */
  --cor-hero-label: #dad5d3fb;

  /* Cor do título grande "Eu sou Luciano Magalhães" no Hero. */
  --cor-hero-titulo: #EAFFDC;

  /* Cor do subtítulo profissional abaixo do nome no Hero. */
  --cor-hero-subtitulo: #fceee7;

  /* Fundo geral do body, atrás de todas as seções. */
  --cor-fundo-geral: #F2F2F2;

  /* Fundo da seção Sobre. */
  --cor-fundo-sobre: #FFFDFC;

  /* Fundo da seção Cursos.
     Para mudar o fundo da seção Cursos, altere esta variável. */
  --cor-fundo-cursos: hwb(21 91% 4%);

  /* Fundo da seção Projetos. */
  --cor-fundo-projetos: #FFFDFC;

  /* Fundo dos cards, caixas internas e modais claros. */
  --cor-fundo-card: #FDFFFC;

  /* Primeira cor do gradiente alternativo da seção Contato.
     Essa cor é usada se você remover a imagem e quiser usar apenas cor. */
  --cor-contato-inicio: #f0e2d7;

  /* Segunda cor do gradiente alternativo da seção Contato e fundo do rodapé. */
  --cor-contato-fim: #462f24fb;

  /* Imagem usada no fundo da parte inferior/Contato.
     Como o CSS está dentro da pasta css, o caminho correto é ../imgs/... */
  --imagem-contato: url("../imgs/engenharia-de-dados4.webp");

  /* Primeira cor da máscara sobre a imagem da seção Contato.
     O último número controla a transparência:
     0.00 = imagem totalmente visível
     0.30 = máscara leve
     0.70 = máscara forte */
  --contato-mascara-inicio: rgba(42, 33, 29, 0.26);

  /* Segunda cor da máscara sobre a imagem da seção Contato. */
  --contato-mascara-fim: rgba(140, 100, 77, 0.38);

  /* Posição da imagem de fundo da seção Contato.
     Exemplos: center, top, bottom, center 35%. */
  --contato-posicao-imagem: center;

  /* Tamanho da imagem de fundo da seção Contato.
     cover preenche toda a seção sem deformar a imagem. */
  --contato-tamanho-imagem: cover;

  /* Fundo alternativo sem imagem para a seção Contato.
     Use apenas se quiser trocar a classe .contact-section para gradiente puro. */
  --contato-background-gradiente:
    linear-gradient(
      135deg,
      var(--cor-contato-inicio) 0%,
      var(--cor-contato-fim) 20%
    );

  /* Cor do rótulo "Contato". */
  --cor-contato-label: #5e3e2efb;

  /* Cor do título "Fale comigo!" na seção Contato. */
  --cor-contato-titulo: #ffffff;

  /* Cor principal dos textos comuns. */
  --cor-texto-principal: #2A211D;

  /* Cor de textos secundários, descrições e categorias. */
  --cor-texto-secundario: #6F5B51;

  /* Cor dos títulos principais das seções e cards. */
  --cor-titulo: #241B17;

  /* Cor clara para textos sobre fundo escuro. */
  --cor-texto-claro: #FFFDFC;

  /* Cor clara secundária para textos suaves sobre fundo escuro. */
  --cor-texto-claro-secundario: #EFE7DF;

  /* Cor principal de destaque.
     Afeta "Certificado", "Destaque", categorias e alguns hovers. */
  --cor-acento-principal: #8C644D;

  /* Cor de hover da cor principal de destaque. */
  --cor-acento-principal-hover: #6E4B39;

  /* Cor secundária de destaque. */
  --cor-acento-secundario: #D9B596;

  /* Cor de hover da cor secundária de destaque. */
  --cor-acento-secundario-hover: #B98F6B;

  /* Cor suave usada em detalhes e bordas discretas. */
  --cor-acento-suave: #BFADA3;

  /* Cor premium usada em pequenos detalhes visuais. */
  --cor-acento-premium: #D9B596;
  /* Controla somente o botão "PROJETOS" localizado no Hero/topo.
    Essas variáveis não afetam "Sobre mim", "Projeto", "Resumo" ou "Enviar e-mail". */

  /* Cor da fonte do botão "PROJETOS" no estado normal. */
  --cor-botao-hero-projetos-texto: #F2F2F2;

  /* Cor da borda do botão "PROJETOS" no estado normal. */
  --cor-botao-hero-projetos-borda: #D9B596;

  /* Cor de fundo do botão "PROJETOS" no estado normal.
     Use transparent para manter apenas a borda. */
  --cor-botao-hero-projetos-fundo: transparent;

  /* Cor da fonte do botão "PROJETOS" quando passa o mouse. */
  --cor-botao-hero-projetos-hover-texto: #2A211D;

  /* Cor da borda do botão "PROJETOS" quando passa o mouse. */
  --cor-botao-hero-projetos-hover-borda: #D9B596;

  /* Cor de fundo do botão "PROJETOS" quando passa o mouse. */
  --cor-botao-hero-projetos-hover-fundo: #D9B596;

  /* Controla somente o botão "PROJETO" dos cards.
     Essas variáveis não afetam:
     - botão "PROJETOS" do topo
     - botão "RESUMO" dos cards
     - botão "Sobre mim"
     - botão "Enviar e-mail" */

  /* Cor da fonte do botão "PROJETO" no estado normal. */
  --cor-botao-card-projeto-texto: #4e3427;

  /* Cor da borda do botão "PROJETO" no estado normal. */
  --cor-botao-card-projeto-borda: #8C644D;

  /* Cor de fundo do botão "PROJETO" no estado normal. */
  --cor-botao-card-projeto-fundo: #FFFFFF;

  /* Cor da fonte do botão "PROJETO" quando passa o mouse. */
  --cor-botao-card-projeto-hover-texto: #FFFFFF;

  /* Cor da borda do botão "PROJETO" quando passa o mouse. */
  --cor-botao-card-projeto-hover-borda: #6E4B39;

  /* Cor de fundo do botão "PROJETO" quando passa o mouse. */
  --cor-botao-card-projeto-hover-fundo: #8C644D;

  /* Controla somente o texto "CONTATO" da seção final.
    Essa variável não afeta "SOBRE" nem "DESTAQUE". */
  --cor-label-contato: #D9B596;
  --tamanho-label-contato: 0.82rem;
  --peso-label-contato: 700;

  /* Cor principal das bordas. */
  --cor-borda: #BFADA3;

  /* Cor de borda suave para cards e badges. */
  --cor-borda-suave: #DED4CC;

  /* Cor de borda usada no hover dos cards. */
  --cor-borda-hover: #D9B596;

  /* Fundo dos botões principais. */
  --cor-botao-principal: #8d6a56;

  /* Fundo dos botões principais ao passar o mouse. */
  --cor-botao-principal-hover: #6E4B39;

  /* Cor do texto dos botões principais. */
  --cor-botao-principal-texto: #ffffff;

  /* Fundo dos botões secundários. */
  --cor-botao-secundario: transparent;

  /* Cor do texto dos botões secundários. */
  --cor-botao-secundario-texto: #4e3427;

  /* Cor da borda dos botões secundários. */
  --cor-botao-secundario-borda: #6E4B39;

  /* Fundo dos botões secundários ao passar o mouse. */
  --cor-botao-secundario-hover: #EFE7DF;

  /* Arredondamento padrão dos cards principais. */
  --raio-card: 14px;

  /* Sombra padrão dos cards. */
  --sombra-card: 0 10px 24px rgba(42, 33, 29, 0.08);

  /* Sombra dos cards no hover. */
  --sombra-card-hover: 0 18px 34px rgba(42, 33, 29, 0.14);

  /* Sombra mais suave usada em elementos pequenos. */
  --sombra-suave: 0 8px 18px rgba(42, 33, 29, 0.07);

  /* Largura máxima do conteúdo central do site. */
  --max: 1120px;
}


/* Remove margens e espaçamentos padrão aplicados pelo navegador.
   Também faz padding e borda entrarem no cálculo da largura total
   de cada elemento. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* Controla configurações gerais do documento HTML.
   scroll-behavior cria rolagem suave em links internos.
   text-size-adjust evita ajustes inesperados de texto no mobile. */
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}


/* Controla o corpo geral da página.
   Define fonte padrão, cor dos textos, fundo geral, altura mínima
   e suavização visual da renderização de fontes. */
body {
  min-height: 100vh;
  color: var(--cor-texto-principal);
  background: var(--cor-fundo-geral);
  font-family: var(--fonte-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Controla o comportamento padrão de todas as imagens.
   Evita que imagens ultrapassem a largura do container. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* Controla links de forma geral.
   A cor do link passa a herdar a cor do elemento pai. */
a {
  color: inherit;
}


/* Faz botões e campos select herdarem a fonte principal do site. */
button,
select {
  font: inherit;
}


/* Faz o cursor virar ponteiro ao passar sobre botões. */
button {
  cursor: pointer;
}


/* Controla o contorno de foco acessível para links, botões e selects.
   Esse foco aparece ao navegar pelo teclado. */
a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(140, 100, 77, 0.35);
  outline-offset: 3px;
}


/* Controla a largura padrão dos containers principais.
   Mantém o conteúdo centralizado e com margem lateral no mobile. */
.container {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}


/* Controla uma versão mais estreita do container.
   Usada em seções de leitura, como Sobre e Cursos. */
.container.narrow {
  width: min(880px, calc(100% - 32px));
}


/* Controla o link "Pular para o conteúdo".
   Ele fica escondido visualmente até receber foco pelo teclado. */
.skip-link {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 999999;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--cor-botao-principal);
  color: var(--cor-botao-principal-texto);
  text-decoration: none;
  transform: translateY(-150%);
}


/* Mostra o link "Pular para o conteúdo" quando ele recebe foco. */
.skip-link:focus {
  transform: translateY(0);
}


/* Controla a base visual de todos os botões do site.
   Afeta botões do Hero, cards, modal e contato. */
.btn,
.button,
.email-button,
.project-button {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 9px 16px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* Controla o efeito de hover geral dos botões.
   Faz o botão subir levemente ao passar o mouse. */
.btn:hover,
.button:hover,
.email-button:hover,
.project-button:hover {
  transform: translateY(-3px);
}


/* Controla os botões principais.
   Afeta principalmente "Sobre mim" e "Enviar e-mail". */
.btn-primary,
.email-button {
  background: var(--cor-botao-principal);
  color: var(--cor-botao-principal-texto);
  border-color: var(--cor-botao-principal);
  box-shadow: 0 8px 18px rgba(140, 100, 77, 0.18);
}


/* Controla o hover dos botões principais. */
.btn-primary:hover,
.email-button:hover {
  background: var(--cor-botao-principal-hover);
  color: var(--cor-botao-principal-texto);
  border-color: var(--cor-botao-principal-hover);
  box-shadow: 0 10px 22px rgba(140, 100, 77, 0.22);
}


/* Controla o botão secundário do Hero.
   Afeta o botão "Projetos" no topo. */
.btn-outline {
  background: var(--cor-botao-secundario);
  color: var(--cor-botao-secundario-texto);
  border-color: var(--cor-botao-secundario-borda);
}


/* Controla o hover do botão secundário do Hero. */
.btn-outline:hover {
  background: var(--cor-botao-secundario-hover);
  color: var(--cor-botao-secundario-texto);
  border-color: var(--cor-acento-principal);
}

/* Controla somente o botão "PROJETOS" do Hero/topo.
   Use este bloco para alterar cor da fonte, borda e fundo desse botão,
   sem afetar botões Projeto/Resumo dos cards. */
.hero .btn-outline {
  background: var(--cor-botao-hero-projetos-fundo);
  color: var(--cor-botao-hero-projetos-texto);
  border-color: var(--cor-botao-hero-projetos-borda);
}

/* Controla somente o hover do botão "PROJETOS" do Hero/topo. */
.hero .btn-outline:hover {
  background: var(--cor-botao-hero-projetos-hover-fundo);
  color: var(--cor-botao-hero-projetos-hover-texto);
  border-color: var(--cor-botao-hero-projetos-hover-borda);
}


/* Controla rótulos pequenos das seções.
   Afeta textos como SOBRE, DESTAQUE e CONTATO. */
.section-label {
  color: var(--cor-acento-principal);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}


/* Controla fonte e cor de vários títulos importantes.
   Afeta títulos de seções, cards e TokenFlow. */
.about-section h2,
.courses-section h2,
.contact-section h2,
.projects-title,
.project-card h3,
.tokenflow-card h3 {
  color: var(--cor-titulo);
  font-family: var(--fonte-titulo);
}


/* Controla tamanho e espaçamento dos títulos principais
   das seções Sobre, Cursos e Contato. */
.about-section h2,
.courses-section h2,
.contact-section h2 {
  font-size: 1.7rem;
  margin-bottom: 24px;
  font-weight: 700;
}


/* Controla caixas usadas para centralizar imagens. */
.image-box {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Controla a área que agrupa botões dos cards. */
.card-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}


/* Controla botões pequenos usados nos cards e no modal.
   Afeta Projeto, Resumo, Ver Projeto e Sair. */
.project-button,
.button {
  min-width: 66px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--cor-botao-secundario-borda);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cor-botao-secundario-texto);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}


/* Controla o hover dos botões pequenos dos cards e modal. */
.project-button:hover,
.button:hover {
  background: var(--cor-botao-secundario-hover);
  color: var(--cor-botao-secundario-texto);
  border-color: var(--cor-acento-principal);
}


/* Controla somente o botão "PROJETO" dos cards.
   Este bloco permite mudar fonte, borda e fundo do botão Projeto
   sem alterar o botão "RESUMO" e sem alterar o botão "PROJETOS" do topo. */
.project-button.botao-projeto {
  background: var(--cor-botao-card-projeto-fundo);
  color: var(--cor-botao-card-projeto-texto);
  border-color: var(--cor-botao-card-projeto-borda);
}


/* Controla somente o hover do botão "PROJETO" dos cards.
   Use este bloco para mudar a cor quando o mouse passa sobre Projeto. */
.project-button.botao-projeto:hover {
  background: var(--cor-botao-card-projeto-hover-fundo);
  color: var(--cor-botao-card-projeto-hover-texto);
  border-color: var(--cor-botao-card-projeto-hover-borda);
}



/* Controla a seção superior do site.
   A imagem vem de --imagem-hero.
   A máscara vem de --hero-mascara-inicio e --hero-mascara-fim.
   Esta forma usa background-image/background-size separados para evitar
   falhas com shorthand e facilitar manutenção. */
/* Seção principal do topo com imagem .webp sem exibir cor/máscara antes do carregamento */

/* Controla a seção superior do site.
   A imagem vem de --imagem-hero.
   A máscara seguirá a mesma lógica da seção Contato, mas só será aplicada após a imagem carregar. */

.hero {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 60px 16px;
  color: var(--cor-hero-titulo);
  text-align: center;
  background-color: transparent;
  background-image: var(--imagem-hero);
  background-position: var(--hero-posicao-imagem);
  background-size: var(--hero-tamanho-imagem);
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

/* Controla a máscara do Hero como camada separada.
   A máscara começa invisível para impedir que a cor apareça antes da imagem.
   O main.js libera esta camada somente após o evento onload da imagem real. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      135deg,
      var(--hero-mascara-inicio),
      var(--hero-mascara-fim)
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}

/* Mantém os textos e botões do Hero acima da máscara. */
.hero > * {
  position: relative;
  z-index: 2;
}

/* Libera a máscara somente depois que o main.js confirmar o carregamento da imagem do Hero. */
html.hero-imagem-carregada .hero::after {
  opacity: 1;
}

/* Controla a largura máxima do conteúdo interno do Hero. */
.hero-inner {
  width: min(760px, 100%);
}


/* Controla o texto pequeno "Olá, seja bem-vindo!" no Hero. */
.hero-label {
  color: var(--cor-hero-label);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}


/* Controla o título grande do Hero:
   "Eu sou Luciano Magalhães". */
.hero h1 {
  color: var(--cor-hero-titulo);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 3.5vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 18px;
}


/* Controla o subtítulo profissional do Hero. */
.hero-subtitle {
  color: var(--cor-hero-subtitulo);
  font-size: clamp(1rem, 2vw, 1.15rem);
  padding: 25.7px 0 16px;
  margin-bottom: 30px;
}


/* Controla a linha de botões do Hero. */
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}


/* Controla a seção Sobre.
   Afeta fundo, espaçamento e alinhamento geral. */
.about-section {
  background: var(--cor-fundo-sobre);
  padding: 50px 0 46px;
  text-align: center;
}


/* Controla o bloco de texto dentro da seção Sobre. */
.about-text {
  text-align: justify;
}


/* Controla cada parágrafo da seção Sobre. */
.about-text p {
  color: var(--cor-texto-principal);
  font-size: 1rem;
  line-height: 1.76;
  margin-bottom: 16px;
}


/* Controla a seção Cursos.
   Para mudar o fundo dessa seção, altere --cor-fundo-cursos no :root. */
.courses-section {
  background: var(--cor-fundo-cursos);
  padding: 46px 0;
  color: var(--cor-texto-principal);
  text-align: center;
}


/* Controla o card principal de Cursos.
   Afeta layout das colunas, fundo, borda, sombra e espaçamento. */
.course-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 24px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-fundo-card);
  box-shadow: var(--sombra-card);
  text-align: left;
}


/* Controla o link "Certificado" na seção Cursos.
   Para mudar tamanho e cor de "Certificado", altere este bloco. */
.course-left a {
  display: inline-block;
  color: var(--cor-acento-principal);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 8px;
}


/* Controla o hover do link "Certificado". */
.course-left a:hover {
  color: var(--cor-acento-principal-hover);
  text-decoration: underline;
}


/* Controla a data do certificado exibida abaixo do link. */
.course-date {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: 0.92rem;
}


/* Controla o título dinâmico do certificado. */
.course-right h3 {
  color: var(--cor-titulo);
  font-family: var(--fonte-titulo);
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 4px;
}


/* Controla os textos complementares do certificado. */
.course-right p {
  color: var(--cor-texto-secundario);
  font-size: 0.96rem;
}


/* Controla mensagem de erro/status dos certificados.
   Fica escondida por padrão. */
.status-message {
  display: none;
  color: #9f2f2f !important;
  margin-top: 8px;
}


/* Exibe a mensagem de status quando o JavaScript adiciona
   a classe is-visible. */
.status-message.is-visible {
  display: block;
}


/* Controla a área de navegação dos certificados. */
.course-nav {
  max-width: 780px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
}


/* Controla os botões circulares das setas dos certificados. */
.course-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  color: var(--cor-texto-principal);
  box-shadow: var(--sombra-suave);
  font-size: 1.6rem;
  line-height: 1;
}


/* Controla o hover das setas dos certificados. */
.course-arrow:hover {
  background: var(--cor-acento-principal);
  color: #ffffff;
  border-color: var(--cor-acento-principal);
}


/* Controla o agrupamento central da navegação de cursos. */
.course-selector {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}


/* Controla o contador de cursos/certificados, quando exibido. */
.course-counter {
  min-width: 62px;
  color: var(--cor-acento-principal);
  font-weight: 700;
  font-size: 0.92rem;
}


/* Controla o campo seletor de cursos, quando exibido. */
.course-select {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-fundo-card);
  color: var(--cor-texto-principal);
  font-size: 0.94rem;
}


/* Controla a seção Projetos.
   Afeta fundo e espaçamento vertical da área dos projetos. */
.projects-section {
  background: var(--cor-fundo-projetos);
  padding: 44px 0 38px;
}


/* Controla o título central "Projetos". */
.projects-title {
  color: var(--cor-titulo);
  text-align: center;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 700;
  margin-bottom: 24px;
}


/* Controla o bloco externo do projeto em destaque. */
.featured-project {
  max-width: 1040px;
  margin: 0 auto 34px;
}


/* Controla o texto "Destaque".
   Para mudar cor e tamanho de "Destaque", altere este bloco. */
.featured-label {
  color: var(--cor-acento-principal);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}


/* Controla o card grande do TokenFlow. */
.tokenflow-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 24px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-fundo-card);
  box-shadow: var(--sombra-card);
}


/* Controla o título do card TokenFlow. */
.tokenflow-card h3 {
  color: var(--cor-titulo);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 8px;
}


/* Controla a categoria dos projetos. */
.project-category {
  color: var(--cor-acento-principal);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 10px;
}


/* Controla a descrição do TokenFlow. */
.tokenflow-description {
  color: var(--cor-texto-secundario);
  font-size: 1rem;
  margin-bottom: 14px;
}


/* Controla o grupo de tags/badges. */
.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}


/* Controla cada tag/badge individual. */
.badges span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: 999px;
  background: #F8F3ED;
  color: #4A3930;
  font-size: 0.76rem;
  font-weight: 700;
}


/* Controla a primeira tag/badge, dando destaque especial. */
.badges span:first-child {
  border-color: var(--cor-acento-secundario);
  background: #F3E4D4;
  color: #6E4B39;
}


/* Controla a imagem grande do TokenFlow. */
.tokenflow-image img {
  width: auto;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
}


/* Controla a grade dos cards menores de projetos. */
.projects-list {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}


/* Controla cada card menor de projeto. */
.project-card {
  width: 100%;
  max-width: 230px;
  min-height: 292px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 10px;
  border: 1px solid var(--cor-borda-suave);
  border-radius: 12px;
  background: var(--cor-fundo-card);
  text-align: center;
  box-shadow: var(--sombra-card);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


/* Controla o hover de cada card menor de projeto. */
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
  border-color: var(--cor-borda-hover);
}


/* Controla o título dos cards menores. */
.project-card h3 {
  min-height: 58px;
  color: var(--cor-titulo);
  font-size: 0.98rem;
  line-height: 1.24;
  font-weight: 700;
  margin-bottom: 6px;
}


/* Controla a categoria/descrição curta dos cards menores. */
.project-card p {
  min-height: 34px;
  color: var(--cor-texto-secundario);
  font-size: 0.82rem;
  margin-bottom: 6px;
}


/* Controla a área reservada para imagem nos cards menores. */
.project-card .image-box {
  height: 118px;
  margin: 4px 0 10px;
}


/* Controla o tamanho máximo das imagens nos cards menores. */
.project-card img {
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 112px;
  object-fit: contain;
}


/* Controla a seção Contato.
   A imagem vem de --imagem-contato.
   A máscara vem de --contato-mascara-inicio e --contato-mascara-fim.
   Esta forma usa background-image/background-size separados para evitar
   falhas com shorthand e facilitar manutenção. */
.contact-section {
  padding: 54px 0 42px;
  color: var(--cor-contato-titulo);
  text-align: center;
  background-color: var(--cor-contato-fim);
  background-image:
    linear-gradient(
      135deg,
      var(--contato-mascara-inicio),
      var(--contato-mascara-fim)
    ),
    var(--imagem-contato);
  background-position:
    center,
    var(--contato-posicao-imagem);
  background-size:
    cover,
    var(--contato-tamanho-imagem);
  background-repeat:
    no-repeat,
    no-repeat;
}

/* Controla somente o rótulo "CONTATO" da seção final.
   Esse bloco não altera "SOBRE", "DESTAQUE" ou outros labels. */
.contact-section .section-label {
  color: var(--cor-label-contato);
  font-size: var(--tamanho-label-contato);
  font-weight: var(--peso-label-contato);
}


/* Controla o título "Fale comigo!" da seção Contato. */
.contact-section h2 {
  color: var(--cor-contato-titulo);
  font-size: 1.55rem;
  margin-bottom: 22px;
}


/* Controla o botão "Enviar e-mail". */
.email-button {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 26px;
}


/* Controla o rodapé final abaixo da seção Contato. */
.footer {
  display: flex;
  justify-content: center;
  padding: 12px 16px 20px;
  background: var(--cor-contato-fim);
  text-align: center;
}


/* Controla o texto do rodapé. */
.footer p {
  color: #EFE7DF;
  font-size: 0.84rem;
}


/* Controla o link do rodapé. */
.footer a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}


/* Controla o hover do link do rodapé. */
.footer a:hover {
  color: var(--cor-acento-secundario);
}


/* Controla o fundo escurecido do modal de resumo dos projetos. */
#project-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(42, 33, 29, 0.32);
  backdrop-filter: blur(2px);
}


/* Mostra o modal de projeto quando o JavaScript adiciona
   a classe is-open. */
#project-modal.is-open {
  display: flex;
}


/* Controla a caixa interna do modal de resumo dos projetos. */
#project-modal .modal-content {
  width: min(900px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo-card);
  color: var(--cor-texto-principal);
  box-shadow: 0 18px 46px rgba(42, 33, 29, 0.18);
}


/* Controla o corpo de texto carregado dentro do modal. */
#modal-body {
  text-align: justify;
  line-height: 1.72;
}


/* Controla os parágrafos dentro do modal. */
#modal-body p {
  margin-bottom: 1.1em;
}


/* Controla títulos h1, h2 e h3 dentro do modal. */
#modal-body h1,
#modal-body h2,
#modal-body h3 {
  color: var(--cor-acento-principal);
  font-family: var(--fonte-titulo);
  margin: 1.2em 0 0.6em;
}


/* Controla a área dos botões do modal. */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}


/* Controla o fundo escuro do modal dos certificados. */
.cert-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: auto;
  padding: 42px 16px;
  background: rgba(0, 0, 0, 0.86);
}


/* Mostra o modal de certificado quando o JavaScript adiciona
   a classe open. */
.cert-modal.open {
  display: block;
}


/* Controla a imagem do certificado exibida no modal. */
.cert-img {
  display: block;
  width: auto;
  max-width: min(1100px, 96vw);
  height: auto;
  margin: 0 auto;
  background: #ffffff;
}


/* Controla o botão X para fechar o certificado. */
.cert-close {
  position: fixed;
  top: 18px;
  right: 28px;
  z-index: 1000000;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 40px;
  line-height: 1;
}


/* Controla ajustes para telas até 760px, como celulares
   e tablets pequenos. */
@media (max-width: 760px) {
  /* Reduz a altura mínima do Hero no mobile. */
  .hero {
    min-height: 72vh;
  }

  /* Ajusta o alinhamento dos botões do Hero no mobile. */
  .hero-actions {
    align-items: stretch;
  }

  /* Define largura confortável para botões do Hero no mobile. */
  .hero-actions .btn {
    width: min(260px, 100%);
  }

  /* Faz o card de cursos ficar em uma coluna no mobile. */
  .course-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Ajusta a navegação de cursos no mobile. */
  .course-nav {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  /* Reduz o tamanho das setas dos cursos no mobile. */
  .course-arrow {
    width: 40px;
    height: 40px;
  }

  /* Organiza o seletor de cursos em uma coluna no mobile. */
  .course-selector {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Centraliza o contador de cursos no mobile. */
  .course-counter {
    text-align: center;
  }

  /* Faz o card TokenFlow ficar em uma coluna no mobile. */
  .tokenflow-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  /* Reduz a imagem TokenFlow no mobile. */
  .tokenflow-image img {
    max-height: 220px;
  }

  /* Ajusta a grade de projetos no mobile. */
  .projects-list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
  }

  /* Ajusta os cards menores no mobile. */
  .project-card {
    max-width: 100%;
    min-height: 270px;
  }

  /* Ajusta a área das imagens dos cards no mobile. */
  .project-card .image-box {
    height: 108px;
  }

  /* Reduz as imagens dos cards no mobile. */
  .project-card img {
    max-width: 118px;
    max-height: 100px;
  }

  /* Centraliza os botões do modal no mobile. */
  .modal-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Faz botões do modal ocuparem largura confortável no mobile. */
  .modal-actions .button {
    width: 100%;
    max-width: 220px;
    text-align: center;
  }
}


/* Controla o comportamento visual da página ao imprimir. */
@media print {
  /* Oculta elementos interativos e decorativos na impressão. */
  .hero-actions,
  .card-buttons,
  .course-nav,
  .contact-section,
  .footer,
  .modal,
  .skip-link {
    display: none !important;
  }

  /* Define fundo branco e texto preto para impressão. */
  body {
    background: #ffffff;
    color: #000000;
  }
}