/* /nome-de-duende/ e /certificado-de-bom-comportamento/: ferramentas grátis que rodam no navegador. Sem CDN. */
@font-face { font-family: "Great Vibes"; src: url(/fonts/GreatVibes-Regular-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url(/fonts/Lora-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url(/fonts/Lora-Italic-latin.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

.ferramenta { padding: .5rem 0 1.5rem; }
.ferramenta-grid { display: grid; gap: 1.5rem; align-items: start; }
.ferramenta .form-card { margin: 0; }
.ferramenta fieldset { min-width: 0; }
.ferramenta .acoes { display: grid; gap: .6rem; margin: 1rem 0 .5rem; }
.ferramenta textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 2px solid #B7C9E2; border-radius: 14px; background: #fff; color: var(--tinta); min-height: 8rem; resize: vertical; }
.ferramenta textarea:focus { border-color: var(--azul); }
.privado { font-size: .92rem; background: #EAF7F0; border: 1px solid #9CCFB0; border-radius: 14px; padding: .7rem .9rem; margin: 1rem 0 0; }
.status { min-height: 1.4em; font-size: .92rem; color: var(--verde-v); margin: .3rem 0 0; }
.exemplo { text-align: center; font-size: .88rem; background: #FFF8E5; border: 1px dashed var(--dourado); border-radius: 10px; padding: .4rem .6rem; margin: 0 0 .6rem; }
.resultado { font: 600 1.15rem/1.35 var(--titulo); color: var(--noite); min-height: 1.4em; margin: .8rem 0 0; }

/* Nome de duende: prévia do cartão 9:16 */
.cartao-previa { text-align: center; }
.cartao-previa canvas { width: min(100%, 20rem); height: auto; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 8px 26px rgba(20, 40, 90, .25); background: #22306B; }

/* Certificado: folha A4 deitada; tudo em cqw (1cqw = 1% da largura), então tela e papel têm a mesma proporção */
.certs { display: grid; gap: 1.2rem; }
.cert-box { container-type: inline-size; width: 100%; max-width: 46rem; margin-inline: auto; aspect-ratio: 297 / 210; background: #fffdf6; box-shadow: 0 6px 24px rgba(20, 40, 90, .2); }
.cert { position: relative; width: 100%; height: 100%; padding: 2.2cqw; color: #2a2118; font-family: Lora, Georgia, "Times New Roman", serif; font-size: 2cqw; line-height: 1.35; text-align: center; }
.cert-moldura { height: 100%; border: .9cqw solid #c9a227; outline: .35cqw solid #D62839; outline-offset: -1.9cqw; padding: 3.2cqw 6cqw 2.4cqw; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.cert p { margin: 0; }
.cert-kicker { font: 600 1.25cqw/1.2 Fredoka, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #7a5a14; }
.cert-titulo { font-family: "Great Vibes", "Brush Script MT", cursive; font-size: 5.6cqw; line-height: 1.05; color: #9e1b32; }
.cert-linha { font-size: 2.1cqw; font-style: italic; color: #5b4a38; }
.cert-nome { font-family: "Great Vibes", "Brush Script MT", cursive; font-size: 6.4cqw; line-height: 1.1; color: #12263a; border-bottom: .15cqw solid #c9a227; min-width: 55%; padding: 0 2cqw; overflow-wrap: anywhere; }
.cert-acao { font-size: 2.5cqw; font-weight: 600; color: #2a2118; max-width: 85%; overflow-wrap: anywhere; }
.cert-vazio { display: inline-block; min-width: 60%; border-bottom: .15cqw solid #8a7a66; }
.cert-rodape { display: grid; grid-template-columns: 1fr 13cqw 1fr; align-items: end; gap: 2cqw; width: 100%; }
.cert-data, .cert-assina { font-size: 1.6cqw; color: #5b4a38; }
.cert-data strong { display: block; font-weight: 600; color: #2a2118; border-bottom: .12cqw solid #8a7a66; padding-bottom: .4cqw; margin-bottom: .4cqw; }
.cert-assinatura { display: block; font-family: "Great Vibes", "Brush Script MT", cursive; font-size: 4.4cqw; line-height: 1; color: #12263a; border-bottom: .12cqw solid #8a7a66; padding-bottom: .3cqw; margin-bottom: .4cqw; }
.cert-selo svg { display: block; width: 100%; height: auto; }
.cert-site { font-size: 1.05cqw; color: #8a7a66; letter-spacing: .02em; }
/* versão econômica: só contorno, pouca tinta */
.certs[data-cor="economica"] .cert-box { background: #fff; }
.certs[data-cor="economica"] .cert-moldura { border-color: #555; outline-color: #999; border-width: .4cqw; }
.certs[data-cor="economica"] .cert-titulo, .certs[data-cor="economica"] .cert-nome, .certs[data-cor="economica"] .cert-kicker { color: #222; }
.certs[data-cor="economica"] .cert-selo { filter: grayscale(1); }

@media (min-width: 52rem) {
  .ferramenta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2rem; }
  .ferramenta-grid.cert-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .ferramenta .acoes { grid-template-columns: 1fr 1fr; }
}

/* Impressão do certificado: só as folhas, A4 deitada (o @page fica na própria página do certificado), uma por página */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.imprime-cert > :not(main), body.imprime-cert main > :not(#ferramenta), body.imprime-cert .nao-imprimir { display: none !important; }
  body.imprime-cert #ferramenta, body.imprime-cert #ferramenta .wrap, body.imprime-cert .ferramenta-grid, body.imprime-cert .certs { display: block !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  body.imprime-cert .cert-box { width: 297mm; max-width: none; height: 209mm; aspect-ratio: auto; box-shadow: none; margin: 0; break-inside: avoid; break-after: page; }
  body.imprime-cert .cert-box:last-child { break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}