:root{
  --bg:#000;
  --text:#fff;
  --muted: rgba(255,255,255,.72);
  --btn:#fff;
  --btnText:#000;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.wrap{
  width:min(900px, 92vw);
  display:grid;
  gap:18px;
  justify-items:center;
  text-align:center;
  padding:28px 0 18px;
}

.logo{
  width:min(260px, 64vw);
  height:auto;
  display:block;
}

/* Bola de cristal */
.crystal{
  width:min(430px, 86vw);
  aspect-ratio: 1 / 1;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:grid;
  place-items:center;
  padding:28px;

  /* look cristal sutil */
  box-shadow:
    0 22px 70px rgba(255,255,255,.10),
    inset 0 0 0 10px rgba(255,255,255,.60),
    inset 0 -40px 90px rgba(0,0,0,.08);
}

.question{
  margin:0;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.35;
  white-space: pre-wrap;
}

.btn{
  border:0;
  cursor:pointer;
  padding:14px 18px;
  border-radius:14px;
  background:var(--btn);
  color:var(--btnText);
  font-weight:900;
  font-size:16px;
  width:min(280px, 80vw);
}

.btn:hover{ filter:brightness(.92); }
.btn:active{ transform:translateY(1px); }

.footer{
  margin-top:8px;
  max-width: 720px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.footer-text{ margin:0 0 8px 0; }
.footer-links{ margin:0; }
.footer a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.footer a:hover{ border-bottom-color: rgba(255,255,255,.6); }
.sep{ margin: 0 10px; color: rgba(255,255,255,.35); }