/* Minimal, limpio y fácilmente personalizable */
:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22d3ee;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  background: radial-gradient(1200px 700px at 10% 10%, #1f2937 0, #0f172a 60%);
  color:var(--text);
  line-height:1.6;
}

.wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 20px 32px;
}

.header{
  text-align:center;
  padding: 28px 20px 10px;
}

.logo{
  max-height:250px;
  width:auto;
  margin: 0 auto 16px;
  display:block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.3));
}

h1{
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.15;
  margin:8px 0 4px;
  letter-spacing:-0.02em;
}

.lead{
  margin:0 auto;
  max-width:52ch;
  color:var(--muted);
  font-size:clamp(16px, 2.3vw, 18px);
}

.info, .tips{
  margin:28px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.info ul{
  padding-left:16px;
}

.info li{
  margin:8px 0;
}

.tips h2{
  margin: 0 0 8px;
  font-size:20px;
}

code{background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px}

.footer{
  margin-top:36px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer a:hover {
  color: #38e0ff;
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
}