/* Reset, tipografia e os elementos crus (body, títulos, campos, botões).
   Nada aqui depende de uma tela específica. */

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* A cor de fundo vive no <html> para que as camadas do fundo com a foto
     (z-index negativo) fiquem por cima dela e por baixo do conteúdo. */
  html{background:var(--fundo)}
  body{margin:0;background:transparent;color:var(--txt);
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       font-size:15px;line-height:1.45;padding-bottom:88px}
  h1,h2,h3{margin:0 0 10px;line-height:1.2}
  /* clamp: em 360px a saudação com nome cabia em duas linhas e espremia
     o selo da ofensiva. Encolhe até 19px e volta a 22px quando há espaço. */
  h1{font-size:clamp(19px,5.2vw,22px)} h2{font-size:18px} h3{font-size:15px}
  a{color:var(--info)}
  .muted{color:var(--txt-fraco);font-size:13px}

  input,select,textarea{width:100%;background:var(--superficie2);border:1px solid var(--linha);
    color:var(--txt);border-radius:10px;padding:12px;font-size:16px;font-family:inherit}
  textarea{min-height:90px;resize:vertical}
  label{display:block;font-size:13px;color:var(--txt-fraco);margin:12px 0 6px}

  button{font-family:inherit;font-size:15px;border-radius:10px;border:1px solid var(--linha);
    background:var(--superficie2);color:var(--txt);padding:12px 14px;cursor:pointer}
  input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;padding:0}

  .hide{display:none!important}
  .center{text-align:center}