:root{
  --sky1:#6fc1ff;
  --sky2:#c7b4ff;
  --ink:#0b1b30;
  --title:#09172b;
  --panel:#ffffff;
  --shadow: 0 14px 30px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background: linear-gradient(180deg, var(--sky1), var(--sky2));
  min-height:100vh;
}
header{text-align:center; padding:18px 14px 6px}
.logo{ width:min(360px, 82vw); height:auto; display:block; margin:0 auto 8px;
       filter: drop-shadow(0 8px 18px rgba(0,0,0,.12)); border-radius:20px }
.title{ font-family:'Fredoka', system-ui; color:#ef476f; font-size:clamp(26px,5.2vw,42px); margin:4px 0 2px; }
.subtitle{ color:#334155; margin:0 0 10px; font-weight:600; }
.section{ max-width:940px; margin:0 auto; padding:0 16px 24px; }
.card{ background:var(--panel); margin:16px 0; padding:18px 16px; border-radius:24px; box-shadow:0 14px 30px rgba(0,0,0,.14); }
h2{ margin:0 0 12px; color:var(--title) }
.audio-wrap{ background:#f1f5f9; border-radius:18px; padding:12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) }
audio{ width:100% }

.grid{ display:grid; gap:16px; grid-template-columns: 1fr; }
@media(min-width:760px){ .grid{ grid-template-columns: repeat(3, 1fr); } }

.tile{
  border-radius:28px; padding:18px 16px; color:#0f172a; font-weight:700;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  position:relative; overflow:hidden; min-height:120px;
}
.tile h3{ margin:0 0 10px; font-size:1.15rem; color:#0c1222 }
.tile a{
  position:absolute; left:16px; bottom:16px;
  background:#ff4f85; color:#fff; text-decoration:none; font-weight:800;
  padding:10px 16px; border-radius:14px; box-shadow: 0 6px 12px rgba(0,0,0,.16);
}
.tile::after{
  content:""; position:absolute; right:-18px; top:-18px; width:110px; height:110px;
  border-radius:50%; opacity:.18; background:#fff;
}
.tile.memoria{ background: linear-gradient(135deg,#ffd86a,#ffae34); }
.tile.burbujas{ background: linear-gradient(135deg,#70e1ff,#63d5c7); }
.tile.dominoes{ background: linear-gradient(135deg,#a98bff,#7ac4ff); }

.thought{ background:#d9edff; border-radius:16px; padding:14px; font-size:1.05rem }
footer{ text-align:center; background:#0f172a; color:white; padding:16px; border-top:6px solid #ffbd3b }
.badge{ color:#ffbd3b; font-weight:700 }