/* Clipa: guias e página 404. Só tokens de /tokens.css (docs/design-system.md).
   Separado do estilo.css: páginas de texto não carregam o peso da landing. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-moldura);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-md);
  font-weight: var(--p-normal);
  line-height: var(--a-texto);
}

h1, h2, .marca { font-family: var(--f-titulo); font-weight: var(--p-normal); line-height: var(--a-titulo); }
h1, h2 { margin: 0; text-wrap: balance; text-shadow: .06em .06em 0 var(--c-rosa); }
h1 { font-size: var(--t-h2); }
h2 { margin: var(--e-7) 0 var(--e-4); font-size: var(--t-2xl); }
h1 em, h2 em { font-style: normal; color: var(--c-ouro); }
p, li { text-wrap: pretty; }
p { margin: 0 0 var(--e-4); color: var(--c-pessego); }

a { color: var(--c-ouro); }
a:hover { color: var(--c-texto); }
a:focus-visible { outline: var(--borda) solid var(--c-foco); outline-offset: var(--e-1); }

.topo, .artigo, .rodape { max-width: 46rem; margin: 0 auto; padding-inline: var(--margem); }
.topo { padding-block: var(--e-5); }

.marca {
  color: var(--c-texto);
  font-size: var(--t-2xl);
  text-decoration: none;
  -webkit-text-stroke: calc(var(--borda) + var(--borda-forte)) var(--c-rosa);
  paint-order: stroke fill;
}
.marca:hover { color: var(--c-texto); }

.artigo { padding-block: var(--e-6) var(--e-7); }
.sub { margin-top: var(--e-5); font-size: var(--t-lg); }
.rotulo {
  margin-bottom: var(--e-3);
  color: var(--c-agua);
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--e-caixa);
  text-transform: uppercase;
}

.lista { margin: 0 0 var(--e-4); padding-left: var(--e-5); color: var(--c-pessego); }
.lista li { margin-bottom: var(--e-3); padding-left: var(--e-1); }
.lista li::marker { color: var(--c-ouro); font-weight: var(--p-forte); }
.lista strong { color: var(--c-texto); font-weight: var(--p-forte); }

.botao {
  display: inline-block;
  margin-top: var(--e-2);
  padding: var(--e-4) var(--e-6);
  background: var(--c-pessego);
  color: var(--c-moldura);
  border-radius: var(--raio);
  font-size: var(--t-lg);
  font-weight: var(--p-forte);
  text-align: center;
  text-decoration: none;
  transition: transform var(--d-rapido) var(--mola), box-shadow var(--d-rapido) var(--mola), background-color var(--d-rapido) linear;
}
.botao:hover { background: var(--c-ouro); color: var(--c-moldura); transform: translate(calc(var(--borda) * -1), calc(var(--borda) * -1)); box-shadow: var(--s-pop); }
.botao:active { transform: scale(.98); box-shadow: none; }

.chamada {
  margin-top: var(--e-7);
  padding: var(--e-5);
  background: var(--c-apagado);
  border: var(--borda-forte) solid var(--c-ouro);
}
.chamada h2 { margin-top: 0; }
.nota { margin: var(--e-3) 0 0; color: var(--c-lilas); font-size: var(--t-sm); }

.mais ul { margin: 0; padding: 0; list-style: none; }
.mais li { padding-block: var(--e-2); }

.erro { min-height: 50vh; }

.rodape { padding-block: var(--e-5) var(--e-7); border-top: var(--borda) solid var(--c-linha); color: var(--c-lilas); font-size: var(--t-sm); overflow-wrap: anywhere; }
.rodape p { margin-bottom: var(--e-2); color: inherit; }
.rodape a { color: inherit; }

@media (max-width: 480px) {
  .botao { display: block; padding-inline: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}