:root{
  --fundo:#eef1f5; --papel:#fff; --texto:#1d2733; --suave:#5d6b7a;
  --azul:#24476b; --dourado:#c8962e; --borda:#d6dce3; --erro:#a4302a; --ok:#2c6e49;
}
@media (prefers-color-scheme:dark){
  :root{--fundo:#141a21; --papel:#1d252e; --texto:#e8ecf0; --suave:#9aa7b4; --azul:#7fa8d1; --borda:#2f3a46;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--fundo);color:var(--texto);
     font:16px/1.6 Georgia,"Times New Roman",serif;
     padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.folha{width:100%;max-width:520px;margin:clamp(0rem,6vh,3rem) auto;padding:clamp(1.2rem,5vw,2rem);
       background:var(--papel);border:1px solid var(--borda);border-radius:14px}
h1{font-size:clamp(1.4rem,6vw,1.8rem);margin:0 0 .4rem;line-height:1.2}
.sub{color:var(--suave);margin:0 0 1.2rem;font-size:.95rem}
label{display:block;margin:1.1rem 0 .35rem;font:600 .95rem system-ui,sans-serif}
input,textarea{display:block;width:100%;min-height:48px;padding:.7rem .85rem;border:1px solid var(--borda);
               border-radius:10px;background:var(--fundo);color:var(--texto);font:inherit;font-size:16px}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus,button:focus-visible{outline:3px solid var(--dourado);outline-offset:1px}
.cont{display:block;margin-top:.3rem;text-align:right;font:.8rem system-ui,sans-serif;color:var(--suave)}
button{width:100%;min-height:52px;margin-top:1.3rem;border:0;border-radius:10px;background:var(--azul);color:#fff;
       font:700 1.05rem system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.98)}
@media (prefers-color-scheme:dark){button{color:#10161c}}
.aviso{padding:.4rem .75rem;margin:0 0 .8rem;border-radius:8px;overflow:hidden;font:.8rem/1.35 system-ui,sans-serif}
.aviso.ok{background:#e3f2e9;color:var(--ok);animation:some 6s ease forwards}
.aviso.erro{background:#f8e4e2;color:var(--erro)}
@keyframes some{0%,80%{opacity:1;max-height:4rem}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0}}
@media (prefers-reduced-motion:reduce){.aviso.ok{animation:none}}
@media (max-width:480px){
  body{padding-left:.6rem;padding-right:.6rem;font-size:15px}
  .folha{margin-top:.4rem;padding:1rem}
  h1{font-size:1.3rem}
  .sub{font-size:.85rem;margin-bottom:.9rem}
  label{font-size:.85rem;margin:.9rem 0 .3rem}
  input,textarea{min-height:44px;padding:.6rem .75rem;font-size:16px} /* 16px evita zoom automático no iPhone */
  textarea{min-height:120px}
  button{min-height:46px;margin-top:1.1rem;font-size:.95rem}
  .aviso{font-size:.78rem;padding:.35rem .65rem}
}