:root{
  --bg:#f7f9fb;
  --fg:#0f172a;
  --muted:#4b5563;
  --brand:#0ea5e9;
  --card:#ffffff;
  --shadow: 0 6px 18px rgba(2, 6, 23, .06);
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}

/* Tipografia solicitada */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, Arial;
  font-size:17px;
  line-height:1.7;
}

/* Layout centrado e “container fino” */
.wrap{
  max-width: 720px;
  margin: 28px auto 44px;
  padding: 18px 16px;
  display:flex;
  justify-content:center;
}

article{
  width:100%;
  background:var(--card);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding: 18px 18px 8px;
  transition: box-shadow .25s ease, transform .25s ease;
}

article:focus-within, article:hover{
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  transform: translateY(-1px);
}

/* Hierarquia de títulos nas medidas pedidas */
h1,h2{margin:0 0 10px 0; line-height:1.35}
h1{font-size:19px; text-align:center;}
h2{font-size:18px; text-align:left; margin-top:16px}

/* Texto e links */
p{margin: 10px 0; color:var(--fg)}
.muted{color:var(--muted)}
a{color:var(--brand); text-decoration:underline; text-underline-offset:3px;}
a:focus, a:hover{opacity:.9}

/* Botão sutil para CTA (Detector de Golpes) */
.cta{
  display:inline-block; padding:10px 14px; border-radius:12px; background:var(--brand); color:#fff;
  text-decoration:none; font-weight:600; transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 14px rgba(14,165,233,.25);
}
.cta:active{ transform: scale(.98);}

/* Separador leve para descanso visual */
.hr{height:1px; width:100%; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); margin:12px 0}

/* Acessibilidade */
a:focus{outline:2px solid #94a3b8; outline-offset:2px; border-radius:6px}

/* Ajustes em telas muito pequenas */
@media (max-width: 420px){
  .wrap{padding:12px}
  article{padding:16px 14px 6px}
}