*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-width: 0;
}

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--cor-floresta-800);
  color: var(--cor-creme-100);
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  line-height: var(--altura-corpo);
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-style: normal;
  margin: 0;
  line-height: 1.05;
}

em {
  font-style: normal;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--foco-escuro);
  outline-offset: 3px;
}

/* Sobre fundo claro: cobre 700 (linha, não texto), afastado 4 px, cantos de 6 px */
[data-tema="claro"] :focus-visible {
  outline: 2px solid var(--foco-claro);
  outline-offset: 4px;
  border-radius: 6px;
}

.container {
  width: min(var(--container-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 100;
  background: var(--cor-creme-100);
  color: var(--cor-floresta-900);
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Seções e temas */

.secao {
  position: relative;
  padding-block: var(--espaco-secao);
  /* Âncora do menu: o topo da seção para 24 px abaixo do cabeçalho */
  scroll-margin-top: calc(var(--topo-fixo) + 24px);
}

/* Início: volta ao topo da página */
.hero {
  scroll-margin-top: var(--moldura);
}

/* Máscara de linha (a mesma do título do hero), montada pelo js/reveal.js */
.linha-mascara {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.linha-mascara > span {
  display: block;
}

[data-tema="claro"] {
  --janela-filete: var(--janela-filete-claro);
  background: var(--fundo-claro);
  color: var(--texto-claro);
}

.rotulo {
  display: block;
  font-size: var(--tam-rotulo);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cor-salvia-300);
}

[data-tema="claro"] .rotulo {
  color: var(--rotulo-claro);
}

.titulo-secao {
  font-size: var(--tam-h2);
  margin-top: 20px;
}

/* Botões: só transform e opacity animam; a troca de cor é uma camada com opacidade */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duracao-rapida) var(--curva-suave);
}

.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--curva-suave);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: var(--cobre-acento);
  color: var(--cor-floresta-900);
  border: 1px solid var(--cobre-acento);
}

/* No hover o botão assenta no cobre 500 (o 300 é a cor em repouso) */
.btn-primary::before {
  background: var(--cor-cobre-500);
}

.btn-outline {
  background: transparent;
  color: var(--cobre-acento);
  border: 1px solid var(--cobre-acento);
}

.btn-outline::before {
  background: rgba(var(--cobre-acento-rgb), 0.12);
}

/* A janela: filete cobre de 1 px a 35%, cantos de 4 px */

.janela {
  position: relative;
  border: 1px solid var(--janela-filete);
  border-radius: var(--janela-raio);
  overflow: hidden;
}

/* Janela com foto real: a foto cobre tudo e recebe uma sobreposição escura; os pontinhos ficam por cima */
.janela-foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.janela-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sobreposicao-foto);
  pointer-events: none;
}

.janela-foto .janela-barra {
  z-index: 1;
}

.janela-barra {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  gap: 5px;
}

.janela-barra span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* Haste de rolagem com progresso real (js/progress.js) */

.haste-progresso {
  --haste-cor: var(--cobre-acento);
  --haste-fundo: var(--cor-floresta-800);
  display: none;
}

.haste-topo {
  --haste-cor: var(--cobre-acento);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  width: 100%;
  height: 2px;
  background: var(--haste-cor);
  transform-origin: left center;
  transform: scaleX(var(--progresso, 0));
  pointer-events: none;
}

html[data-tema-haste="claro"] .haste-topo,
html[data-tema-haste="claro"] .haste-progresso {
  --haste-cor: var(--cor-cobre-700);
  --haste-fundo: var(--fundo-claro);
}

/* Vertical só a partir de 1200 px: abaixo disso a margem lateral não comporta a haste */
@media (min-width: 1200px) {
  .haste-topo {
    display: none;
  }

  .haste-progresso {
    display: block;
    position: fixed;
    z-index: 30;
    top: 37vh;
    /* centralizada na margem lateral, fora do container */
    right: calc(max(var(--gutter), (100vw - var(--container-max)) / 2) / 2 - 9px);
    width: 18px;
    height: 48vh;
    pointer-events: none;
  }

  .haste-progresso .ponto {
    position: absolute;
    left: 50%;
    width: var(--haste-ponto);
    height: var(--haste-ponto);
    margin-left: calc(var(--haste-ponto) / -2);
    border-radius: 50%;
    background: var(--haste-cor);
  }

  .haste-progresso .ponto:first-child {
    top: 0;
  }

  .haste-progresso .ponto:last-of-type {
    bottom: 0;
  }

  .haste-progresso .filete {
    position: absolute;
    top: calc(var(--haste-ponto) / 2);
    bottom: calc(var(--haste-ponto) / 2);
    left: 50%;
    width: 1px;
    background: var(--haste-cor);
  }

  .haste-progresso .aro {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--haste-cor);
    background: var(--haste-fundo);
    transform: translateY(calc(var(--progresso, 0) * (48vh - 18px)));
  }
}

/* Reveal ao rolar (js/reveal.js). Os estados escondidos só valem com .entrada-pronta, que o próprio
   reveal.js coloca: se o script falhar ou houver movimento reduzido, tudo já aparece. */

[data-ordem="1"] { --ordem: 1; }
[data-ordem="2"] { --ordem: 2; }
[data-ordem="3"] { --ordem: 3; }
[data-ordem="4"] { --ordem: 4; }
[data-ordem="5"] { --ordem: 5; }

@media (prefers-reduced-motion: no-preference) {
  .entrada-pronta [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duracao-lenta) var(--curva-principal),
      transform var(--duracao-lenta) var(--curva-principal);
    transition-delay: calc(var(--ordem, 0) * var(--atraso-escalonado));
  }

  .entrada-pronta [data-reveal].is-visivel {
    opacity: 1;
    transform: none;
  }

  /* Rótulo e título: escondidos até o JS montar as linhas, depois cada linha sobe da máscara */
  .entrada-pronta [data-reveal="linhas"] {
    transform: none;
    transition: none;
  }

  .entrada-pronta [data-reveal="linhas"].is-preparado {
    opacity: 1;
  }

  .entrada-pronta [data-reveal="linhas"].is-preparado .linha-mascara > span {
    transform: translateY(110%);
    transition: transform var(--duracao-lenta) var(--curva-principal);
    transition-delay: calc(var(--i, 0) * var(--atraso-escalonado));
  }

  .entrada-pronta [data-reveal="linhas"].is-visivel .linha-mascara > span {
    transform: none;
  }
}

/*
  Entrada de cada seção (js/reveal.js): a seção marcada com data-entrada-secao entra uma vez,
  quando ocupa cerca de 25% da tela. Cada elemento recebe --atraso (passos de 80 ms, janelas 120 ms).
  Tipos: titulo (máscara de linha), linha (filete que se desenha), bloco (sobe 20 px), janela.
*/
@media (prefers-reduced-motion: no-preference) {
  /* Título: o mesmo da máscara de linha acima */
  .entrada-pronta [data-entrada="titulo"]:not(.is-preparado) {
    opacity: 0;
  }

  .entrada-pronta [data-entrada="titulo"].is-preparado .linha-mascara > span {
    transform: translateY(110%);
    transition: transform var(--duracao-lenta) var(--curva-assentar);
    transition-delay: calc(var(--i, 0) * var(--atraso-escalonado));
  }

  .entrada-pronta [data-entrada="titulo"].is-visivel .linha-mascara > span {
    transform: none;
  }

  /* Linha estrutural: o filete (::before) se desenha da esquerda para a direita */
  .entrada-pronta [data-entrada-secao]:not(.entrou) [data-linha]::before {
    transform: scaleX(0);
  }

  .entrada-pronta [data-entrada-secao] [data-linha]::before {
    transition: transform var(--duracao-linha) var(--curva-assentar) var(--atraso, 0ms);
  }

  /* Bloco de conteúdo: aparece subindo 20 px */
  .entrada-pronta [data-entrada-secao]:not(.entrou) [data-entrada="bloco"] {
    opacity: 0;
    transform: translateY(var(--entrada-subida));
  }

  .entrada-pronta [data-entrada-secao] [data-entrada="bloco"] {
    transition: opacity var(--duracao-media) var(--curva-assentar) var(--atraso, 0ms),
      transform var(--duracao-media) var(--curva-assentar) var(--atraso, 0ms);
  }

  .entrada-pronta .rodape [data-entrada="bloco"] {
    transition-duration: var(--duracao-rodape);
  }

  /* Janela e imagem: o recorte abre de cima e a escala assenta */
  .entrada-pronta [data-entrada-secao]:not(.entrou) [data-entrada="janela"] {
    clip-path: inset(var(--janela-recorte) 0 0 0);
    transform: scale(var(--janela-escala));
  }

  /* O estado final precisa ser inset(0): de inset() para none o navegador não interpola */
  .entrada-pronta [data-entrada-secao] [data-entrada="janela"] {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--duracao-janela) var(--curva-assentar) var(--atraso, 0ms),
      transform var(--duracao-janela) var(--curva-assentar) var(--atraso, 0ms);
  }
}

/*
  Saída ligada à rolagem (js/progress.js escreve --saida, de 0 a 1, nos 12% de cima da tela).
  Os filetes das listas só esmaecem: subir os separaria das linhas a que pertencem.
*/
[data-saida] {
  opacity: calc(1 - var(--saida, 0) * var(--saida-esmaecer) * var(--saida-intensidade));
  transform: translateY(calc(var(--saida, 0) * var(--saida-subida) * var(--saida-intensidade)));
}

[data-saida][data-linha] {
  opacity: 1;
  transform: none;
}

[data-saida][data-linha]::before {
  opacity: calc(1 - var(--saida, 0) * var(--saida-esmaecer) * var(--saida-intensidade));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --saida-intensidade: 0;
  }
}

/*
  Celular e tablet em pé (até 767 px): títulos, rótulos e textos de apresentação ficam centralizados.
  Ficam à esquerda, por serem listas de leitura: linhas de Soluções, passos do Processo e perguntas do FAQ.
  O desktop (768 px ou mais) não muda.
*/
@media (max-width: 767px) {
  .hero-title,
  .hero-lead,
  .hero-texto,
  .rotulo,
  .titulo-secao,
  .fundadores-titulo,
  .historia-texto,
  .projeto-nome,
  .fundador-nome,
  .fundador-texto {
    text-align: center;
  }

  /* Textos com largura máxima em ch precisam de margem automática para o bloco também ficar no centro */
  .titulo-secao,
  .fundadores-titulo,
  .historia-texto p,
  .fundador-descricao {
    margin-inline: auto;
  }

  .hero-side {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .fundador-foto {
    margin-inline: auto;
  }
}