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

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Public Sans", system-ui, sans-serif;
  background: var(--cor-fundo);
  color: var(--texto-principal);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--cor-primaria); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--texto-heading); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 12px; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.pula {
  position: absolute;
  left: -999px;
}
.pula:focus { left: 16px; top: 16px; background: var(--cor-superficie); padding: 8px 12px; z-index: 5; }

.site-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.marca-icone {
  width: 32px;
  height: 32px;
  border-radius: var(--raio-sm);
  background: var(--action-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}
.marca-texto { font-weight: 650; font-weight: 600; color: var(--texto-heading); }
.marca-sub { display: block; font-size: 11px; color: var(--texto-muted); font-weight: 500; }

.menu {
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu a {
  color: var(--texto-secundario);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
}
.menu a:hover { background: var(--cor-ativo-fundo); color: var(--cor-primaria); }

.envolve { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.pagina { padding: 28px 0 64px; }

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
  padding: 18px 0 8px;
}
.hero h1 { font-size: 40px; line-height: 1.15; margin: 10px 0 12px; }
.hero .lead { font-size: 16px; color: var(--texto-secundario); max-width: 46ch; }

.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.btn-primario { background: var(--action-primary); color: #fff; }
.btn-primario:hover { background: var(--action-primary-hover); }
.btn-secundario { background: var(--cor-superficie); color: var(--texto-heading); border-color: var(--cor-borda); }
.btn-secundario:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-fantasma { color: var(--texto-secundario); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-bloco { width: 100%; }

.selo {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 650;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cor-primaria-tinta);
  color: var(--cor-primaria);
}
.selo-pendente, .selo-atencao { background: var(--atencao-tinta); color: var(--atencao); }
.selo-pago, .selo-sucesso { background: var(--sucesso-tinta); color: var(--sucesso); }
.selo-expirado, .selo-cancelado { background: var(--gray-200); color: var(--texto-secundario); }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
}
.painel {
  background: var(--cor-superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  padding: 20px;
}
.cartao-ferramenta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-height: 180px;
  border: 1px solid transparent;
}
.cartao-ferramenta:hover { border-color: var(--cor-primaria); }
.cartao-ferramenta h2 { margin: 0; font-size: 16px; }
.cartao-ferramenta p { color: var(--texto-secundario); flex: 1; }
.cartao-ferramenta span { font-weight: 600; color: var(--cor-primaria); }

.secao { margin-top: 42px; }
.secao h2 { font-size: 22px; margin: 0 0 6px; }
.sub { color: var(--texto-secundario); margin: 0 0 16px; }

.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passo strong { display: block; font-size: 15px; margin-bottom: 4px; }
.passo span.num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--cor-primaria-tinta);
  color: var(--cor-primaria);
  font-weight: 700;
  margin-bottom: 8px;
}

.precos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.preco { display: flex; flex-direction: column; gap: 8px; }
.preco.destaque { outline: 2px solid var(--cor-primaria); }
.preco .valor { font-size: 28px; margin: 0; }
.preco p { color: var(--texto-secundario); flex: 1; }

.layout-ferramenta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}
.layout-ferramenta > *,
.hero > * { min-width: 0; }
.cabecalho-pagina { margin-bottom: 18px; }
.cabecalho-pagina h1 { font-size: 32px; margin: 8px 0; }
.breadcrumb { color: var(--texto-muted); font-size: 12px; }
.breadcrumb a { color: var(--texto-secundario); text-decoration: none; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-weight: 600; }
.campo:has([data-revelado-por]) { display: none; }
.campo.campo-visivel { display: flex; }
.campo span { font-size: 13px; }
.controle {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--texto-principal);
}
textarea.controle { min-height: 84px; resize: vertical; }
.controle:focus { outline: 2px solid var(--focus-outline); outline-offset: 1px; border-color: var(--cor-primaria); }
.ajuda, .erro { font-weight: 500; font-size: 12px; }
.ajuda { color: var(--texto-muted); }
.erro { color: var(--perigo); }

.alerta {
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  margin: 0 0 12px;
  background: var(--cor-ativo-fundo);
}
.alerta-error, .alerta-erro { background: var(--perigo-tinta); color: var(--perigo); }
.alerta-success, .alerta-sucesso { background: var(--sucesso-tinta); color: var(--sucesso); }
.alerta-info, .alerta-warning { background: var(--atencao-tinta); color: var(--texto-heading); }
.mensagens { list-style: none; padding: 0; margin: 0 0 12px; }

.previa-vazia {
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--texto-secundario);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 24px;
  background: var(--cor-superficie);
}
#previa.htmx-request { opacity: 0.55; }

.artigo { max-width: 68ch; }
.artigo p { color: var(--texto-secundario); }
.aviso {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--atencao);
  background: var(--atencao-tinta);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  color: var(--texto-heading);
}

.auth { display: grid; place-items: start center; }
.auth-painel { width: min(440px, 100%); }
.auth-painel h1 { margin-top: 0; }

.pix {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: center;
}
.pix img { width: 220px; height: 220px; background: #fff; border-radius: var(--raio-sm); }
.copia {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copia code {
  flex: 1;
  display: block;
  padding: 10px;
  background: var(--gray-100);
  border-radius: var(--raio-sm);
  word-break: break-all;
  font-size: 12px;
}

.lista { display: flex; flex-direction: column; gap: 8px; }
.lista a.linha, .linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cor-superficie);
  border-radius: var(--raio-sm);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
}
.lista a.linha:hover { background: var(--cor-ativo-fundo); }

.quadro-assinatura {
  width: 100%;
  height: 160px;
  touch-action: none;
  background: #fff;
  border: 1px dashed #a8a29e;
  border-radius: 8px;
  cursor: crosshair;
}

.site-rodape {
  border-top: 1px solid var(--cor-borda);
  padding: 22px 0 32px;
  color: var(--texto-muted);
}
.site-rodape .envolve { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-rodape a { color: var(--texto-secundario); text-decoration: none; margin-right: 12px; }

.variacoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.variacoes a {
  text-decoration: none;
  color: var(--texto-secundario);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
.variacoes a.ativo { color: var(--cor-primaria); border-color: var(--cor-primaria); background: var(--cor-primaria-tinta); }

.aparencia {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin: 0 0 16px;
  padding: 8px 12px 4px;
}
.aparencia legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-secundario);
}
@media (min-width: 640px) {
  .aparencia { display: flex; flex-wrap: wrap; gap: 12px; }
  .aparencia .campo { flex: 1 1 180px; }
}

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

@media (min-width: 640px) {
  .campo:has(#id_qt_prazo),
  .campo:has(#id_tp_prazo) {
    display: inline-flex;
    width: calc(50% - 6px);
    vertical-align: top;
  }
  .campo:has(#id_qt_prazo) { margin-right: 12px; }
}

@media (max-width: 860px) {
  .hero, .layout-ferramenta, .passos, .precos, .pix { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .site-topo { height: auto; min-height: var(--header-height); flex-wrap: wrap; padding: 10px 16px; }
  .folha-linha { grid-template-columns: 1fr; gap: 2px; }
  .menu { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .envolve { width: min(1120px, calc(100% - 24px)); }
  .hero { gap: 16px; padding-top: 8px; }
  .hero h1, .cabecalho-pagina h1 { font-size: 26px; }
  .marca-sub { display: none; }
  .menu { width: 100%; gap: 2px; }
  .menu a, .menu .btn { padding: 8px; }
  .pagina { padding: 18px 0 40px; }
  .painel { padding: 16px; }
  .folha { padding: 16px 14px 14px; }
  .folha h2 { font-size: 18px; }
  .classico-topo { flex-direction: column; gap: 12px; }
  .classico-meta, .classico-local { text-align: left; margin-left: 0; }
  .classico-assinaturas { flex-direction: column; align-items: center; }
  .marca-dagua { font-size: 26px; letter-spacing: 0.08em; }
  .controle, select.controle, textarea.controle { font-size: 16px; }
  form.painel .acoes, .hero .acoes { flex-direction: column; }
  form.painel .acoes .btn, .hero .acoes .btn { width: 100%; }
  .pix img { width: min(220px, 100%); height: auto; }
  .copia { flex-direction: column; align-items: stretch; }
  .linha { flex-direction: column; align-items: flex-start; }
  .variacoes { gap: 6px; }
  .campo:has(#id_qt_prazo),
  .campo:has(#id_tp_prazo) {
    display: flex;
    width: 100%;
    margin-right: 0;
  }
}