/* ════════════════════════════════════════════════
   KreaLab EDU — styles.css
   Autor: KreaLab EDU  |  © 2026 krealab.com.pe
════════════════════════════════════════════════ */

/* ── VARIABLES GLOBALES ── */
:root {
  --mono: 'Anybody', monospace;
  --sans: 'Outfit', sans-serif;
}

/* ── RESET BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  color: #ccc;
  font-family: var(--sans);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ════════════════════════════════════════════════
   KEYFRAMES / ANIMACIONES
════════════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1;  }
}
@keyframes ripple {
  0%   { transform: scale(.8);   opacity: .5; }
  100% { transform: scale(2.5);  opacity: 0;  }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-6px); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,.10); }
  50%       { box-shadow: 0 0 40px rgba(255,255,255,.25); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%);  }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1);  }
}

/* ════════════════════════════════════════════════
   PANTALLA DE CARGA
════════════════════════════════════════════════ */
#loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  font-family: var(--mono);
  transition: opacity .6s ease, visibility .6s ease;
}
#loading.hidden {
  opacity: 0;
  visibility: hidden;
}

.ripple-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
}
.ripple-ring:nth-child(1) { animation: ripple 2s ease-out infinite; }
.ripple-ring:nth-child(2) { animation: ripple 2s ease-out .7s infinite; }

.spin-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-top: 28px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-right-color: rgba(255,255,255,.3);
  animation: spin .8s linear infinite;
}

.connecting-text {
  color: #fff;
  font-size: 10px;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-top: 22px;
  animation: pulse 1.4s ease-in-out infinite;
  font-family: var(--mono);
}

/* ════════════════════════════════════════════════
   FONDO
════════════════════════════════════════════════ */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.03) 0%, transparent 50%);
}

/* ════════════════════════════════════════════════
   LAYOUT PRINCIPAL
════════════════════════════════════════════════ */
#app {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* ════════════════════════════════════════════════
   CARD BASE
════════════════════════════════════════════════ */
.card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  transition: border-color .3s;
}
.card:hover {
  border-color: rgba(255,255,255,.15);
}

/* ════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════ */
.header {
  text-align: center;
  padding: 28px 0 0;
  animation: fadeUp .8s ease-out both;
}

.nfc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 9px;
  color: #aaa;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--mono);
  margin-top: 14px;
}
.nfc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: pulse 2s infinite;
}

/* ════════════════════════════════════════════════
   TARJETA DE PERFIL
════════════════════════════════════════════════ */
.profile-card {
  padding: 32px 24px 28px;
  text-align: center;
  animation: fadeUp .8s ease-out .15s both;
  margin-top: 18px;
  position: relative;
  overflow: hidden;
}
.profile-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.lvl-badge {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 0px 12px 4px 12px;
  animation: popIn .5s ease-out .8s both;
}
.lvl-badge span {
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}
.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #000;
  font-family: var(--mono);
  font-weight: 900;
  animation: glow 4s ease-in-out infinite;
  position: relative;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.avatar-icon {
  position: absolute;
  bottom: -4px; right: -4px;
  background: #000;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.profile-name {
  font-size: 24px;
  font-family: var(--mono);
  font-weight: 900;
  margin: 0 0 4px;
  color: #fff;
  letter-spacing: -.5px;
}
.profile-role {
  font-size: 13px;
  color: #888;
  margin: 0 0 4px;
  font-weight: 500;
}
.profile-sub {
  font-size: 11px;
  color: #555;
  margin: 0 0 20px;
}

/* ════════════════════════════════════════════════
   BARRA XP
════════════════════════════════════════════════ */
.xp-bar-wrap { width: 100%; }

.xp-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.xp-bar-labels span:first-child {
  font-size: 10px;
  color: #888;
  font-family: var(--mono);
}
.xp-bar-labels span:last-child {
  font-size: 10px;
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
}
.xp-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
}
.xp-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 1.5s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.85));
  box-shadow: 0 0 12px rgba(255,255,255,.2);
}
.xp-bar-shimmer {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,.3));
  animation: shimmer 2s ease-in-out infinite;
  transition: width 1.5s cubic-bezier(.22,1,.36,1);
}

/* ════════════════════════════════════════════════
   ESTADÍSTICAS
════════════════════════════════════════════════ */
.stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.stat-item { text-align: center; }
.stat-icon { font-size: 16px; margin-bottom: 4px; }
.stat-val  { font-size: 17px; font-weight: 800; color: #fff; font-family: var(--mono); }
.stat-lbl  {
  font-size: 8px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 3px;
  font-family: var(--mono);
}
.stat-item:nth-child(1) { animation: popIn .5s ease-out .6s both; }
.stat-item:nth-child(2) { animation: popIn .5s ease-out .7s both; }
.stat-item:nth-child(3) { animation: popIn .5s ease-out .8s both; }
.stat-item:nth-child(4) { animation: popIn .5s ease-out .9s both; }

/* ════════════════════════════════════════════════
   FRASE MOTIVACIONAL
════════════════════════════════════════════════ */
.quote-block {
  animation: fadeUp .8s ease-out .25s both;
  margin-top: 16px;
  text-align: center;
  padding: 16px 20px;
}
.quote-block p {
  font-size: 12px;
  color: #666;
  font-style: italic;
  line-height: 1.7;
}

/* ════════════════════════════════════════════════
   ETIQUETA DE SECCIÓN
════════════════════════════════════════════════ */
.section-label {
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin: 0 0 10px 2px;
  font-weight: 700;
  font-family: var(--mono);
}

/* ════════════════════════════════════════════════
   LLAVERO CAROUSEL
════════════════════════════════════════════════ */
.llavero-section {
  animation: fadeUp .8s ease-out .3s both;
  margin-top: 8px;
}
.llavero-card { padding: 20px 12px 16px; }

.llavero-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 210px;
  position: relative;
}
.llavero-item {
  position: absolute;
  transition: all .7s cubic-bezier(.22,1,.36,1);
  opacity: 0;
  transform: scale(.8) rotateY(15deg);
  filter: blur(2px);
}
.llavero-item.active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  filter: none;
}
.llavero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.llavero-dot {
  width: 6px; height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  cursor: pointer;
  transition: all .4s;
}
.llavero-dot.active {
  width: 24px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.llavero-hint {
  font-size: 10px;
  color: #444;
  text-align: center;
  margin-top: 10px;
  font-family: var(--mono);
}

/* ════════════════════════════════════════════════
   PLATAFORMA mBot2
════════════════════════════════════════════════ */
.mbot-section {
  animation: fadeUp .8s ease-out .35s both;
  margin-top: 18px;
}
.mbot-card {
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.mbot-svg-wrap img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: block;
}
.mbot-name { font-size: 15px; font-weight: 800; color: #fff; font-family: var(--mono); }
.mbot-sub  { font-size: 11px; color: #666; margin-top: 2px; font-weight: 500; }
.mbot-desc { font-size: 10px; color: #555; margin-top: 8px; line-height: 1.7; }

/* ════════════════════════════════════════════════
   MÓDULOS DEL PROGRAMA
════════════════════════════════════════════════ */
.modules-section {
  animation: fadeUp .8s ease-out .4s both;
  margin-top: 18px;
}
.module-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.module-item {
  padding: 14px 16px;
  transition: border-color .3s;
}
.module-item.locked { opacity: .3; }

.module-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.module-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
}
.module-icon.done {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
.module-name { font-size: 13px; font-weight: 700; color: #fff; }
.module-meta {
  font-size: 10px;
  color: #555;
  margin-top: 2px;
  font-family: var(--mono);
  display: flex;
  gap: 8px;
  align-items: center;
}
.module-xp { color: #777; font-size: 9px; }

.module-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.module-bar-wrap {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.module-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.module-bar-fill.done {
  background: linear-gradient(90deg, rgba(255,255,255,.6), #fff);
  box-shadow: 0 0 8px rgba(255,255,255,.3);
}
.module-bar-fill.progress {
  background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.4));
}
.module-pct {
  font-size: 14px;
  font-weight: 900;
  font-family: var(--mono);
}

/* ════════════════════════════════════════════════
   LOGROS / BADGES
════════════════════════════════════════════════ */
.badges-section {
  animation: fadeUp .8s ease-out .5s both;
  margin-top: 18px;
}
.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.badge-item {
  text-align: center;
  padding: 16px 6px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.02);
  opacity: .25;
}
.badge-item.earned {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  opacity: 1;
}
.badge-icon { font-size: 30px; margin-bottom: 6px; }
.badge-name { font-size: 10px; font-weight: 700; color: #444; font-family: var(--mono); }
.badge-item.earned .badge-name { color: #fff; }
.badge-desc { font-size: 8px; color: #555; margin-top: 4px; line-height: 1.4; }
.badge-date { font-size: 8px; color: #666; margin-top: 4px; font-family: var(--mono); }

/* ════════════════════════════════════════════════
   MAPA DE HABILIDADES (Radar)
════════════════════════════════════════════════ */
.radar-section {
  animation: fadeUp .8s ease-out .55s both;
  margin-top: 18px;
}
.radar-card {
  padding: 24px 16px;
  display: flex;
  justify-content: center;
}
#radar-canvas {
  width: 240px;
  height: 240px;
  display: block;
}

/* ════════════════════════════════════════════════
   ACTIVIDAD RECIENTE (Timeline)
════════════════════════════════════════════════ */
.timeline-section {
  animation: fadeUp .8s ease-out .6s both;
  margin-top: 18px;
}
.timeline-card { padding: 14px 16px; }

.timeline-item {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.timeline-item:last-child { border-bottom: none; }

.timeline-dot-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: 4px;
}
.timeline-glow {
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  top: -4px; left: -4px;
}
.timeline-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.timeline-dot.highlight {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.4);
}
.timeline-line {
  position: absolute;
  left: 3px; top: 10px;
  width: 1px; height: 28px;
  background: rgba(255,255,255,.04);
}
.timeline-text {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
.timeline-text.highlight {
  color: #ddd;
  font-weight: 600;
}
.timeline-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.timeline-date { font-size: 10px; color: #444; font-family: var(--mono); }
.timeline-xp {
  font-size: 9px;
  color: #555;
  font-family: var(--mono);
  background: rgba(255,255,255,.03);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════
   CONTACTO PADRES/TUTORES
════════════════════════════════════════════════ */
.contact-section {
  animation: fadeUp .8s ease-out .65s both;
  margin-top: 18px;
}
.contact-card {
  background: rgba(255,255,255,.015) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  padding: 28px 20px;
  text-align: center;
}
.contact-text {
  font-size: 13px;
  color: #999;
  margin: 0 0 18px;
  font-weight: 500;
}
.contact-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-primary {
  padding: 13px 30px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: .5px;
  box-shadow: 0 4px 30px rgba(255,255,255,.2);
  transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 36px rgba(255,255,255,.3);
}
.btn-secondary {
  padding: 13px 30px;
  border-radius: 99px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: #aaa;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  transition: border-color .2s;
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,.35);
}

/* ════════════════════════════════════════════════
   CERTIFICACIÓN
════════════════════════════════════════════════ */
.cert-section {
  animation: fadeUp .8s ease-out .7s both;
  margin-top: 18px;
}
.cert-card { padding: 18px 20px; }
.cert-inner { display: flex; align-items: center; gap: 14px; }
.cert-icon-wrap {
  font-size: 28px;
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
}
.cert-title { font-size: 13px; font-weight: 700; color: #fff; }
.cert-desc  { font-size: 10px; color: #555; margin-top: 3px; line-height: 1.6; }

/* ════════════════════════════════════════════════
   PRÓXIMO LOGRO
════════════════════════════════════════════════ */
.next-section {
  animation: fadeUp .8s ease-out .75s both;
  margin-top: 18px;
  text-align: center;
}
.next-card {
  background: linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}
.next-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
.next-label {
  font-size: 10px;
  color: #555;
  margin: 0 0 8px;
  font-family: var(--mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.next-icon {
  font-size: 36px;
  margin-bottom: 8px;
  filter: grayscale(.5) brightness(.7);
}
.next-name { font-size: 13px; font-weight: 700; color: #888; }
.next-desc { font-size: 10px; color: #555; margin: 4px 0 12px; }
.next-pill {
  display: inline-block;
  background: rgba(255,255,255,.04);
  border-radius: 99px;
  padding: 5px 16px;
  font-size: 10px;
  color: #777;
  font-family: var(--mono);
}

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.03);
  animation: fadeIn 1s ease-out 1.2s both;
}
.footer-brand {
  font-size: 14px;
  font-weight: 900;
  font-family: var(--mono);
  color: #fff;
  letter-spacing: 3px;
  margin-top: 10px;
}
.footer-sub  { 
  font-size: 10px; 
  color: #444; 
  margin-top: 4px;
  margin-bottom: 10px; 
  font-weight: 500; 
  letter-spacing: 1px; 
}
.footer-copy a {
  color: inherit;
  text-decoration: none;
}
.footer-copy a:hover {
  text-decoration: underline;
}