/* Inteligent IQ - Diseño infantil colorido 🌈 */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', 'Comic Sans MS', cursive, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #ffd452 100%);
  background-attachment: fixed;
  min-height: 100vh;
  padding: 20px;
  color: #333;
}
.container { max-width: 700px; margin: 0 auto; }

.header {
  text-align:center;
  background: linear-gradient(135deg, #fff 0%, #ffeef8 100%);
  border-radius: 30px;
  padding: 30px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border: 4px solid #fff;
  margin-bottom: 20px;
}
.header h1 {
  font-size: 2.8rem;
  background: linear-gradient(90deg, #667eea, #f5576c, #ffd452, #00d2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.1));
}
.subtitle { font-size:1.2rem; color:#764ba2; margin:8px 0; font-weight: 600; }
.badge {
  display:inline-block;
  background: linear-gradient(90deg, #ff9a9e, #fecfef);
  color:#d6336c;
  padding:6px 16px;
  border-radius:20px;
  font-weight:bold;
  border:2px dashed #ff6b9d;
}

.card {
  background: rgba(255,255,255,0.97);
  border-radius: 25px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.card h2 { text-align:center; margin-bottom:15px; color:#5a3d8a; font-size:1.5rem; }

/* Edad */
.age-selector { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:15px; }
.age-btn {
  width:52px; height:52px;
  border-radius:15px;
  border:3px solid #e0c3ff;
  background: linear-gradient(145deg, #f3e8ff, #e9d5ff);
  font-size:1.1rem; font-weight:bold; color:#7c3aed;
  cursor:pointer; transition: all 0.2s;
}
.age-btn:hover { transform: scale(1.1) rotate(3deg); background: linear-gradient(145deg, #ddd6fe, #c4b5fd);}
.age-btn.active {
  background: linear-gradient(145deg, #7c3aed, #ec4899);
  color:white; border-color:#7c3aed;
  transform: scale(1.15);
  box-shadow: 0 4px 15px rgba(124,58,237,0.4);
}
.age-display { text-align:center; font-size:1.1rem; font-weight:bold; color:#6d28d9; }
.slider { width:100%; margin:12px 0 5px; accent-color:#7c3aed; height:8px; }
.slider-labels { display:flex; justify-content:space-between; font-size:0.8rem; color:#9ca3af; padding:0 5px; }

/* IQ */
.iq-display {
  text-align:center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color:white;
  border-radius:20px;
  padding:25px;
  margin-bottom:15px;
  box-shadow: inset 0 0 20px rgba(255,255,255,0.2);
}
.iq-number { font-size:4rem; font-weight:900; display:block; text-shadow: 3px 3px 0 rgba(0,0,0,0.2); line-height:1; }
.iq-label { font-size:1rem; opacity:0.9; letter-spacing:2px; text-transform:uppercase; }
.iq-mensaje { text-align:center; font-size:1.15rem; font-weight:600; color:#4c1d95; min-height:1.5em; }
.iq-detalle { text-align:center; font-size:0.95rem; color:#6b7280; margin:5px 0 15px; min-height:1.2em; }

.btn {
  display:block; width:100%;
  padding:16px; border:none; border-radius:18px;
  font-size:1.2rem; font-weight:bold; cursor:pointer;
  transition: all 0.2s; color:white;
}
.btn-generar {
  background: linear-gradient(90deg, #f093fb, #f5576c, #ffd452);
  box-shadow: 0 6px 20px rgba(245,87,108,0.4);
  font-size:1.35rem;
}
.btn-generar:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 30px rgba(245,87,108,0.5); }
.btn-generar:active { transform: translateY(0) scale(0.98); }

.barra-container { height:18px; background:#ede9fe; border-radius:10px; margin-top:15px; overflow:hidden; border:2px solid #ddd6fe; }
.barra-iq { height:100%; width:0%; border-radius:8px; transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1), background 0.5s; }

/* Código */
.codigo-card { border: 3px dashed #f9a8d4; background: linear-gradient(135deg, #fff 0%, #fff7ed 100%); }
.codigo-input-group { display:flex; gap:10px; margin:12px 0; }
#codigoInput {
  flex:1; padding:14px 18px; border:3px solid #fbcfe8; border-radius:15px;
  font-size:1rem; outline:none; transition:border 0.2s;
}
#codigoInput:focus { border-color:#ec4899; box-shadow:0 0 0 3px rgba(236,72,153,0.15); }
.btn-codigo { width:auto; padding:14px 22px; background: linear-gradient(90deg, #a78bfa, #ec4899); border-radius:15px; }
.btn-codigo:hover { transform: scale(1.05); }
.codigo-mensaje { text-align:center; font-weight:bold; min-height:1.5em; font-size:1.05rem; }
.pista { margin-top:10px; text-align:center; }
.pista summary { cursor:pointer; color:#8b5cf6; font-weight:bold; }
.pista p { margin-top:8px; background:#fef3c7; padding:10px; border-radius:12px; border:1px solid #fde68a; }

.info-card { background: linear-gradient(135deg, #ecfdf5, #f0fdfa); border-color:#6ee7b7; }
.info-card h3 { color:#065f46; text-align:center; margin-bottom:12px; }
.info-card ul { list-style:none; }
.info-card li { padding:6px 0; padding-left:8px; font-size:0.98rem; }
.info-card code { background:#fff; padding:2px 6px; border-radius:6px; border:1px solid #a7f3d0; font-size:0.85rem; }

.footer { text-align:center; color:white; font-weight:600; text-shadow:1px 1px 2px rgba(0,0,0,0.2); padding:10px; }

/* Animaciones */
@keyframes pop { 0%{transform:scale(0.5)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.pop { animation: pop 0.5s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.shake { animation: shake 0.4s ease; }

/* Responsive */
@media (max-width: 600px) {
  .header h1 { font-size:2rem; }
  .iq-number { font-size:3rem; }
  .codigo-input-group { flex-direction:column; }
  .btn-codigo { width:100%; }
}