/*
  Sistema de design NaDel. Toda a identidade visual vive aqui, em variáveis.
  Cores medidas nos arquivos oficiais da marca. Contraste já calculado no briefing,
  não recalcular.
*/

:root {
  /* Verde floresta, fundos escuros, 60% da composição */
  --cor-floresta-900: #08180c;
  --cor-floresta-800: #0e2214;
  --cor-floresta-700: #172c1b;
  --cor-floresta-600: #1f3a25;

  /* Creme, fundos claros e texto, 20% da composição */
  --cor-creme-100: #f1ede1;
  --cor-creme-300: #e8e1ce;
  --cor-creme-500: #d9d2b9;

  /* Sálvia, apoio e rótulos, 12% da composição */
  --cor-salvia-600: #65704d;
  --cor-salvia-500: #878a66;
  --cor-salvia-300: #a3a782;

  /* Cobre, acento, nunca dominante, 8% da composição */
  --cor-cobre-700: #ac6030;
  --cor-cobre-500: #c77d4d;
  --cor-cobre-300: #efb68c;

  /* Cobre sobre fundo ESCURO: botões, acentos, linhas e ornamentos. Sobre fundo claro (#D9D2B9)
     o cobre 300 tem contraste 2,3; ali ficam o cobre 500 em linhas pequenas e o 700 em decoração. */
  --cobre-acento: var(--cor-cobre-300);
  --cobre-acento-rgb: 239, 182, 140;

  /* Texto secundário sobre fundo escuro */
  --cor-texto-secundario-escuro: #a9a68e;

  /* Seções claras: fundo creme 300 e cores de texto com contraste medido sobre ele */
  --fundo-claro: var(--cor-creme-500); /* #D9D2B9, areia */
  --fundo-claro-2: var(--cor-creme-300); /* #E8E1CE, janelas e papéis que se destacam do fundo */
  --texto-claro: #0e2214; /* títulos e texto principal, 12,8 */
  --texto-2-claro: #3a4631; /* texto secundário, 7,7 */
  --rotulo-claro: #444f3a; /* rótulos pequenos em caixa alta, 6,6 */
  --cobre-texto-claro: #8a4a22; /* cobre em texto, 5,2; o cobre 700 (3,6) só em linhas e decoração */

  /* Tipografia */
  --fonte-titulo: "Italiana", "Georgia", serif; /* só em 40 px ou mais */
  --fonte-corpo: "Montserrat", "Segoe UI", sans-serif;
  --peso-corpo: 300;

  --tam-hero: clamp(2.5rem, 0.7rem + 5.3vw, 5.5rem);
  --tam-h2: clamp(2.5rem, 1.2rem + 4vw, 5rem);
  --tam-fundador: clamp(2.5rem, 1rem + 2.5vw, 3.25rem); /* 52 px na tela grande, 40 px no mínimo */
  --tam-solucao: clamp(2.5rem, 1.2rem + 2.6vw, 3.5rem); /* títulos das linhas de Soluções: cabem em uma linha de 1200 a 1440 */
  --tam-subtitulo: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); /* Montserrat 500: perguntas, nomes de projeto, itens do menu */
  --tam-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --tam-corpo: 1rem;
  --altura-corpo: 1.7;
  --tam-texto-claro: 1.0625rem; /* parágrafos sobre fundo claro: 17 px, Montserrat 400 */
  --altura-texto-claro: 1.65;
  --tam-rotulo: 0.8125rem; /* 13 px, peso 500, caixa alta */
  --tam-numero: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); /* números do processo, Montserrat 500 */
  --tam-numero-pequeno: 1rem; /* números da lista de Soluções, Montserrat 500 */
  --tam-pequeno: 0.8125rem;

  /* Layout */
  --gutter: clamp(20px, 5vw, 80px);
  --container-max: 1120px;
  --espaco-secao: clamp(5rem, 3rem + 8vw, 12rem);
  --moldura: 10px; /* margem da moldura do hero */
  --altura-header: 76px;
  --respiro-header: clamp(16px, 2vw, 28px);
  --topo-fixo: calc(var(--moldura) + var(--respiro-header) + var(--altura-header));

  /* Assinaturas da marca */
  --haste-ponto: 9px;
  --janela-filete: rgba(var(--cobre-acento-rgb), 0.35); /* cobre 300 a 35%, sobre fundo escuro */
  --janela-filete-claro: rgba(199, 125, 77, 0.35); /* cobre 500 a 35%, sobre fundo claro */
  --janela-raio: 4px;
  --sobreposicao-foto: rgba(14, 34, 20, 0.58); /* floresta 800 sobre fotos reais, para conversarem com a paleta */
  --aro-tamanho: 96px;
  --hero-faixa: 20px; /* fundo do hero visível abaixo da moldura, antes de Soluções */

  /* Hero */
  --hero-coluna-titulo: 700px;
  --hero-coluna-texto: 430px;
  --tam-hero-destaque: clamp(1.125rem, 0.9rem + 0.6vw, 1.3125rem); /* 21 px no desktop */
  --hero-texto-cor: rgba(232, 225, 206, 0.82); /* creme 300 a 82% */
  --hero-respiro-botoes: 22px;

  /* Foco do teclado */
  --foco-escuro: var(--cor-cobre-300);
  --foco-claro: var(--cor-cobre-700);

  /* Vidro do cabeçalho */
  --vidro-claro: rgba(241, 237, 225, 0.13);
  --vidro-claro-borda: rgba(241, 237, 225, 0.26);
  --vidro-claro-firme: rgba(241, 237, 225, 0.5);
  --vidro-escuro: var(--cor-floresta-800); /* sobre seções claras: floresta 800 opaca, igual ao hero */
  --vidro-escuro-borda: rgba(232, 225, 206, 0.14);

  /* Filetes e divisórias */
  --linha-sobre-escuro: rgba(241, 237, 225, 0.12);
  --linha-sobre-claro: rgba(14, 34, 20, 0.16);

  /* Movimento */
  --duracao-rapida: 240ms;
  --duracao-media: 480ms;
  --duracao-lenta: 800ms;
  --duracao-hero: 1200ms;
  --curva-principal: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --atraso-escalonado: 90ms;
  --intervalo-etapa: 450ms; /* entre uma etapa e outra do processo */
  --curva-assentar: var(--curva-principal); /* nome usado nas regras de entrada */

  /* Entrada das seções (js/reveal.js) */
  --passo-entrada: 80ms; /* entre um elemento e o seguinte */
  --passo-janela: 120ms; /* entre janelas */
  --duracao-linha: 700ms; /* filetes que se desenham */
  --duracao-janela: 900ms; /* janelas e imagens */
  --duracao-rodape: 400ms; /* itens do rodapé */
  --entrada-subida: 20px; /* blocos de conteúdo */
  --janela-recorte: 10%; /* recorte inicial no topo da janela */
  --janela-escala: 1.04;

  /* Saída ligada à rolagem (js/progress.js): só em [data-saida], na faixa de cima da tela */
  --saida-intensidade: 1; /* 0 desliga */
  --saida-esmaecer: 0.45; /* opacidade vai de 1 a 0,55 */
  --saida-subida: -12px;
}

@media (min-width: 640px) {
  :root {
    --moldura: 20px;
  }
}

/*
  Breakpoints de referência (usados diretamente nas media queries,
  CSS não permite variável dentro de @media):
  640, 768, 1024, 1200
*/

@media (max-width: 640px) {
  :root {
    --peso-corpo: 400;
  }
}

@font-face {
  font-family: "Italiana";
  src: url("../assets/fonts/italiana-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}