:root {
  --fundo: #faf7f2;
  --texto: #2b2620;
  --suave: #6b6259;
  --borda: #d8cfc2;
  --campo: #ffffff;
  --cartao: #ffffff;
  --destaque: #4a7a26; /* verde do trevo */
  --destaque-texto: #ffffff;
  --foco: #4a7a26;
  --marca: #3d6a1f;
  --erro: #a3392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1c1a1f;
    --texto: #ece6dd;
    --suave: #a49b90;
    --borda: #3a3640;
    --campo: #25222a;
    --cartao: #211f26;
    --foco: #9fce6e;
    --marca: #9fce6e;
    --erro: #ee8f80;
  }
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 1.0625rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* A página cabe na janela sem rolagem: o campo de texto é o que encolhe/cresce com a altura. */
main {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
}
main > * { flex: none; }
#form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#form > * { flex: none; }
.marca { text-align: center; margin-bottom: .75rem; }
.marca img { display: block; width: 7rem; height: 7rem; margin: 0 auto; }
.nome-site { margin: 0; font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: .02em; color: var(--marca); }
.intro { color: var(--suave); margin: 0 0 .9rem; }

label { display: block; font-weight: 600; margin-bottom: .3rem; }
textarea {
  display: block;
  width: 100%;
  padding: .75rem;
  font: inherit;
  color: inherit;
  background: var(--campo);
  border: 1px solid var(--borda);
  border-radius: .5rem;
  resize: vertical;
  min-height: 9rem;
}
#texto { flex: 1 1 auto; min-height: 5rem; resize: none; }
textarea:focus-visible, button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.contador { margin: .25rem 0 .75rem; text-align: right; font-size: .875rem; color: var(--suave); }
.contador.no-limite { color: var(--erro); }

.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

button {
  width: 100%;
  padding: .75rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--destaque-texto);
  background: var(--destaque);
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: progress; }

#status { min-height: 1.4em; margin: .5rem 0 0; font-weight: 500; }
#status.erro { color: var(--erro); }
.aviso { margin: .9rem 0 0; font-size: .875rem; color: var(--suave); }
.rodape { margin: .75rem 0 0; padding-top: .6rem; border-top: 1px solid var(--borda); text-align: center; font-size: .875rem; color: var(--suave); }
.versao { display: block; margin-top: .15rem; font-size: .8rem; opacity: .85; }
.link {
  display: inline;
  width: auto;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  text-decoration: underline;
  cursor: pointer;
}

/* Modal de confirmação (<dialog> nativo: centralizado, com fundo escurecido e foco preso). */
dialog {
  width: min(22rem, calc(100% - 2rem));
  padding: 1.75rem 1.5rem 1.5rem;
  color: var(--texto);
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgb(0 0 0 / .3);
  text-align: center;
}
dialog::backdrop { background: rgb(0 0 0 / .55); }
dialog img { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto .5rem; }
dialog h2 { margin: 0 0 .5rem; font-size: 1.35rem; color: var(--marca); }
dialog p { margin: 0 0 1.25rem; color: var(--suave); }
dialog button { width: 100%; }

/* Modal de contato: formulário alinhado à esquerda. */
#contato { width: min(30rem, calc(100% - 2rem)); text-align: left; }
#contato h2 { text-align: center; margin-bottom: 1rem; }
#contato label { margin-top: 1rem; }
#contato h2 + label { margin-top: 0; }
#contato .opcional { font-weight: 400; color: var(--suave); }
#contato input[type="text"] {
  display: block;
  width: 100%;
  padding: .7rem .75rem;
  font: inherit;
  color: inherit;
  background: var(--campo);
  border: 1px solid var(--borda);
  border-radius: .5rem;
}
#contato input[type="text"]:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
#contato textarea { min-height: 7rem; }
.acoes-contato { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
#status-contato { min-height: 1.6em; margin: .75rem 0 0; color: var(--suave); font-weight: 500; text-align: center; }
#status-contato.erro { color: var(--erro); }
button.secundario { color: var(--texto); background: transparent; border: 1px solid var(--borda); }

/* Tablet e desktop: cartão centralizado, tipografia e campo maiores. */
@media (min-width: 48rem) {
  body { display: grid; place-items: center; font-size: 1.125rem; }
  main {
    width: 100%;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 1rem 0;
    padding: 1.75rem 3rem;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / .06);
  }
  .marca { margin-bottom: 1rem; }
  .marca img { width: 9rem; height: 9rem; }
  .nome-site { font-size: 2.5rem; }
  .intro { margin-bottom: 1.1rem; }
  button { width: auto; min-width: 12rem; }
  dialog button { width: auto; min-width: 9rem; }
  .acoes-contato { flex-direction: row-reverse; justify-content: flex-start; }
  .acoes { display: flex; align-items: center; gap: 1.25rem; }
  #status { margin: 0; }
}

/* Telas baixas (celular deitado): menos respiro vertical. */
@media (max-height: 30rem) {
  #texto { min-height: 4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  button { transition: opacity .15s; }
}