:root{
  --bg1:#120606; 
  --bg2:#3a0d0d; 
  --gold:#d4b36c; 
  --gold-2:#b7934f; 
  --glass:rgba(255,255,255,.06);
  --text:#f3f3f3; 
  --muted:#d7d7d7; 
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% 10%, var(--bg2), transparent),
              radial-gradient(1000px 700px at 90% 90%, #220909, transparent),
              linear-gradient(145deg, var(--bg1), #1d0a0a 60%, #0b0404);
  display:grid; 
  place-items:center;
}

.wrap{
  width:min(920px, 92vw); 
  text-align:center; 
  padding:32px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; 
  padding:48px 28px; 
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
}

.logo{
  width:min(220px, 48vw); 
  aspect-ratio:1/1; 
  object-fit:contain; 
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
}

h1{
  margin:18px 0 8px; 
  font-size:clamp(26px, 4.5vw, 42px); 
  letter-spacing:.3px;
}

.subtitle{
  margin:0 auto 18px; 
  max-width:40ch; 
  color:var(--muted); 
  font-size:clamp(15px, 2.6vw, 18px);
}

.badge{
  display:inline-block; 
  margin:10px 0 22px; 
  padding:6px 12px; 
  border-radius:999px; 
  font-weight:600; 
  letter-spacing:.3px; 
  color:#24150a;
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); 
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 18px rgba(212,179,108,.35);
}

.grid {
  display: flex;
  flex-wrap: wrap;       /* Si algún día hay demasiados, hace salto limpio */
  justify-content: center;
  gap: 14px;
  margin: 22px 0 10px;
}

.tile{
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:12px 14px; 
  border-radius:14px; 
  border:1px solid rgba(255,255,255,.09);
  background:var(--glass); 
  text-decoration:none; 
  color:var(--text); 
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.tile:hover{ 
  transform: translateY(-2px); 
  border-color: rgba(212,179,108,.6); 
  background: rgba(212,179,108,.08); 
}

.tile span{font-size:14px}

.icon{
  width:22px; 
  height:22px; 
  flex:0 0 22px;
}

.contact{
  margin-top:26px; 
  font-size:14px; 
  color:var(--muted);
}
.contact a{color:var(--gold); text-decoration:none}

footer{
  margin-top:28px; 
  font-size:12px; 
  color:#cfcfcf80;
}

.divider{
  height:1px; 
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); 
  margin:18px 0;
}