/*
  O site do ZenCal.

  Mesma paleta e mesma escala do aplicativo — quem chega pelo link da loja tem
  que reconhecer a mesma coisa. As regras que valem lá valem aqui: nenhum
  vermelho, um acento por tela, menta é preenchimento e nunca texto.
*/

:root {
  --menta: #00D68F;
  --menta-suave: #D5FEF0;
  --sobre-menta: #141312;

  --fundo: #F9F4F2;
  --superficie: #FFFFFF;
  --superficie2: #F1E9E4;
  --linha: #E7DDD7;

  --tinta: #141312;
  --tinta2: #6B6663;
  --tinta3: #726D67;

  --largura: 44rem;
  --raio: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --menta-suave: #0C2E23;
    --fundo: #101310;
    --superficie: #1A1E1A;
    --superficie2: #232823;
    --linha: #2F352F;
    --tinta: #EDF0EA;
    --tinta2: #A3AB9F;
    --tinta3: #8A9186;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 17/22, o Body do iOS — a mesma medida da tipografia do aplicativo. */
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.011em;
}

.envelope {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

/* Topo -------------------------------------------------------------- */

header.topo {
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
}

.topo .envelope {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  margin-inline-end: auto;
}

.marca picture { display: flex; }

.marca img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
}

nav.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

nav.menu a {
  color: var(--tinta2);
  text-decoration: none;
  font-size: 15px;
  /* 44 de alvo, o mínimo do HIG — vale no dedo do celular também. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 10px;
}

nav.menu a:hover { color: var(--tinta); background: var(--superficie2); }
nav.menu a[aria-current='page'] { color: var(--tinta); }

nav.menu a.idioma {
  border: 1px solid var(--linha);
  font-variant-numeric: tabular-nums;
}

/* Capa --------------------------------------------------------------- */

.capa {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--linha);
}

.capa h1 {
  /* 34/41, o Large Title, crescendo só no espaço que a tela dá. */
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin: 0 0 16px;
}

.capa p {
  font-size: 19px;
  color: var(--tinta2);
  margin: 0;
  max-width: 34rem;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--menta-suave);
  color: var(--tinta);
  font-size: 15px;
}

/* Miolo -------------------------------------------------------------- */

main { padding: 48px 0 8px; }

main h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

main h2 {
  font-size: 22px;
  line-height: 1.27;
  letter-spacing: -0.016em;
  margin: 40px 0 12px;
}

main p { margin: 0 0 16px; }

main ul {
  margin: 0 0 16px;
  padding-inline-start: 20px;
}

main li { margin-bottom: 10px; }

.vigencia {
  color: var(--tinta3);
  font-size: 15px;
  margin-bottom: 32px;
}

a { color: var(--tinta); text-decoration-color: var(--linha); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--menta); }

.nota {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin: 24px 0;
  color: var(--tinta2);
}

/* Passos e listas de cartão ------------------------------------------ */

.passos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 8px 0 16px;
}

.passo {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 24px;
}

.passo h3 {
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -0.012em;
}

.passo p { color: var(--tinta2); margin: 0; font-size: 15px; }

/* Contato ------------------------------------------------------------ */

.contato {
  margin: 48px 0 0;
  padding: 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.contato p { margin: 0; color: var(--tinta2); }
.contato a { font-weight: 600; }

/* Rodapé ------------------------------------------------------------- */

footer {
  margin-top: 64px;
  border-top: 1px solid var(--linha);
  padding: 32px 0 48px;
  color: var(--tinta3);
  font-size: 15px;
}

footer .envelope {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

footer nav { display: flex; gap: 16px; flex-wrap: wrap; margin-inline-start: auto; }
footer a { color: var(--tinta2); text-decoration: none; }
footer a:hover { text-decoration: underline; text-decoration-color: var(--menta); }

@media (max-width: 34rem) {
  .capa { padding: 48px 0 40px; }
  main { padding: 32px 0 8px; }
}