/* =====================================================================
   ninez-elevate.css — Capa de elevación visual "El camino de protección"
   Profundidad, degradados, gamificación y motion. Se carga DESPUÉS de
   tokens.css + styles.css + ninez-app.css y los enriquece.
   ===================================================================== */

:root {
  /* Degradados expresivos */
  --grad-aurora: linear-gradient(115deg, #e2b23c 0%, #d4574a 46%, #6e4b7d 100%);
  --grad-protect: linear-gradient(120deg, #3a6fa6 0%, #388382 55%, #3f7d5a 100%);
  --grad-night: linear-gradient(150deg, #1b3350 0%, #22304a 50%, #3a2b4e 100%);
  --grad-ember: linear-gradient(120deg, #d4574a, #c8663c);
  --glow-warm: 0 30px 80px -30px rgba(212,87,74,.55);
  --glow-cool: 0 30px 80px -30px rgba(47,93,134,.6);
  --glass: rgba(255,255,255,.55);
  --glass-line: rgba(255,255,255,.7);
}
html.dark {
  --glass: rgba(30,44,42,.55);
  --glass-line: rgba(255,255,255,.08);
}

/* ---- Fondo con profundidad (malla + brillo, ya no plano) ------------ */
.page {
  background-image:
    radial-gradient(1100px 700px at 12% -6%, rgba(226,178,60,.16), transparent 60%),
    radial-gradient(1000px 760px at 92% 8%, rgba(110,75,125,.20), transparent 62%),
    radial-gradient(1200px 900px at 50% 108%, rgba(56,131,130,.20), transparent 60%),
    radial-gradient(circle at 20% 0%, #1d2b28, #121b1a 72%);
}
.frame { box-shadow: var(--shadow-frame), 0 0 0 1px rgba(255,255,255,.04); }
/* Blobs ambientales un poco más vivos */
.blob--a { opacity: .22; } .blob--b { opacity: .22; } .blob--c { opacity: .2; }

/* ---- Tipografía con carácter --------------------------------------- */
.display { letter-spacing: -0.02em; }
.grad-text {
  background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-ember); }

/* ---- HERO con malla y profundidad ---------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 380px at 88% 12%, rgba(226,178,60,.20), transparent 62%),
    radial-gradient(560px 420px at 6% 96%, rgba(56,131,130,.18), transparent 60%);
}
.hero > * { position: relative; z-index: 1; }
.hero__title { font-size: clamp(2.4rem, 5.4vw, 3.5rem); }

/* ---- Botones: degradado + brillo (sheen) --------------------------- */
.btn--primary { background: var(--grad-protect); background-size: 140% 140%; position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease);
}
.btn--primary:hover::after { left: 130%; }
.btn--gold { background: var(--grad-aurora); }

/* =====================================================================
   GAMIFICACIÓN — Medidor de protección (anillo), nivel, XP, insignias
   ===================================================================== */
.gamepanel {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-8); align-items: center;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10); box-shadow: var(--shadow-lg);
}
.ring { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--line); stroke-width: 14; }
.ring__bar { fill: none; stroke: url(#ringGrad); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 440; stroke-dashoffset: 440; filter: drop-shadow(0 4px 10px rgba(56,131,130,.4)); }
.node__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring__pct { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; color: var(--azul); line-height: 1; }
.ring__lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.gp__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.level-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--grad-aurora); color: #fff; font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: var(--glow-warm); }
.gp__title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h3); color: var(--ink); }
.gp__sub { font-size: var(--fs-sm); color: var(--ink-soft); }
.xpbar { height: 12px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; margin-top: 4px; }
.xpbar__fill { height: 100%; width: 0; background: var(--grad-protect); border-radius: var(--radius-pill); }
.xpbar__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }

/* Insignias */
.badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.badge-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); }
.badge-chip i { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--line); color: var(--muted); font-size: .7rem; }
.badge-chip.is-earned { border-color: transparent; color: var(--ink); background: var(--tint-amarillo); box-shadow: 0 8px 20px -12px rgba(226,178,60,.7); }
.badge-chip.is-earned i { background: var(--grad-aurora); color: #fff; }

/* =====================================================================
   JOURNEY — la ruta como sendero con nodos que brillan
   ===================================================================== */
.route__line { background: linear-gradient(var(--azul), var(--terracota), var(--verde), var(--amarillo-bright), var(--morado)); opacity: .55; width: 3px; }
.node__badge { box-shadow: 0 8px 20px -8px rgba(34,48,63,.4); transition: transform var(--dur) var(--ease); position: relative; }
.node__card {
  background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--card) 88%, var(--azul) 12%));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.node__card:hover:not(.locked-card) { box-shadow: var(--glow-cool); transform: translateY(-3px) scale(1.005); }
.node:hover .node__badge { transform: scale(1.12); }
/* Badges de tramo con degradado real */
.node__badge.badge--terracota { background: var(--grad-ember); color: #fff; border-color: transparent; }
.node__badge.badge--verde { background: var(--grad-verde); color: #fff; border-color: transparent; }
.node__badge.badge--coral { background: linear-gradient(135deg,#e0705f,#c8402f); color: #fff; border-color: transparent; }
.node__badge.badge--amarillo { background: var(--grad-gold); color: #4a3410; border-color: transparent; }
.node__badge.badge--morado { background: linear-gradient(135deg,#8464a0,#5a3f68); color: #fff; border-color: transparent; }
.node--goal .node__badge { background: var(--grad-aurora); box-shadow: var(--glow-warm); }
/* Recompensa XP por nodo */
.node__xp { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-xs); color: var(--verde-600); background: var(--tint-verde); padding: 4px 10px; border-radius: var(--radius-pill); }
.node--locked .node__xp { color: var(--muted); background: var(--line); }

/* =====================================================================
   TARJETAS variadas (bento) + glass + glow
   ===================================================================== */
.stat { position: relative; padding: var(--sp-4) var(--sp-5); border-radius: 16px; background: var(--card);
  border: 1px solid var(--line); border-top: none; box-shadow: var(--shadow-sm); overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; }
.stat--azul::before { background: var(--grad-protect); } .stat--verde::before { background: var(--grad-verde); } .stat--morado::before { background: var(--grad-aurora); }
.stat__n { background: none; -webkit-text-fill-color: currentColor; }

/* Certificado: tarjeta premium con aurora */
.cert { background: var(--grad-night); box-shadow: 0 40px 90px -40px rgba(27,51,80,.85); }
.cert::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 300px at 88% -10%, rgba(226,178,60,.28), transparent 60%); pointer-events: none; }
.cert .btn--gold { box-shadow: var(--glow-warm); }

/* =====================================================================
   CONCEPTO SVG animado (texto → visual)
   ===================================================================== */
.concept { position: relative; z-index: 1; margin: 0 var(--sp-10) var(--sp-10);
  display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-8); align-items: center;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line); border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-10); box-shadow: var(--shadow-lg); }
.concept__art { width: 100%; height: auto; }
.concept__art .cshield { fill: none; stroke: url(#shieldGrad); stroke-width: 8; stroke-linejoin: round;
  stroke-dasharray: 900; stroke-dashoffset: 900; }
.concept__art .cfig { transform-origin: center; transform-box: fill-box; }
.concept__art .cray { stroke: var(--amarillo-bright); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.concept__k { color: var(--terracota); }
.concept__t { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h3); color: var(--ink); margin: 6px 0 8px; }
.concept p { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---- Reveal init (motion) ------------------------------------------ */
.js-anim [data-animate] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-animate] { opacity: 1 !important; }
  .ring__bar { stroke-dashoffset: 0 !important; }
  .concept__art .cshield { stroke-dashoffset: 0 !important; }
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .gamepanel { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-5); padding: var(--sp-6); }
  .gp__body { align-items: center; }
  .level-tag { align-self: center; }
  .concept { grid-template-columns: 1fr; margin: 0 var(--sp-6) var(--sp-8); text-align: center; }
  .concept__art { max-width: 220px; margin: 0 auto; }
}