:root{--bg:#0b0b1a;--card:#16162b;--ink:#fff;--mute:#b5b5d6;--p:#6a6aff;--p2:#9999ff}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
img{max-width:100%;display:block}a{color:inherit}
.w{max-width:1000px;margin:auto;padding:0 20px}
section{padding:56px 0}h1,h2{margin-bottom:14px}h2{font-size:clamp(1.5rem,4vw,2.2rem)}
.mute{color:var(--mute)}.c{text-align:center}
header{position:sticky;top:0;z-index:9;background:#0b0b1af0;border-bottom:1px solid #ffffff1a}
header .w{display:flex;justify-content:space-between;align-items:center;height:76px;max-width:1200px}
header img{height:60px}nav{display:flex;gap:26px}
nav a{text-decoration:none;font-weight:600;color:var(--mute)}nav a:hover,nav a.on{color:var(--p2)}
#bg{display:none;background:none;border:0;color:#fff;font-size:1.8rem}
.btn{display:inline-block;padding:12px 26px;border-radius:6px;background:var(--p);color:#fff;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--p2)}.btn.o{background:none;border:2px solid var(--p)}
.full{width:100%;display:block}.banner{display:block}
.dt{background:url(img/dontuch-fondo.webp) center/cover;padding:40px 0;text-align:center}
.dt img{margin:0 auto 16px;max-width:560px;width:100%}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card .b{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card img.t{aspect-ratio:315/250;object-fit:cover;width:100%}
.lk{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.lk a{font-size:.85rem;padding:5px 12px;border-radius:5px;background:#ffffff1a;text-decoration:none}.lk a:hover{background:var(--p)}
.promo{background:linear-gradient(90deg,#3a3acc,#6a6aff);text-align:center;padding:48px 20px;border-radius:12px}
.promo p{margin-bottom:18px}
.feat{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}.feat span{font-size:2.2rem}
.team{display:flex;gap:40px;flex-wrap:wrap}.pp{text-align:center;max-width:200px}
.av{width:130px;height:130px;border-radius:50%;background:var(--p);display:grid;place-items:center;font-size:2.4rem;font-weight:800;margin:0 auto 8px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.tabs button{padding:8px 18px;border-radius:5px;border:1px solid #ffffff44;background:none;color:#fff;cursor:pointer;font-weight:600}
.tabs button.on{background:var(--p);border-color:var(--p)}
.ph{aspect-ratio:1;background:linear-gradient(135deg,#25254a,#16162b);display:grid;place-items:center;color:var(--mute);text-align:center;padding:12px;font-size:.9rem}
.pr{color:var(--p2);font-weight:700}
form{display:grid;gap:12px;max-width:540px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;padding:12px;border-radius:6px;border:1px solid #ffffff33;background:var(--card);color:#fff;font:inherit}
.ok{color:#7ee787;display:none}
.nl{background:var(--card);padding:36px 20px;text-align:center}.nl form{margin:14px auto 0;grid-template-columns:1fr auto}
footer{background:#07070f;padding:40px 0 20px}
.fc{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:20px 0}
.fc h4{margin-bottom:8px}.fc a{display:block;color:var(--mute);text-decoration:none;font-size:.95rem}.fc a:hover{color:var(--p2)}
.cp{color:var(--mute);font-size:.85rem;text-align:center;margin-top:20px}
@media(max-width:760px){#bg{display:block}nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);flex-direction:column;padding:16px 20px}nav.open{display:flex}.two,.nl form{grid-template-columns:1fr}}
/* --- TARJETA CTA STEAM INTERACTIVA --- */
.steam-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 28px;
  background: linear-gradient(135deg, #140808 0%, #2b0909 55%, #0f172a 100%);
  border: 2px solid #dc2626;
  border-radius: 12px;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.steam-cta-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: #38bdf8;
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.45);
}

.steam-cta-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #38bdf8;
  margin-bottom: 6px;
}

.steam-cta-title {
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.steam-cta-subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: #cbd5e1;
}

.steam-cta-action span {
  display: inline-block;
  padding: 12px 20px;
  background-color: #dc2626;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.steam-cta-card:hover .steam-cta-action span {
  background-color: #ef4444;
}

@media (max-width: 760px) {
  .steam-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}