/* App do celular (public/app/). Mesmas cores e fontes do site, mas
   feito para tela pequena e dedo: letra maior, botões grandes. */
@font-face{font-family:'Lora'; font-weight:400 700; font-display:swap; src:url('../assets/fonts/lora.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3'; font-weight:400 600; font-display:swap; src:url('../assets/fonts/source-sans-3.woff2') format('woff2');}

:root{
  --bg:#FAF8F3; --surface:#FFFFFF; --ink:#243430; --ink-soft:#6B7570;
  --accent:#1F4741; --accent-soft:#E7EEEA; --accent-dark:#16332E;
  --line:#E3DFD3; --warn:#B5502F; --warn-soft:#F6E9E2;
  --serif:'Lora', Georgia, serif; --sans:'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.5;}

.a-top{background:var(--accent); color:#FAF8F3; font-family:var(--serif); font-size:1.25rem;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;}
.a-mark{width:24px; height:24px; border-radius:50%; border:1.5px solid #FAF8F3; position:relative; flex-shrink:0;}
.a-mark::after{content:""; position:absolute; left:4px; right:4px; top:50%; height:1.4px; background:#FAF8F3; transform:translateY(-50%) rotate(-8deg);}

.a-main{max-width:480px; margin:0 auto; padding:22px 16px calc(30px + env(safe-area-inset-bottom));}
.a-lead{font-family:var(--serif); font-size:1.2rem; text-align:center; margin:6px 0 20px;}
.a-hello{font-family:var(--serif); font-weight:500; font-size:1.55rem; margin:4px 0 18px;}

.a-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px;}
.a-card h2{font-family:var(--serif); font-weight:500; font-size:1.2rem; margin:0 0 8px;}
.a-card p{margin:0 0 12px;}
.a-card--warn{background:var(--warn-soft); border-color:var(--warn);}
.a-card--warn h2{color:var(--warn);}

.a-life{text-align:center; padding:26px 20px;}
.a-check{width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-size:2rem; line-height:64px; font-weight:600;}
.a-late{color:var(--warn); font-weight:600;}

.a-form label{display:block; font-weight:600; margin:0 0 6px;}
.a-form input{display:block; width:100%; font:inherit; font-size:1.1rem; padding:14px; margin:0 0 16px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);}
.a-form input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}

.a-btn{display:block; width:100%; text-align:center; font:inherit; font-weight:600; font-size:1.1rem;
  padding:15px 18px; border-radius:12px; border:1px solid var(--accent); background:var(--accent); color:#FAF8F3;
  text-decoration:none; cursor:pointer; margin-top:10px;}
.a-btn:active{filter:brightness(.92);}
.a-btn--big{font-size:1.3rem; padding:22px 18px; border-radius:16px; margin-top:14px;}
.a-btn--ghost{background:transparent; color:var(--accent);}
.a-btn--warn{background:var(--warn); border-color:var(--warn);}
.a-btn--site{margin-top:20px;}

.a-row{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.a-tag{font-size:.9rem; font-weight:600; padding:4px 12px; border-radius:20px;}
.a-tag--ok{background:var(--accent-soft); color:var(--accent-dark);}
.a-tag--warn{background:var(--warn-soft); color:var(--warn);}
.a-plan .a-soft{margin:10px 0 0;}
.a-plan p:not(.a-soft){margin:12px 0 0;}

.a-alert{border-radius:10px; padding:12px 14px; margin-bottom:16px;}
.a-alert--ok{background:var(--accent-soft); color:var(--accent-dark); border:1px solid var(--accent);}
.a-alert--warn{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);}

.a-soft{color:var(--ink-soft); font-size:.95rem;}
.a-center{text-align:center;}
.a-links{display:flex; flex-direction:column; align-items:center; gap:12px; margin:18px 0 0;}
.a-links a{color:var(--accent); font-size:1rem;}
.a-install{margin-top:22px;}
.a-ios{margin:22px 0 0; font-size:.95rem; color:var(--ink-soft); text-align:center;}
.a-langs{display:flex; justify-content:center; gap:18px; margin-top:24px;}
.a-langs a{color:var(--ink-soft); text-decoration:none; font-size:.95rem; padding:6px 2px;}
.a-langs a.is-on{color:var(--accent); font-weight:600; border-bottom:2px solid var(--accent);}