/* Landing do domínio raiz. Usa os mesmos reset, tokens e base do app; publicar.sh copia os três para o lado deste arquivo. */
@import url("reset.css");
@import url("tokens.css");
@import url("base.css");

html {
  scroll-behavior: smooth;
}

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

body {
  display: flex;
  flex-direction: column;
  font-size: var(--texto-m);
}

main {
  flex: 1;
}

h1,
h2 {
  font-family: var(--fonte-destaque);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--texto-hero);
  line-height: 1.08;
}

h2 {
  font-size: var(--texto-destaque);
}

.skip-link {
  position: absolute;
  inset-block-start: var(--espaco-s);
  inset-inline-start: var(--espaco-s);
  z-index: 1;
  padding: var(--espaco-s) var(--espaco-m);
  background: var(--cor-superficie);
  color: var(--cor-superficie-texto);
  transform: translateY(-200%);

  &:focus {
    transform: none;
  }
}

.site-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-m);
  width: min(100%, var(--largura-site));
  margin-inline: auto;
  padding: var(--espaco-m);
}

.site-marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-s);
  color: var(--cor-fundo-texto);
  font-family: var(--fonte-destaque);
  font-size: var(--texto-g);
  font-weight: 800;
  text-decoration: none;

  & img {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.site-entrar {
  font-weight: 600;
}

.site-acao {
  display: inline-block;
  padding: var(--espaco-s) var(--espaco-l);
  min-height: var(--altura-linha);
  align-content: center;
  border-radius: var(--raio);
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--duracao);

  &:hover {
    filter: brightness(1.12);
  }
}

.site-hero {
  display: grid;
  gap: var(--espaco-xl);
  width: min(100%, var(--largura-site));
  margin-inline: auto;
  padding: var(--espaco-l) var(--espaco-m) var(--espaco-xl);
}

.site-hero-texto {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: var(--espaco-m);
}

.site-rotulo {
  color: var(--cor-link);
  font-weight: 600;
}

.site-resumo {
  max-width: 34rem;
  color: var(--cor-texto-suave);
  font-size: var(--texto-g);
  line-height: 1.4;
}

.site-hero-imagem {
  border-radius: var(--raio-g);
  overflow: hidden;

  & img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 28% center;
  }
}

.site-modulos,
.site-acesso {
  padding-block: var(--espaco-2xl);
  padding-inline: max(var(--espaco-m), calc((100% - var(--largura-site)) / 2 + var(--espaco-m)));
}

.site-modulos {
  background: var(--cor-superficie);
  color: var(--cor-superficie-texto);
}

.modulos-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--espaco-xl);
  margin-block-start: var(--espaco-xl);
}

.modulo {
  padding-block-start: var(--espaco-m);
  border-block-start: 0.125rem solid var(--cor-primaria);

  & h3 {
    font-size: var(--texto-g);
  }

  & p {
    margin-block-start: var(--espaco-xs);
    color: var(--cor-texto-suave);
  }
}

.site-acesso {
  display: grid;
  gap: var(--espaco-l);
}

.acesso-lista {
  display: grid;
  gap: var(--espaco-m);

  & li {
    padding-inline-start: var(--espaco-m);
    border-inline-start: 0.125rem solid var(--cor-primaria);
  }
}

.site-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-m);
  padding-block: var(--espaco-l);
  padding-inline: max(var(--espaco-m), calc((100% - var(--largura-site)) / 2 + var(--espaco-m)));
  border-block-start: 0.0625rem solid var(--cor-borda);
  color: var(--cor-texto-suave);
}

.site-nao-encontrada {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--espaco-m);
  width: min(100%, 40rem);
  min-height: 100vh;
  margin-inline: auto;
  padding: var(--espaco-m);
}

.nao-encontrada-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-l);
}

@media (min-width: 56rem) {
  .site-hero {
    grid-template-columns: 1fr 1fr;
    padding-block: var(--espaco-xl) var(--espaco-2xl);
  }

  .site-hero-imagem img {
    aspect-ratio: 1;
  }

  .site-acesso {
    grid-template-columns: 1fr 2fr;
  }
}