/* ===================== Sempre-viva · base comum =====================
   Tokens, tipografia e componentes compartilhados por todas as páginas (site, memorial, área da família, painel).
   Espec.: docs/superpowers/specs/2026-11-03-sempreviva-design.md, seção 3. Design no Penpot: página 01 · Fundamentos.
   Cada página carrega: /css/fontes.css, /css/base.css e depois o seu CSS próprio. */

:root {
  --papel: #F2F3EF; --branco: #FFFFFF; --grafite: #23292B; --grafite-muted: #5C6566; --linha: #D5D9D3; --linha-forte: #BFC5BE;
  --musgo: #3E5B4B; --musgo-escuro: #2C4337; --musgo-soft: #DCE5DE;
  --palha: #B4852F; --palha-ink: #7C5A17; --palha-soft: #F1E6CC;
  --granito: #2A2F2E; --granito-texto: #E8EAE6; --granito-muted: #A9B0AC; --granito-linha: #3E4543;
  --erro: #A3352B; --erro-soft: #F6E1DE; --azul: #35557A; --azul-soft: #DFE7F1; --lilas: #5E4B7A; --lilas-soft: #ECE6F3;
  --neutro-soft: #E6E8E4; --tinta: #1F2426;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio-campo: 6px; --raio-folha: 10px; --raio-cartao: 12px;
  --sombra-folha: 0 1px 2px rgba(35, 41, 43, .12), 0 8px 24px rgba(35, 41, 43, .08);
  --coluna-leitura: 680px; --conteudo: 1200px;
  --gutter: 20px;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--grafite);
  font: 400 17px/1.5 var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--musgo); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--musgo-escuro); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--musgo); outline-offset: 2px; border-radius: 4px; }
.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; }

/* ---- tipografia ---- */
.t-display { font: 500 42px/1.08 var(--serif); }
.t-secao { font: 500 32px/1.12 var(--serif); }
.t-sub { font: 500 22px/1.25 var(--serif); }
.t-leitura { font: 400 19px/1.65 var(--serif); }
.t-pequeno { font-size: 15px; line-height: 1.45; }
.t-legenda { font-size: 13px; line-height: 1.4; }
.t-muted { color: var(--grafite-muted); }
@media (min-width: 900px) {
  .t-display { font-size: 68px; line-height: 1.04; }
  .t-secao { font-size: 44px; line-height: 1.1; }
  .t-sub { font-size: 26px; }
  .t-leitura { font-size: 20px; }
}

/* ---- ícones (sprite /img/icones.svg) ---- */
.icone { width: 20px; height: 20px; flex: none; }

/* ---- botões ---- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--raio-campo); border: 1.5px solid transparent;
  font: 700 17px/1.2 var(--ui); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--musgo); color: var(--branco); transition: background-color .15s, border-color .15s, color .15s;
}
.botao:hover { background: var(--musgo-escuro); color: var(--branco); }
.botao--secundario { background: transparent; color: var(--grafite); border-color: var(--grafite); }
.botao--secundario:hover { background: var(--grafite); color: var(--branco); }
.botao--branco { background: var(--branco); color: var(--grafite); border-color: var(--linha); }
.botao--branco:hover { background: var(--papel); color: var(--grafite); border-color: var(--linha-forte); }
.botao--suave { background: var(--musgo-soft); color: var(--musgo-escuro); }
.botao--suave:hover { background: #CBD8CE; color: var(--musgo-escuro); }
.botao--claro { background: var(--papel); color: var(--grafite); }
.botao--claro:hover { background: var(--branco); color: var(--grafite); }
.botao--contorno-claro { background: transparent; color: var(--granito-texto); border-color: var(--granito-muted); }
.botao--contorno-claro:hover { background: rgba(255, 255, 255, .08); color: var(--branco); }
.botao--perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.botao--perigo:hover { background: var(--erro-soft); color: var(--erro); }
.botao--fantasma { background: transparent; color: var(--musgo); padding: 0 4px; min-height: 40px; }
.botao--fantasma:hover { background: transparent; color: var(--musgo-escuro); text-decoration: underline; }
.botao--pequeno { min-height: 44px; padding: 0 16px; font-size: 15px; }
.botao--bloco { display: flex; width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---- campos ---- */
.campo { display: grid; gap: 6px; }
.campo__rotulo { font-weight: 700; font-size: 15px; line-height: 1.3; }
.campo__opcional { font-weight: 400; font-size: 13px; color: var(--grafite-muted); margin-left: 6px; }
.campo__entrada {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--raio-campo);
  border: 1.25px solid var(--linha-forte); background: var(--branco); font-size: 17px; line-height: 1.3;
}
.campo__entrada::placeholder { color: var(--grafite-muted); opacity: 1; }
.campo__entrada:focus { outline: none; border: 2px solid var(--musgo); padding: 11.25px 13.25px; }
textarea.campo__entrada { min-height: 120px; resize: vertical; line-height: 1.55; }
.campo__entrada--serif { font-family: var(--serif); font-size: 18px; }
.campo__dica { font-size: 14px; color: var(--grafite-muted); line-height: 1.4; }
.campo--erro .campo__entrada { border: 2px solid var(--erro); }
.campo--erro .campo__dica { color: var(--erro); }
select.campo__entrada { appearance: none; padding-right: 40px; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235C6566' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center; }
.caixa { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.caixa input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--musgo); flex: none; }

/* ---- selos (situações) ---- */
.selo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 20px; font: 700 14px/1.25 var(--ui); white-space: nowrap; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo--aguardando_pagamento, .selo--pendente { background: var(--palha-soft); color: var(--palha-ink); }
.selo--pago, .selo--publicado, .selo--aprovada { background: var(--musgo-soft); color: var(--musgo); }
.selo--em_producao { background: var(--azul-soft); color: var(--azul); }
.selo--enviado, .selo--em_revisao { background: var(--lilas-soft); color: var(--lilas); }
.selo--entregue { background: var(--neutro-soft); color: var(--grafite); }
.selo--rascunho { background: var(--neutro-soft); color: var(--grafite-muted); }
.selo--cancelado, .selo--oculto, .selo--recusada { background: var(--erro-soft); color: var(--erro); }

/* ---- identidade ---- */
.marca { display: inline-flex; align-items: flex-end; gap: 9px; color: var(--grafite); text-decoration: none; font: 500 26px/1 var(--serif); }
.marca img { width: 26px; height: 35px; }
.marca:hover { color: var(--grafite); }
.arco { border-radius: 9999px 9999px 0 0; overflow: hidden; aspect-ratio: 1 / 1.3; background: var(--linha); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.herbario { position: relative; background: var(--branco); padding: 4.5%; padding-bottom: 12px; box-shadow: var(--sombra-folha); border-radius: 2px; margin: 0; }
.herbario::before, .herbario::after {
  content: ""; position: absolute; top: -6px; width: 26%; max-width: 56px; aspect-ratio: 3.1; background: rgba(241, 230, 204, .82);
}
.herbario::before { left: -4%; transform: rotate(-38deg); }
.herbario::after { right: -4%; transform: rotate(38deg); }
.herbario img { width: 100%; height: auto; }
.herbario figcaption { display: flex; justify-content: space-between; gap: 8px; padding-top: 9px; font-size: 13px; line-height: 1.35; }
.herbario figcaption b { color: var(--palha-ink); font-weight: 700; }

/* ---- aviso de demonstração ---- */
.aviso-demo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px var(--gutter); background: var(--palha-soft); color: var(--palha-ink); font-weight: 700; font-size: 14px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}