/*
 * O estilo inteiro do site, num arquivo só e sem build.
 *
 * As cores são cópia do tema do app web (`ambar-frontend/packages/design-system`), já
 * resolvidas — lidas do CSS compilado, não da paleta. Cada uma traz ao lado o token de
 * origem: quando o tema do app mudar, é por esse nome que se confere a cópia. Não invente
 * cor aqui; se faltar uma, ela vem do tema. O claro e o escuro estão no mesmo valor, pelo
 * `light-dark()`.
 *
 * A laranja (`--terciaria`) não é texto nem ícone sobre fundo claro: dá 2,70:1, abaixo do
 * mínimo. Para laranja legível, `--sobre-terciaria-container`.
 */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fontes/roboto-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fontes/roboto-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fontes/roboto-latin-700-normal.woff2') format('woff2');
}

/* Claro por padrão, como o app web, e não o tema do sistema. O escuro é escolha, e quem a
 * aplica é o `tema.js`. Os tokens usam `light-dark()`, que resolve pelo `color-scheme`:
 * trocar essa propriedade troca o tema inteiro, sem segundo bloco de cores. */
:root {
  color-scheme: light;

  --primaria: light-dark(#114b3c, #9ad2be); /* --mat-sys-primary */
  --sobre-primaria: light-dark(#ffffff, #00382b); /* --mat-sys-on-primary */
  --primaria-container: light-dark(#b6eed9, #175040); /* --mat-sys-primary-container */
  --sobre-primaria-container: light-dark(#175040, #b6eed9); /* --mat-sys-on-primary-container */
  --terciaria: light-dark(#ff6c02, #ffb693); /* --mat-sys-tertiary */
  --terciaria-container: light-dark(#ffdbcc, #7a3000); /* --mat-sys-tertiary-container */
  --sobre-terciaria-container: light-dark(#7a3000, #ffdbcc); /* --mat-sys-on-tertiary-container */
  --superficie: light-dark(#f8faf7, #111413); /* --mat-sys-surface */
  --sobre-superficie: light-dark(#191c1b, #e1e3e0); /* --mat-sys-on-surface */
  --sobre-superficie-variante: light-dark(#404945, #dce5df); /* --mat-sys-on-surface-variant */
  --contorno: light-dark(#707975, #8a938e); /* --mat-sys-outline */
  --contorno-variante: light-dark(#c0c9c3, #404945); /* --mat-sys-outline-variant */
  --container-mais-baixo: light-dark(#ffffff, #0c0f0e); /* --mat-sys-surface-container-lowest */
  --container-baixo: light-dark(#f3f4f1, #191c1b); /* --mat-sys-surface-container-low */
  --superficie-quente: light-dark(#fff5ed, #201a17); /* --ambar-sys-superficie-navegacao */
  --contorno-quente: light-dark(#f2e4d8, #382e29); /* --ambar-sys-contorno-navegacao */

  /* O logotipo tem cores próprias, as do brandbook, que não são as da interface. No escuro a
   * palavra fica branca: é o tratamento fundo-verde do próprio brandbook. */
  --marca-elemento: #ff6d00; /* --ambar-sys-marca-elemento */
  --marca-tipografia: light-dark(#10514f, #ffffff); /* --ambar-sys-marca-tipografia */

  --largura: 1080px;
  --margem: 16px;
}

:root[data-tema='escuro'] {
  color-scheme: dark;
}

@media (min-width: 600px) {
  :root {
    --margem: 24px;
  }
}

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

body {
  margin: 0;
  background: var(--superficie);
  color: var(--sobre-superficie);
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
}

a {
  color: var(--primaria);
}

:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

.conteudo {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -48px;
  padding: 8px 16px;
  background: var(--primaria);
  color: var(--sobre-primaria);
  border-radius: 8px;
  z-index: 1;
}

.pular:focus {
  top: 8px;
}

/* ── Topo ─────────────────────────────────────────────────────────────────── */

.topo {
  border-bottom: 1px solid var(--contorno-variante);
}

.topo .conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.logotipo .elemento {
  fill: var(--marca-elemento);
}

.logotipo .tipografia {
  fill: var(--marca-tipografia);
}

.topo .itens {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Botão de ícone (o do tema) ───────────────────────────────────────────── */

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sobre-superficie-variante);
  cursor: pointer;
}

.botao-icone:hover {
  background: color-mix(in srgb, var(--sobre-superficie) 8%, transparent);
}

/* O display acima venceria o `hidden` do navegador, e o botão apareceria antes de o
 * tema.js existir. */
.botao-icone[hidden] {
  display: none;
}

.botao-icone svg {
  width: 24px;
  height: 24px;
}

/* No claro o botão mostra a lua, para ir ao escuro; no escuro, o sol. */
.icone-sol,
:root[data-tema='escuro'] .icone-lua {
  display: none;
}

:root[data-tema='escuro'] .icone-sol {
  display: block;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  text-decoration: none;
  white-space: nowrap;
}

.botao-preenchido {
  background: var(--primaria);
  color: var(--sobre-primaria);
}

.botao-preenchido:hover {
  background: color-mix(in srgb, var(--primaria) 92%, var(--sobre-primaria));
}

.botao-contorno {
  border-color: var(--contorno);
  color: var(--primaria);
}

.botao-contorno:hover {
  background: color-mix(in srgb, var(--primaria) 8%, transparent);
}

/* ── Abertura ─────────────────────────────────────────────────────────────── */

.abertura {
  padding-block: 48px 40px;
}

@media (min-width: 600px) {
  .abertura {
    padding-block: 80px 56px;
  }
}

.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--sobre-terciaria-container);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
}

/* A laranja como decoração, que é o papel em que ela passa. */
.sobretitulo::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terciaria);
}

.abertura h1 {
  max-width: 21ch;
  margin: 0 0 16px;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.abertura .chamada {
  max-width: 56ch;
  margin: 0 0 32px;
  color: var(--sobre-superficie-variante);
  font-size: 1.125rem;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Recursos ─────────────────────────────────────────────────────────────── */

.recursos {
  padding-block: 16px 64px;
}

.recursos h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartao {
  padding: 24px;
  border: 1px solid var(--contorno-variante);
  border-radius: 12px;
  background: var(--container-mais-baixo);
}

.cartao h3 {
  margin: 16px 0 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.cartao p {
  margin: 0;
  color: var(--sobre-superficie-variante);
  font-size: 0.875rem;
  line-height: 1.43;
}

/* O mesmo desenho do `app-avatar` do app: ícone dentro de círculo de fundo suave. */
.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--terciaria-container);
  color: var(--sobre-terciaria-container);
}

.avatar svg {
  width: 20px;
  height: 20px;
}

/* ── Faixa ────────────────────────────────────────────────────────────────── */

.faixa {
  border-block: 1px solid var(--contorno-quente);
  background: var(--superficie-quente);
}

.faixa .conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 40px;
}

.faixa h2 {
  margin: 0 0 4px;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.27;
}

.faixa p {
  margin: 0;
  max-width: 56ch;
  color: var(--sobre-superficie-variante);
}

/* ── Texto longo (privacidade, suporte) ───────────────────────────────────── */

/* A coluna de leitura limita o filho, não a página: assim o texto alinha com o logotipo. */
.texto {
  padding-block: 48px 64px;
}

.texto > * {
  max-width: 72ch;
}

.texto h1 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.22;
}

.texto .atualizada {
  margin: 0 0 32px;
  color: var(--sobre-superficie-variante);
  font-size: 0.875rem;
}

.texto h2 {
  margin: 40px 0 8px;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.27;
  scroll-margin-top: 16px;
}

.texto h3 {
  margin: 24px 0 4px;
  font-size: 1rem;
  font-weight: 500;
}

.texto p,
.texto li {
  color: var(--sobre-superficie);
}

.texto ul,
.texto ol {
  padding-left: 1.25rem;
}

.texto li + li {
  margin-top: 4px;
}

.texto .indice {
  margin: 0 0 8px;
  padding: 16px 16px 16px 2.25rem;
  border-radius: 12px;
  background: var(--container-baixo);
}

.texto .contato {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--contorno-variante);
  border-radius: 12px;
  background: var(--container-mais-baixo);
}

.contato .rotulo {
  display: block;
  color: var(--sobre-superficie-variante);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
}

/* O que falta o jurídico ou o time preencher. `npm run verificar` recusa o deploy
 * enquanto houver um destes no `public/`. */
.preencher {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 4px;
  border-radius: 4px;
  outline: 1px dashed var(--sobre-terciaria-container);
  background: var(--terciaria-container);
  color: var(--sobre-terciaria-container);
}

/* ── Rodapé ───────────────────────────────────────────────────────────────── */

.rodape {
  border-top: 1px solid var(--contorno-variante);
  color: var(--sobre-superficie-variante);
  font-size: 0.875rem;
}

.rodape .conteudo {
  display: grid;
  gap: 16px;
  padding-block: 32px 40px;
}

.rodape nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape a {
  color: inherit;
}

.rodape p {
  margin: 0;
}