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

*{ 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;
}

.header{ display:grid; place-items:center; }

.logo{
  width:min(240px, 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);
}

/* Texto pregunta + transición */
.question{
  margin:0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  white-space: pre-wrap;
  transition: opacity .35s ease, transform .35s ease;
  opacity: 1;
  transform: scale(1);
}

.question.fade-out{
  opacity:0;
  transform: scale(0.96);
}

.question.fade-in{
  opacity:1;
  transform: scale(1);
}

/* Botón-imagen */
.img-btn{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  width:110px;
  height:auto;
}

.img-btn img{
  width:100%;
  height:auto;
  display:block;
  transition: transform .15s ease, filter .15s ease;
}

.img-btn:hover img{
  transform: scale(1.05);
}

.img-btn:active img{
  transform: scale(0.96);
  filter: brightness(.9);
}

.img-btn:disabled{
  cursor: default;
  opacity: .85;
}

.footer{
  margin-top:8px;
  max-width: 720px;
  color: var(--muted);
  font-size: 14px;
  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); }