/**
 * CryptoIon Academy · Dashboard Gamificado
 * Estilos · Dark Luxury
 */

/* ============================================================
   FULLSCREEN · Body background y reset agresivo
   Hace que el body de WordPress tenga fondo oscuro y sin
   márgenes cuando la página contiene el dashboard.
   ============================================================ */
body:has(.cryptoion-app),
body.cryptoion-fullscreen-body,
body.elementor-page:has(.cryptoion-app) {
  background: #07080f !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.cryptoion-app) #page,
body:has(.cryptoion-app) .site,
body:has(.cryptoion-app) .site-content,
body:has(.cryptoion-app) main,
body:has(.cryptoion-app) .elementor-section-wrap,
body:has(.cryptoion-app) .elementor-section,
body:has(.cryptoion-app) .elementor-section-boxed,
body:has(.cryptoion-app) .elementor-container,
body:has(.cryptoion-app) .elementor-column,
body:has(.cryptoion-app) .elementor-column-wrap,
body:has(.cryptoion-app) .elementor-widget-wrap,
body:has(.cryptoion-app) .elementor-widget,
body:has(.cryptoion-app) .elementor-widget-shortcode,
body:has(.cryptoion-app) .elementor-widget-container,
body:has(.cryptoion-app) .e-con-inner,
body:has(.cryptoion-app) .e-con,
body:has(.cryptoion-app) .elementor-element {
  background: #07080f !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  /* CRÍTICO: anula 'Fit to Screen' de Elementor */
  min-height: auto !important;
  height: auto !important;
  /* CRÍTICO: alinea el contenido arriba, no centrado verticalmente */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
}

/* Anula min-height inline que Elementor inyecta */
body:has(.cryptoion-app) [style*="min-height"] {
  min-height: 0 !important;
}

/* ⚡ FIX DEFINITIVO · Elementor Canvas pone .elementor como flexbox
   con min-height:100vh y centrado vertical → eso deja el hueco arriba.
   Lo forzamos a display:block para que el contenido fluya desde arriba. */
body:has(.cryptoion-app) .elementor,
body.cryptoion-has-dashboard .elementor,
body:has(.cryptoion-app) > .elementor,
body:has(.cryptoion-app) .elementor > .elementor-section-wrap,
body:has(.cryptoion-app) .elementor > .e-con {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Por si el body mismo es flex con centrado (algunos temas/canvas) */
body:has(.cryptoion-app),
body.cryptoion-has-dashboard {
  display: block !important;
  min-height: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Anula min-height específico de secciones con altura "fit to screen" */
body:has(.cryptoion-app) .elementor-section-height-full,
body:has(.cryptoion-app) .elementor-section-height-default {
  min-height: 0 !important;
  height: auto !important;
}

/* El dashboard arranca pegado arriba sin padding-top extra */
body:has(.cryptoion-app) .cryptoion-app {
  padding-top: 0 !important;
}
.cryptoion-app .ci-hero{
  margin-top: 0 !important;
}

/* El contenedor del dashboard debe ocupar 100% del ancho del viewport.
   IMPORTANTE: NO usar min-height: 100vh aquí — fuerza al hero a estirarse
   y deja todo el contenido visualmente "hundido". Solo width 100%. */
body:has(.cryptoion-app) .cryptoion-app {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* min-height ELIMINADO intencionalmente */
}

/* Reservamos espacio interior solo en el contenido del dashboard */
.cryptoion-app > .ci-hero,
.cryptoion-app > .ci-section,
.cryptoion-app > section,
.cryptoion-app > div {
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cryptoion-app{
  --ci-bg:#07080f;
  --ci-bg2:#0d0f1a;
  --ci-bg3:#13162a;
  --ci-bg4:#1a1d35;
  --ci-accent:#00d4aa;
  --ci-gold:#D4AF37;
  --ci-gold-bright:#fbbf24;
  --ci-red:#ef4444;
  --ci-green:#22c55e;
  --ci-purple:#7c3aed;
  --ci-orange:#f97316;
  --ci-pink:#ec4899;
  --ci-blue:#3b82f6;
  --ci-text:#f0f4ff;
  --ci-text2:#94a3b8;
  --ci-text3:#64748b;
  --ci-border:rgba(255,255,255,.06);
  --ci-grad:linear-gradient(135deg,#00d4aa,#7c3aed);
  --ci-grad-gold:linear-gradient(135deg,#D4AF37,#fbbf24);

  font-family:'Inter',sans-serif;
  background:var(--ci-bg);color:var(--ci-text);
  /* Padding reducido: 18px arriba/abajo, 24px laterales · evita aire muerto */
  padding:18px 24px 32px;
  border-radius:20px;
  line-height:1.6;
  position:relative;overflow:hidden;
  /* min-height ELIMINADO - que sea natural */
}

.cryptoion-app *{box-sizing:border-box}

.cryptoion-app::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 10% 0%,rgba(0,212,170,.10),transparent 50%),
    radial-gradient(circle at 90% 10%,rgba(124,58,237,.08),transparent 50%),
    radial-gradient(circle at 50% 100%,rgba(212,175,55,.06),transparent 50%);
}

.cryptoion-app > *{position:relative;z-index:1}

/* ============================================================
   HERO
   ============================================================ */
.ci-hero{
  background:linear-gradient(145deg,rgba(0,212,170,.06),rgba(124,58,237,.04));
  border:1px solid var(--ci-border);
  border-radius:24px;
  /* Padding reducido de 36 a 28px · más compacto sin perder presencia */
  padding:28px 32px;
  margin-bottom:24px;
  position:relative;overflow:hidden;
}
.ci-hero-bg{
  /* !important para que NO lo pise la regla '.ci-hero > *' de abajo */
  position:absolute !important;
  top:-30%;right:-10%;width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,170,.12),transparent 60%);
  pointer-events:none;
  z-index:0 !important;
}
/* El contenido va por encima del bg · EXCLUYE .ci-hero-bg para no romper su absolute */
.ci-hero > *:not(.ci-hero-bg){position:relative;z-index:1}

.ci-hero-top{
  display:flex;justify-content:space-between;gap:24px;
  margin-bottom:24px;flex-wrap:wrap;align-items:flex-start;
}
.ci-eyebrow{
  display:inline-block;background:rgba(0,212,170,.1);color:var(--ci-accent);
  padding:5px 14px;border-radius:50px;font-size:.7rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;
}
.ci-h1{
  font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:800;
  line-height:1.15;margin:0 0 8px 0;color:var(--ci-text);
}
.ci-h1 span{
  background:var(--ci-grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ci-subtitle{color:var(--ci-text2);font-size:1rem;max-width:560px;margin:0}

.ci-level-badge{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(251,191,36,.08));
  border:1px solid;
  padding:16px 22px;border-radius:14px;flex-shrink:0;
}
.ci-level-icon{font-size:2.5rem;line-height:1}
.ci-level-label{
  font-size:.65rem;font-weight:700;color:var(--ci-gold);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;
}
.ci-level-name{
  font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:800;
  line-height:1.2;
}
.ci-level-xp{
  font-size:.78rem;color:var(--ci-text2);margin-top:2px;
  font-family:'JetBrains Mono',monospace;
}

/* Progress bar global */
.ci-progress-wrapper{margin:24px 0}
.ci-progress-bar{
  width:100%;height:14px;background:rgba(255,255,255,.05);
  border-radius:50px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.ci-progress-bar.small{height:8px}
.ci-progress-fill{
  height:100%;background:var(--ci-grad);border-radius:50px;
  position:relative;transition:width .8s ease;
  box-shadow:0 0 20px rgba(0,212,170,.4);
}
.ci-progress-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:ci-shine 2.5s ease-in-out infinite;
}
@keyframes ci-shine{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.ci-progress-info{
  display:flex;justify-content:space-between;margin-top:10px;
  font-size:.82rem;color:var(--ci-text2);
}

/* Stats */
.ci-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin-bottom:20px;
}
.ci-stat{
  background:rgba(255,255,255,.03);border:1px solid var(--ci-border);
  border-radius:14px;padding:18px;text-align:center;transition:.25s;
}
.ci-stat:hover{border-color:rgba(0,212,170,.25);transform:translateY(-2px)}
.ci-stat-value{
  font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:800;
  background:var(--ci-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:4px;
}
.ci-stat-label{
  font-size:.72rem;color:var(--ci-text2);text-transform:uppercase;
  letter-spacing:1px;font-weight:600;
}

/* Level progress */
.ci-level-progress-wrapper{margin-top:16px}
.ci-level-progress-info{
  display:flex;justify-content:space-between;font-size:.75rem;
  color:var(--ci-text2);margin-bottom:6px;
}
.ci-level-progress-bar{
  height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden;
}
.ci-level-progress-fill{
  height:100%;border-radius:4px;transition:width .8s ease;
}

/* ============================================================
   CONTINUE CARD
   ============================================================ */
.ci-continue{
  background:linear-gradient(135deg,rgba(0,212,170,.12),rgba(0,212,170,.02));
  border:1px solid rgba(0,212,170,.25);
  border-radius:16px;padding:20px 24px;margin-bottom:32px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.ci-continue-icon{font-size:2.5rem}
.ci-continue-info{flex:1;min-width:240px}
.ci-continue-label{
  font-size:.7rem;font-weight:700;color:var(--ci-accent);
  letter-spacing:1.5px;text-transform:uppercase;
}
.ci-continue-info h3{
  font-family:'Space Grotesk',sans-serif;font-size:1.15rem;
  font-weight:700;margin:4px 0;color:var(--ci-text);
}
.ci-continue-course{font-size:.85rem;color:var(--ci-text2)}

/* ============================================================
   SECTION
   ============================================================ */
.ci-section{margin-bottom:36px}
.ci-section-title{
  font-family:'Space Grotesk',sans-serif;font-size:1.5rem;
  font-weight:800;margin:0 0 6px 0;color:var(--ci-text);
}
.ci-section-sub{color:var(--ci-text2);font-size:.9rem;margin:0 0 18px 0}

/* ============================================================
   COURSES GRID
   ============================================================ */
.ci-courses-grid{
  display:grid;
  gap:24px;
  /* Por defecto: layout auto-fit con mínimo 320px */
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

/* Si hay 1 solo curso → ancho completo, card grande */
.ci-courses-grid--count-1{
  grid-template-columns:1fr;
}
.ci-courses-grid--count-1 .ci-course-thumb{
  height:380px; /* card más grande para 1 solo curso */
}

/* Si hay 2 cursos → siempre 2 columnas iguales */
.ci-courses-grid--count-2{
  grid-template-columns:repeat(2,1fr);
}

/* Si hay 3 cursos → 3 columnas */
.ci-courses-grid--count-3{
  grid-template-columns:repeat(3,1fr);
}

/* Si hay 4 o más → 2 columnas que cuadran mejor en filas pares */
.ci-courses-grid--count-4,
.ci-courses-grid--count-5,
.ci-courses-grid--count-6{
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}
.ci-course-card{
  background:linear-gradient(180deg,var(--ci-bg2),var(--ci-bg));
  border:1px solid var(--ci-border);
  border-radius:18px;overflow:hidden;transition:.3s;
}
.ci-course-card:hover{
  border-color:rgba(0,212,170,.3);transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}

.ci-course-thumb{
  /* Aspect ratio 16:9 con padding-bottom hack para máxima compatibilidad */
  aspect-ratio:16/9;
  min-height:240px;
  /* 'contain' muestra la imagen completa sin recortes */
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0a0c18;
  position:relative;
  /* Acelera con GPU para evitar blur al escalar */
  transform:translateZ(0);
  backface-visibility:hidden;
  /* Borde sutil para definir el área de la imagen */
  border-bottom:1px solid var(--ci-border);
}

/* Responsive · pantallas medianas */
@media (max-width:1024px){
  .ci-courses-grid--count-2,
  .ci-courses-grid--count-3{
    grid-template-columns:1fr;
  }
  .ci-course-thumb{
    min-height:300px;
  }
}

/* Responsive · móvil */
@media (max-width:640px){
  .ci-course-thumb{
    min-height:220px;
  }
}
.ci-course-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(7,8,15,.6));
}
.ci-course-badge-done{
  position:absolute;top:12px;right:12px;
  background:rgba(34,197,94,.95);color:#fff;
  padding:5px 12px;border-radius:50px;
  font-size:.7rem;font-weight:700;letter-spacing:.5px;
}

.ci-course-body{padding:20px}
.ci-course-title{
  font-family:'Space Grotesk',sans-serif;font-size:1.05rem;
  font-weight:700;color:var(--ci-text);margin:0 0 10px 0;line-height:1.3;
}
.ci-course-stats{
  display:flex;gap:14px;flex-wrap:wrap;font-size:.75rem;
  color:var(--ci-text2);margin-bottom:14px;
}
.ci-course-progress{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.ci-course-progress .ci-progress-bar{flex:1}
.ci-course-percent{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  color:var(--ci-accent);font-size:.85rem;min-width:42px;text-align:right;
}
.ci-course-meta{
  font-size:.75rem;color:var(--ci-text2);margin-bottom:14px;
}
.ci-course-actions{display:flex;gap:8px;align-items:stretch}
.ci-btn-course{
  flex:1;text-align:center;
  background:var(--ci-grad);color:#fff;
  padding:11px 18px;border-radius:10px;
  text-decoration:none;font-weight:700;font-size:.88rem;
  transition:.25s;display:inline-block;
}
.ci-btn-course:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,212,170,.3);color:#fff}
.ci-btn-expand{
  background:rgba(255,255,255,.05);border:1px solid var(--ci-border);
  color:var(--ci-text);padding:11px 16px;border-radius:10px;
  font-weight:600;font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:.25s;
  font-family:inherit;
}
.ci-btn-expand:hover{background:rgba(0,212,170,.08);border-color:var(--ci-accent);color:var(--ci-accent)}
.ci-btn-expand.open .ci-expand-icon{transform:rotate(180deg)}
.ci-expand-icon{transition:.25s;font-size:.7rem;display:inline-block}

/* ============================================================
   ACORDEÓN · LECCIONES POR CURSO
   ============================================================ */
.ci-course-lessons{
  border-top:1px solid var(--ci-border);
  padding:18px 20px 20px;
  background:rgba(7,8,15,.4);
  animation:ci-slide-down .35s ease;
}
@keyframes ci-slide-down{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.ci-no-content{
  color:var(--ci-text2);font-size:.85rem;text-align:center;
  padding:20px;font-style:italic;
}

.ci-topic{margin-bottom:18px}
.ci-topic:last-child{margin-bottom:0}
.ci-topic-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.ci-topic-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:.9rem;color:var(--ci-text);
}
.ci-topic-progress{
  display:flex;align-items:center;gap:10px;
  font-size:.75rem;color:var(--ci-text2);
}
.ci-topic-count{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  color:var(--ci-accent);
}
.ci-topic-bar{
  width:60px;height:5px;background:rgba(255,255,255,.05);
  border-radius:3px;overflow:hidden;
}
.ci-topic-bar-fill{
  height:100%;background:var(--ci-grad);
  border-radius:3px;transition:width .6s ease;
}

.ci-lessons{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:3px;
}
.ci-lesson{padding:0}
.ci-lesson-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;
  text-decoration:none;color:var(--ci-text);
  font-size:.85rem;transition:.2s;
  border:1px solid transparent;
}
.ci-lesson-link:hover{
  background:rgba(0,212,170,.06);border-color:rgba(0,212,170,.2);
  color:var(--ci-text);transform:translateX(3px);
}

.ci-lesson-status{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;flex-shrink:0;
  background:rgba(255,255,255,.05);color:var(--ci-text2);
  border:1px solid rgba(255,255,255,.08);
}
.ci-lesson.completed .ci-lesson-status{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  border-color:#22c55e;color:#fff;
}
.ci-lesson.next .ci-lesson-status{
  background:var(--ci-grad);border-color:var(--ci-accent);color:#fff;
  box-shadow:0 0 0 3px rgba(0,212,170,.15);
  animation:ci-pulse-next 2s ease-in-out infinite;
}
@keyframes ci-pulse-next{
  0%,100%{box-shadow:0 0 0 3px rgba(0,212,170,.15)}
  50%{box-shadow:0 0 0 6px rgba(0,212,170,.05)}
}
.ci-lesson.completed .ci-lesson-link{opacity:.75}
.ci-lesson.completed .ci-lesson-title{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.2)}

.ci-lesson-type-icon{font-size:.95rem;flex-shrink:0}
.ci-lesson-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-lesson-type{
  font-size:.65rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--ci-text2);
  background:rgba(255,255,255,.04);padding:3px 8px;border-radius:50px;
  flex-shrink:0;
}
.ci-lesson.next .ci-lesson-type{background:rgba(0,212,170,.12);color:var(--ci-accent)}

/* ============================================================
   BADGES GRID
   ============================================================ */
.ci-badges-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;
}
.ci-badge{
  background:linear-gradient(180deg,var(--ci-bg2),var(--ci-bg));
  border:1px solid var(--ci-border);
  border-radius:14px;padding:20px 14px;text-align:center;
  position:relative;overflow:hidden;transition:.25s;
}
.ci-badge.unlocked{
  border-color:rgba(212,175,55,.3);
}
.ci-badge.unlocked::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.15),transparent 60%);
  pointer-events:none;
}
.ci-badge.locked{opacity:.4;filter:grayscale(.7)}
.ci-badge:hover{transform:translateY(-3px)}
.ci-badge-icon{font-size:3rem;margin-bottom:8px;line-height:1;position:relative;z-index:1}
.ci-badge-name{
  font-family:'Space Grotesk',sans-serif;font-weight:800;
  font-size:.9rem;margin-bottom:4px;color:var(--ci-text);
  position:relative;z-index:1;
}
.ci-badge.unlocked .ci-badge-name{
  background:var(--ci-grad-gold);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ci-badge-desc{font-size:.7rem;color:var(--ci-text2);line-height:1.4;position:relative;z-index:1}
.ci-badge-checkmark{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;z-index:2;
}

/* ============================================================
   QUICK LINKS
   ============================================================ */
.ci-quick-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}
.ci-quick-link{
  background:rgba(255,255,255,.03);border:1px solid var(--ci-border);
  border-radius:12px;padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ci-text);font-size:.9rem;font-weight:600;
  transition:.25s;
}
.ci-quick-link:hover{
  background:rgba(0,212,170,.06);border-color:var(--ci-accent);
  transform:translateX(3px);color:var(--ci-text);
}
.ci-quick-icon{font-size:1.4rem}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.ci-empty{
  text-align:center;padding:48px 24px;
  background:rgba(255,255,255,.02);border:1px dashed var(--ci-border);
  border-radius:16px;
}
.ci-empty-icon{font-size:3.5rem;margin-bottom:14px}
.ci-empty h3{
  font-family:'Space Grotesk',sans-serif;font-size:1.3rem;
  margin:0 0 8px 0;color:var(--ci-text);
}
.ci-empty p{color:var(--ci-text2);margin:0 0 18px 0}

/* ============================================================
   BUTTONS
   ============================================================ */
.ci-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ci-grad);color:#fff;
  padding:12px 24px;border-radius:10px;
  text-decoration:none;font-weight:700;font-size:.92rem;transition:.25s;
  font-family:'Inter',sans-serif;border:none;cursor:pointer;
}
.ci-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,212,170,.3);color:#fff}

/* ============================================================
   TOAST
   ============================================================ */
.ci-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(120px);
  background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;
  padding:14px 24px;border-radius:50px;font-weight:700;font-size:.9rem;
  box-shadow:0 16px 40px rgba(34,197,94,.4);
  z-index:9999;transition:.4s ease;
  display:flex;align-items:center;gap:10px;
}
.ci-toast.visible{transform:translateX(-50%) translateY(0)}

/* ============================================================
   SHORTCODE WIDGETS (inserción en otras páginas)
   ============================================================ */
.cryptoion-progress-widget,
.cryptoion-xp-widget,
.cryptoion-level-widget,
.cryptoion-badges-widget,
.cryptoion-courses-widget{
  font-family:'Inter',sans-serif;
}

.cryptoion-progress-widget .cryptoion-progress-bar{
  background:#e5e7eb;height:10px;border-radius:50px;overflow:hidden;margin-bottom:6px;
}
.cryptoion-progress-widget .cryptoion-progress-fill{
  height:100%;background:linear-gradient(90deg,#00d4aa,#7c3aed);
}
.cryptoion-progress-widget .cryptoion-progress-info{
  font-size:.85rem;color:#64748b;
}

.cryptoion-xp-widget{
  display:inline-block;background:rgba(0,212,170,.12);color:#00d4aa;
  padding:6px 14px;border-radius:50px;font-weight:700;
}

.cryptoion-level-widget{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .cryptoion-app{padding:20px 16px}
  .ci-hero{padding:24px}
  .ci-h1{font-size:1.7rem}
  .ci-hero-top{flex-direction:column}
  .ci-level-badge{width:100%}
  .ci-continue{flex-direction:column;text-align:center}
  .ci-courses-grid{grid-template-columns:1fr}
}

/* ============================================================
   EL ATLAS · díptico de mapas (Concepto A)
   ============================================================ */
.ci-atlas-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ci-gold);
  text-align:center;
  margin:24px 0 14px;
  opacity:.8;
}
.ci-atlas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:24px;
}
.ci-portal{
  position:relative;
  aspect-ratio:16/10;
  border-radius:20px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  border:1px solid var(--ci-border);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
  transform:perspective(1000px) translateZ(0);
  outline:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px;
}
/* Velo oscuro por defecto */
.ci-portal-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(5,6,13,.55) 0%, rgba(5,6,13,.82) 70%, rgba(5,6,13,.95) 100%);
  transition:opacity .45s ease, backdrop-filter .45s ease;
  backdrop-filter:grayscale(.4) brightness(.7);
  -webkit-backdrop-filter:grayscale(.4) brightness(.7);
}
.ci-portal-glow{
  position:absolute;inset:0;z-index:2;
  opacity:0;
  background:radial-gradient(circle at 50% 100%, rgba(212,175,55,.25), transparent 60%);
  transition:opacity .45s ease;
  pointer-events:none;
}
.ci-portal > *:not(.ci-portal-veil):not(.ci-portal-glow){position:relative;z-index:3}

/* Borde temático arriba */
.ci-portal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  opacity:.6;transition:opacity .45s ease;
}
.ci-portal--trader::before{background:linear-gradient(90deg,#3b82f6,#22c55e,#D4AF37)}
.ci-portal--inversor::before{background:linear-gradient(90deg,#94a3b8,#7c3aed,#D4AF37)}

/* HOVER / FOCUS / ACTIVE · se ilumina y eleva */
.ci-portal:hover,
.ci-portal:focus,
.ci-portal.ci-portal--active{
  transform:perspective(1000px) translateY(-8px) scale(1.015);
  border-color:rgba(212,175,55,.5);
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(212,175,55,.2);
}
.ci-portal:hover .ci-portal-veil,
.ci-portal:focus .ci-portal-veil,
.ci-portal.ci-portal--active .ci-portal-veil{
  opacity:.55;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:linear-gradient(180deg, rgba(5,6,13,.15) 0%, rgba(5,6,13,.55) 55%, rgba(5,6,13,.92) 100%);
}
.ci-portal:hover .ci-portal-glow,
.ci-portal:focus .ci-portal-glow,
.ci-portal.ci-portal--active .ci-portal-glow{opacity:1}
.ci-portal:hover::before,
.ci-portal:focus::before,
.ci-portal.ci-portal--active::before{opacity:1}

/* Cabecera del portal */
.ci-portal-head{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.ci-portal-icon{
  font-size:1.6rem;width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;backdrop-filter:blur(4px);
}
.ci-portal-titles{flex:1;min-width:0}
.ci-portal-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ci-text2);
}
.ci-portal-level{
  font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.ci-portal-points{text-align:right;flex-shrink:0}
.ci-portal-value{
  font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;
  line-height:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.ci-portal-currency{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.1em;color:var(--ci-gold);
}

/* Barra de progreso del portal */
.ci-portal-bar{
  height:6px;background:rgba(0,0,0,.5);border-radius:99px;overflow:hidden;
  margin-bottom:4px;
}
.ci-portal-bar-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(.16,1,.3,1)}

/* Panel revelado (oculto por defecto, aparece al hover) */
.ci-portal-reveal{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, margin-top .45s ease;
  margin-top:0;
}
.ci-portal:hover .ci-portal-reveal,
.ci-portal:focus .ci-portal-reveal,
.ci-portal.ci-portal--active .ci-portal-reveal{
  max-height:340px;
  opacity:1;
  margin-top:12px;
}
.ci-portal-stats-row{
  display:flex;gap:14px;font-size:.78rem;color:var(--ci-text2);
  margin-bottom:10px;font-family:'JetBrains Mono',monospace;
}
.ci-portal-next-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ci-accent);font-weight:700;margin-bottom:8px;
}
.ci-portal-lessons{list-style:none;margin:0 0 14px;padding:0}
.ci-portal-lesson{margin-bottom:6px}
.ci-portal-lesson a{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ci-text);
  font-size:.85rem;padding:6px 10px;border-radius:8px;
  background:rgba(255,255,255,.04);transition:all .2s ease;
}
.ci-portal-lesson a:hover{
  background:rgba(0,212,170,.12);transform:translateX(3px);
}
.ci-portal-lesson-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--ci-accent);box-shadow:0 0 6px var(--ci-accent);
}
.ci-portal-lesson-title{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ci-portal-lesson--done{
  color:var(--ci-gold-bright);font-size:.9rem;font-weight:600;padding:6px 0;
}
.ci-portal-actions{display:flex;gap:8px}
.ci-portal-btn{
  text-decoration:none;padding:9px 16px;border-radius:10px;
  font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;
  transition:all .2s ease;white-space:nowrap;
}
.ci-portal-btn--map{
  background:rgba(255,255,255,.08);color:var(--ci-text);
  border:1px solid var(--ci-border);
}
.ci-portal-btn--map:hover{background:rgba(255,255,255,.15)}
.ci-portal-btn--go{color:#fff;flex:1;text-align:center}
.ci-portal-btn--trader{background:linear-gradient(90deg,#3b82f6,#22c55e)}
.ci-portal-btn--inversor{background:linear-gradient(90deg,#7c3aed,#D4AF37)}
.ci-portal-btn--go:hover{filter:brightness(1.12);transform:translateX(2px)}

/* ── PORTAL "FOR SALE" · territorio sin conquistar (UPSELL) ── */
.ci-portal--forsale .ci-portal-veil{
  background:linear-gradient(180deg, rgba(5,6,13,.72) 0%, rgba(5,6,13,.88) 70%, rgba(5,6,13,.97) 100%);
  backdrop-filter:grayscale(.85) brightness(.55);
  -webkit-backdrop-filter:grayscale(.85) brightness(.55);
}
/* En hover se ilumina PARCIALMENTE (teaser, no del todo) */
.ci-portal--forsale:hover .ci-portal-veil,
.ci-portal--forsale:focus .ci-portal-veil,
.ci-portal--forsale.ci-portal--active .ci-portal-veil{
  backdrop-filter:grayscale(.4) brightness(.75);
  -webkit-backdrop-filter:grayscale(.4) brightness(.75);
  background:linear-gradient(180deg, rgba(5,6,13,.45) 0%, rgba(5,6,13,.7) 55%, rgba(5,6,13,.95) 100%);
}
.ci-portal--forsale:hover,
.ci-portal--forsale:focus{
  border-color:rgba(212,175,55,.6);
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 46px rgba(212,175,55,.3);
}
.ci-portal-salebadge{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:5;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.16em;font-weight:700;
  background:rgba(5,6,13,.9);color:var(--ci-gold-bright);
  border:1px solid rgba(212,175,55,.5);
  padding:6px 16px;border-radius:99px;
  box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 18px rgba(212,175,55,.2);
  white-space:nowrap;
  animation:ciSaleBadgePulse 3s ease-in-out infinite;
}
@keyframes ciSaleBadgePulse{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(212,175,55,.15)}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 28px rgba(212,175,55,.4)}
}
.ci-portal-sale-pitch{
  font-size:.88rem;color:var(--ci-text2);
  line-height:1.55;margin-bottom:14px;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.ci-portal-sale-pitch strong{
  display:block;margin-top:6px;
  color:var(--ci-gold-bright);
  font-family:'Space Grotesk',sans-serif;
}
.ci-portal-btn--sale{
  background:linear-gradient(135deg,#D4AF37,#fbbf24);
  color:#0a0a0a !important;flex:1;text-align:center;
  box-shadow:0 8px 22px rgba(212,175,55,.3);
}
.ci-portal-btn--sale:hover{
  transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 14px 32px rgba(212,175,55,.45);
}

/* Responsive · Atlas */
@media (max-width:860px){
  .ci-atlas{grid-template-columns:1fr}
  .ci-portal{aspect-ratio:auto;min-height:200px}
  /* En móvil, el panel se muestra siempre (no hay hover) */
  .ci-portal .ci-portal-reveal{max-height:340px;opacity:1;margin-top:12px}
  .ci-portal .ci-portal-veil{
    background:linear-gradient(180deg, rgba(5,6,13,.25) 0%, rgba(5,6,13,.6) 55%, rgba(5,6,13,.92) 100%);
    backdrop-filter:none;
  }
}

/* ============================================================
   DUAL PATHS · Trader (PIPS) + Inversor (SATS)
   ============================================================ */
.ci-paths-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:24px 0;
}
.ci-path{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
  border:1px solid var(--ci-border);
  border-radius:18px;
  padding:22px;
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
}
.ci-path::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  border-radius:18px 18px 0 0;
}
.ci-path--trader::before{
  background:linear-gradient(90deg,#3b82f6,#22c55e,#f97316);
}
.ci-path--inversor::before{
  background:linear-gradient(90deg,#94a3b8,#7c3aed,#D4AF37);
}
.ci-path:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}

.ci-path-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.ci-path-icon{
  font-size:2rem;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  flex-shrink:0;
}
.ci-path-meta{flex:1;min-width:0}
.ci-path-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  color:var(--ci-text3);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.ci-path-level{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.ci-path-points{
  text-align:right;
  flex-shrink:0;
}
.ci-path-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem;
  font-weight:800;
  line-height:1;
  background:var(--ci-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ci-path-currency{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  color:var(--ci-text3);
  letter-spacing:.1em;
  margin-top:3px;
}

.ci-path-progress{margin-bottom:16px}
.ci-path-bar{
  height:8px;
  background:rgba(255,255,255,.05);
  border-radius:99px;
  overflow:hidden;
  margin-bottom:8px;
}
.ci-path-fill{
  height:100%;
  border-radius:99px;
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.ci-path-progress-info{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  color:var(--ci-text2);
}
.ci-path-streak{
  font-family:'JetBrains Mono',monospace;
  color:var(--ci-orange);
}
.ci-path-streak strong{color:var(--ci-gold-bright)}

.ci-path-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--ci-border);
}
.ci-path-stats{
  display:flex;
  gap:14px;
  font-size:.8rem;
  color:var(--ci-text2);
}
.ci-path-cta{
  text-decoration:none;
  padding:9px 18px;
  border-radius:10px;
  font-size:.85rem;
  font-weight:600;
  font-family:'Space Grotesk',sans-serif;
  transition:all .2s ease;
  white-space:nowrap;
}
.ci-path-cta--trader{
  background:linear-gradient(90deg,#3b82f6,#22c55e);
  color:#fff;
}
.ci-path-cta--inversor{
  background:linear-gradient(90deg,#7c3aed,#D4AF37);
  color:#fff;
}
.ci-path-cta:hover{
  transform:translateX(3px);
  filter:brightness(1.15);
  box-shadow:0 8px 20px rgba(0,212,170,.20);
}
.ci-path-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.ci-path-map-btn{
  text-decoration:none;
  padding:9px 14px;
  border-radius:10px;
  font-size:.8rem;
  font-weight:600;
  font-family:'Space Grotesk',sans-serif;
  background:rgba(255,255,255,.05);
  color:var(--ci-text2);
  border:1px solid var(--ci-border);
  transition:all .2s ease;
  white-space:nowrap;
}
.ci-path-map-btn:hover{
  background:rgba(0,212,170,.08);
  border-color:rgba(0,212,170,.3);
  color:var(--ci-accent);
  transform:translateY(-1px);
}

/* Responsive · dual paths */
@media (max-width:900px){
  .ci-paths-grid{grid-template-columns:1fr}
  .ci-path-header{flex-wrap:wrap}
  .ci-path-points{width:100%;text-align:left;padding-left:68px;margin-top:-12px}
  .ci-path-footer{flex-direction:column;align-items:stretch}
  .ci-path-cta{text-align:center}
}

/* ============================================================
   SECCIÓN COLAPSABLE · header con botón ver/ocultar
   ============================================================ */
.ci-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.ci-section-head-text{flex:1;min-width:0}
.ci-section-head .ci-section-title{margin-bottom:4px}
.ci-collapse-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--ci-border);
  color:var(--ci-text2);
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:99px;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
  flex-shrink:0;
}
.ci-collapse-btn:hover{
  background:rgba(0,212,170,.08);
  border-color:rgba(0,212,170,.3);
  color:var(--ci-accent);
}
.ci-collapse-icon{
  font-size:.7rem;
  transition:transform .3s ease;
}
.ci-collapse-btn:not(.open) .ci-collapse-icon{
  transform:rotate(180deg);
}
.ci-collapse-body{
  overflow:hidden;
}

/* ============================================================
   PATH MAP · Mapa del camino con SVG, nodos y cofres del tesoro
   ============================================================ */

/* ── Hero del mapa ── */
.ci-pathmap-app{padding-top:20px}
.ci-pathmap-hero{
  text-align:center;
  padding:20px 24px 40px;
  max-width:900px;
  margin:0 auto;
}
.ci-pathmap-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  color:var(--ci-accent);
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:12px;
  padding:6px 14px;
  display:inline-block;
  background:rgba(0,212,170,.08);
  border:1px solid rgba(0,212,170,.2);
  border-radius:99px;
}
.ci-pathmap-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 14px;
  background:var(--ci-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ci-pathmap-subtitle{
  font-size:1.05rem;
  color:var(--ci-text2);
  line-height:1.6;
  margin:0 0 30px;
}
.ci-pathmap-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px;
}
.ci-pathmap-stat{
  background:rgba(255,255,255,.025);
  border:1px solid var(--ci-border);
  border-radius:14px;
  padding:14px;
  text-align:center;
}
.ci-pathmap-stat-val{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:4px;
}
.ci-pathmap-stat-lbl{
  font-size:.72rem;
  color:var(--ci-text3);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ci-pathmap-back{
  display:inline-block;
  color:var(--ci-text2);
  text-decoration:none;
  font-size:.85rem;
  padding:8px 16px;
  border:1px solid var(--ci-border);
  border-radius:99px;
  transition:all .2s ease;
}
.ci-pathmap-back:hover{
  color:var(--ci-accent);
  border-color:rgba(0,212,170,.3);
}

/* ── MARCO ÉPICO 3D + NEÓN alrededor del mapa ── */
.ci-pathmap-frame{
  position:relative;
  max-width:1500px;
  margin:0 auto 50px;
  padding:20px;
  background:
    linear-gradient(135deg, rgba(212,175,55,0.15), rgba(124,58,237,0.08), rgba(0,212,170,0.10)),
    linear-gradient(180deg, #0a0c18, #050610);
  border-radius:28px;
  /* Triple capa de sombras para profundidad 3D */
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.4),
    0 0 0 4px rgba(212,175,55,0.15),
    0 0 24px rgba(212,175,55,0.25),
    0 0 60px rgba(0,212,170,0.15),
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
  /* Pulso neón sutil */
  animation:ciFrameNeon 4s ease-in-out infinite;
}
@keyframes ciFrameNeon{
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,0.4),
      0 0 0 4px rgba(212,175,55,0.15),
      0 0 24px rgba(212,175,55,0.25),
      0 0 60px rgba(0,212,170,0.15),
      0 30px 80px rgba(0,0,0,0.7),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,0.6),
      0 0 0 4px rgba(212,175,55,0.25),
      0 0 36px rgba(212,175,55,0.4),
      0 0 80px rgba(0,212,170,0.25),
      0 30px 80px rgba(0,0,0,0.7),
      inset 0 1px 0 rgba(255,255,255,0.1);
  }
}

/* Esquinas ornamentales del marco */
.ci-frame-corner{
  position:absolute;
  color:var(--ci-gold);
  font-size:1.4rem;
  text-shadow:0 0 8px rgba(212,175,55,0.8), 0 0 16px rgba(212,175,55,0.4);
  z-index:10;
  pointer-events:none;
}
.ci-frame-corner--tl{top:8px;left:14px}
.ci-frame-corner--tr{top:8px;right:14px}
.ci-frame-corner--bl{bottom:8px;left:14px}
.ci-frame-corner--br{bottom:8px;right:14px}

/* Brújula decorativa en esquina */
.ci-frame-compass{
  position:absolute;
  top:30px;
  right:30px;
  z-index:10;
  opacity:0.45;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(212,175,55,0.4));
  animation:ciCompassSpin 30s linear infinite;
}
@keyframes ciCompassSpin{
  0% {transform:rotate(0deg)}
  100% {transform:rotate(360deg)}
}

/* ── Contenedor del mapa SVG ── */
.ci-pathmap-container{
  position:relative;
  margin:0;
  border:1px solid rgba(212,175,55,0.3);
  border-radius:20px;
  overflow:hidden;
  background:#05060d;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 30px rgba(0,0,0,0.6);
}
.ci-pathmap-container--trader{
  /* Horizontal landscape aspect */
  aspect-ratio:16/9;
  max-width:1400px;
  max-height:80vh; /* nunca más alto del 80% del viewport */
  width:auto;
}
.ci-pathmap-container--inversor{
  /* HORIZONTAL 16:9 (igual que Trader) · ahora el ascenso es diagonal en el mapa */
  aspect-ratio:16/9;
  max-width:1400px;
  max-height:80vh;
  width:auto;
}

/* ============================================================
   ANIMACIONES VIVAS · capa atmosférica sobre los mapas
   GPU-accelerated (solo transform y opacity)
   ============================================================ */
.ci-pathmap-animations{
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}

/* ────── TRADER ANIMATIONS ────── */

/* 🔥 BRASAS / CHISPAS · suben suavemente con ondulación lateral */
.ci-anim-ember{
  position:absolute;
  background:radial-gradient(circle,#fbbf24 0%,#f97316 60%,transparent 100%);
  border-radius:50%;
  filter:blur(.5px);
  opacity:0;
  will-change:transform,opacity;
  animation:ciEmberRise linear infinite;
  box-shadow:0 0 8px rgba(251,191,36,.8),0 0 16px rgba(251,191,36,.4);
}
@keyframes ciEmberRise{
  0%   {transform:translate(0,0) scale(1);opacity:0}
  10%  {opacity:.9}
  50%  {transform:translate(8px,-30px) scale(1.1);opacity:.7}
  90%  {opacity:.3}
  100% {transform:translate(-5px,-70px) scale(.5);opacity:0}
}

/* 🌫️ HUMO atmosférico que drifta horizontalmente */
.ci-anim-smoke{
  position:absolute;
  width:30%;height:25%;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.04) 0%, transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  will-change:transform;
}
.ci-anim-smoke-1{
  top:20%;left:-20%;
  animation:ciSmokeDrift 60s linear infinite;
}
.ci-anim-smoke-2{
  top:55%;left:-30%;
  animation:ciSmokeDrift 85s linear infinite -25s;
  opacity:.7;
}
.ci-anim-smoke-3{
  top:75%;left:-25%;
  animation:ciSmokeDrift 70s linear infinite -40s;
  opacity:.5;
}
@keyframes ciSmokeDrift{
  0%   {transform:translateX(0)}
  100% {transform:translateX(160vw)}
}

/* 👑 GLOW PULSANTE del trono dorado */
.ci-anim-throne-glow{
  position:absolute;
  width:120px;height:120px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(251,191,36,.4) 0%,transparent 60%);
  border-radius:50%;
  animation:ciThronePulse 3s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes ciThronePulse{
  0%,100% {transform:translate(-50%,-50%) scale(1);opacity:.5}
  50%     {transform:translate(-50%,-50%) scale(1.3);opacity:.9}
}

/* ⚡ RAYO ocasional sobre el trono */
.ci-anim-lightning{
  position:absolute;
  width:2px;height:80px;
  transform:translate(-50%,-100%);
  background:linear-gradient(180deg, rgba(212,175,55,.9), rgba(255,255,255,.6) 50%, transparent);
  filter:blur(.5px);
  opacity:0;
  animation:ciLightning 8s ease-in-out infinite;
  box-shadow:0 0 12px rgba(212,175,55,.8);
}
@keyframes ciLightning{
  0%,92%,100% {opacity:0}
  93%         {opacity:1;transform:translate(-50%,-100%) scaleY(1)}
  94%         {opacity:0}
  96%         {opacity:.8}
  97%         {opacity:0}
}

/* ────── INVERSOR ANIMATIONS ────── */

/* 🌌 AURORA BOREAL ondulando arriba */
.ci-anim-aurora-band{
  position:absolute;
  left:0;right:0;
  height:30%;
  pointer-events:none;
  will-change:transform,opacity;
  mix-blend-mode:screen;
}
.ci-anim-aurora-1{
  top:0;
  background:linear-gradient(180deg,
    rgba(124,58,237,.25) 0%,
    rgba(124,58,237,.1) 50%,
    transparent 100%);
  animation:ciAuroraShimmer 8s ease-in-out infinite;
  filter:blur(15px);
}
.ci-anim-aurora-2{
  top:0;
  background:linear-gradient(180deg,
    rgba(0,212,170,.18) 0%,
    rgba(0,212,170,.08) 60%,
    transparent 100%);
  animation:ciAuroraShimmer 12s ease-in-out infinite -3s;
  filter:blur(20px);
}
.ci-anim-aurora-3{
  top:0;
  background:linear-gradient(180deg,
    rgba(244,114,182,.15) 0%,
    rgba(212,175,55,.05) 70%,
    transparent 100%);
  animation:ciAuroraShimmer 15s ease-in-out infinite -7s;
  filter:blur(25px);
}
@keyframes ciAuroraShimmer{
  0%,100% {transform:translateX(0) scaleX(1);opacity:.5}
  33%     {transform:translateX(-3%) scaleX(1.05);opacity:.7}
  66%     {transform:translateX(3%) scaleX(.95);opacity:.6}
}

/* ⭐ ESTRELLAS titilando */
.ci-anim-star{
  position:absolute;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 4px #fff,0 0 8px rgba(212,175,55,.5);
  opacity:0;
  will-change:opacity,transform;
  animation:ciStarTwinkle ease-in-out infinite;
}
@keyframes ciStarTwinkle{
  0%,100% {opacity:.2;transform:scale(.6)}
  50%     {opacity:1;transform:scale(1.2)}
}

/* 💫 PARTÍCULAS ASCENDIENDO desde la base hacia la cumbre */
.ci-anim-particle{
  position:absolute;
  bottom:-10px;
  width:3px;height:3px;
  background:radial-gradient(circle,rgba(212,175,55,.9) 0%,transparent 70%);
  border-radius:50%;
  opacity:0;
  will-change:transform,opacity;
  animation:ciParticleAscend linear infinite;
  box-shadow:0 0 8px rgba(212,175,55,.6);
}
@keyframes ciParticleAscend{
  0%   {transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%  {opacity:1}
  50%  {transform:translateY(-50vh) translateX(15px) scale(1.3);opacity:.8}
  90%  {opacity:.4}
  100% {transform:translateY(-100vh) translateX(-10px) scale(.5);opacity:0}
}

/* 👑 GLOW PULSANTE de la corona */
.ci-anim-crown-glow{
  position:absolute;
  width:140px;height:140px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(251,191,36,.5) 0%,rgba(244,114,182,.2) 40%,transparent 70%);
  border-radius:50%;
  animation:ciCrownPulse 4s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes ciCrownPulse{
  0%,100% {transform:translate(-50%,-50%) scale(1);opacity:.6}
  50%     {transform:translate(-50%,-50%) scale(1.35);opacity:1}
}

/* 💧 BRILLO en el río de la base */
.ci-anim-river-shine{
  position:absolute;
  width:60%;height:6%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, rgba(0,212,170,.4), rgba(124,58,237,.3), transparent);
  border-radius:50%;
  filter:blur(8px);
  animation:ciRiverFlow 6s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes ciRiverFlow{
  0%,100% {transform:translate(-60%,-50%);opacity:.4}
  50%     {transform:translate(-40%,-50%);opacity:.8}
}

/* Reducir animaciones si el user prefiere menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce){
  .ci-pathmap-animations *{
    animation: none !important;
  }
}

/* En móvil, reducir cantidad de animaciones para no lagear */
@media (max-width:640px){
  .ci-anim-ember:nth-child(n+10),
  .ci-anim-star:nth-child(n+15),
  .ci-anim-particle:nth-child(n+7){
    display:none;
  }
}

/* ── MODO ILUSTRADO · cuando hay mapa-trader.png o mapa-inversor.png ── */
.ci-pathmap--illustrated{
  background-color:#0a0a12;
  background-repeat:no-repeat;
}
/* Overlay sutil para que los elementos interactivos resalten sobre la ilustración */
.ci-pathmap-overlay{
  position:absolute;inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* Cuando hay ilustración, los anillos de zonas más sutiles */
.ci-pathmap--illustrated .ci-pathmap-zone--unlocked,
.ci-pathmap--illustrated .ci-pathmap-zone--active{
  opacity:.7 !important;
  stroke-width:0.3 !important;
}
.ci-pathmap--illustrated .ci-pathmap-zone--next{
  opacity:.4 !important;
}
.ci-pathmap--illustrated .ci-pathmap-zone--locked{
  opacity:.15 !important;
}

/* Path activo · MUY visible sobre ilustración */
.ci-pathmap--illustrated .ci-pathmap-road-active{
  stroke-width:1.4 !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9))
         drop-shadow(0 0 5px rgba(212,175,55,.9))
         drop-shadow(0 0 12px rgba(251,191,36,.5)) !important;
  animation:ciRoadPulse 2.5s ease-in-out infinite;
}
@keyframes ciRoadPulse{
  0%,100% {opacity:1}
  50%     {opacity:.75}
}
/* Sendero completo (camino por descubrir) · dorado punteado bien visible */
.ci-pathmap--illustrated .ci-pathmap-road-full{
  stroke:rgba(251,191,36,0.55) !important;
  stroke-width:0.7 !important;
  stroke-dasharray:1.8 1.4 !important;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.6));
  animation:ciRoadDashFlow 8s linear infinite;
}
/* Animación de "flujo" en el punteado del camino por descubrir */
@keyframes ciRoadDashFlow{
  to {stroke-dashoffset:-32;}
}

/* Huellas más brillantes sobre ilustración */
.ci-pathmap--illustrated .ci-pathmap-footprint.ci-fp-filled{
  fill:#fff !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 1.5px #fbbf24) drop-shadow(0 0 3px rgba(251,191,36,.7)) !important;
}

/* Etiquetas de zonas con backdrop más opaco para legibilidad */
.ci-pathmap--illustrated .ci-pathmap-zone-label{
  background:rgba(5,6,13,.92);
  backdrop-filter:blur(12px);
}

/* Nodos más nítidos sobre ilustración */
.ci-pathmap--illustrated .ci-pathmap-node-inner{
  background:rgba(5,6,13,.92);
  border-width:3px;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.ci-pathmap--illustrated .ci-pathmap-node--unlocked .ci-pathmap-node-inner{
  background:linear-gradient(135deg,rgba(212,175,55,.95),rgba(244,114,182,.7));
  border-color:#fff;
  box-shadow:0 0 24px rgba(212,175,55,.7), 0 4px 12px rgba(0,0,0,.6);
}
.ci-pathmap--illustrated .ci-pathmap-node--next .ci-pathmap-node-inner{
  background:linear-gradient(135deg,rgba(0,212,170,.9),rgba(34,197,94,.7));
  border-color:#fff;
  box-shadow:0 0 32px rgba(0,212,170,.7), 0 4px 12px rgba(0,0,0,.6);
}

/* Cofres más prominentes sobre ilustración */
.ci-pathmap--illustrated .ci-pathmap-chest-icon{
  background:linear-gradient(135deg, rgba(212,175,55,.95), rgba(251,191,36,.7));
  border-color:#fff;
  border-width:3px;
  box-shadow:0 0 20px rgba(212,175,55,.6), 0 4px 10px rgba(0,0,0,.6);
  width:42px;height:42px;
  font-size:1.5rem;
}
.ci-pathmap--illustrated .ci-chest--closed .ci-pathmap-chest-icon{
  background:rgba(20,22,40,.85);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}

/* Ocultar vignette y montañas procedurales cuando hay ilustración */
.ci-pathmap--illustrated .ci-pathmap-deco-vignette,
.ci-pathmap--illustrated .ci-pathmap-deco-mountains{
  display:none !important;
}

/* Path sombra (línea punteada blanca) más visible */
.ci-pathmap--illustrated .ci-pathmap-svg-path path:not(.ci-pathmap-path-active){
  stroke:rgba(255,255,255,0.25) !important;
  stroke-width:0.4 !important;
}

/* ── Capa 0 · TERRENO (fondo decorativo del mapa) ── */
.ci-pathmap-terrain{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ci-pathmap-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 20%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 20%, transparent 85%);
}
.ci-pathmap-mist{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(124,58,237,.08),transparent 35%),
    radial-gradient(circle at 75% 60%,rgba(0,212,170,.06),transparent 40%),
    radial-gradient(circle at 50% 80%,rgba(212,175,55,.05),transparent 35%);
  filter:blur(1px);
  animation:ciMistDrift 30s ease-in-out infinite;
}
@keyframes ciMistDrift{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.1) rotate(2deg)}
}
.ci-pathmap-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%,#fff,transparent),
    radial-gradient(1px 1px at 80% 20%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 35% 80%,rgba(212,175,55,.4),transparent),
    radial-gradient(1px 1px at 90% 60%,#fff,transparent),
    radial-gradient(1px 1px at 10% 70%,rgba(0,212,170,.5),transparent),
    radial-gradient(1px 1px at 50% 15%,#fff,transparent);
  opacity:.4;
  animation:ciStarsTwinkle 6s ease-in-out infinite;
}
@keyframes ciStarsTwinkle{
  0%,100%{opacity:.4}
  50%{opacity:.7}
}

/* Decoración extra · vignette y "montañas" en bordes */
.ci-pathmap-deco-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
  z-index:5;
}
.ci-pathmap-deco-mountains{
  position:absolute;
  left:0;right:0;bottom:0;
  height:30%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(13,16,30,.4) 60%, rgba(13,16,30,.7) 100%),
    radial-gradient(ellipse at 20% 100%, rgba(124,58,237,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0,212,170,.10) 0%, transparent 50%);
  pointer-events:none;
  z-index:1;
}

/* ── Capas SVG (zonas, huellas, path) ── */
.ci-pathmap-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ci-pathmap-svg-zones{z-index:1}
.ci-pathmap-svg-footprints{z-index:2}
.ci-pathmap-svg-path{z-index:3}

/* ── ZONAS · solo anillos sutiles, sin grandes blobs ── */
.ci-pathmap-zone{
  transition:opacity .6s ease;
  pointer-events:none;
}
.ci-pathmap-zone--unlocked,
.ci-pathmap-zone--active{
  animation:ciZoneRingPulse 4s ease-in-out infinite;
}
.ci-pathmap-zone--next{
  opacity:.4;
}
.ci-pathmap-zone--locked{
  opacity:.15;
}
@keyframes ciZoneRingPulse{
  0%,100%{opacity:.5}
  50%{opacity:.85}
}

/* Etiquetas de zonas · ESTILO PLACA HERÁLDICA profesional */
.ci-pathmap-zone-labels{
  position:absolute;inset:0;z-index:4;pointer-events:none;
}
.ci-pathmap-zone-label{
  position:absolute;
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:8px 18px;
  white-space:nowrap;
  /* Placa con fondo doble: oscuro + brillo dorado interior */
  background:
    linear-gradient(180deg, rgba(15,15,25,.95), rgba(5,6,13,.98));
  /* Borde estilo placa metálica */
  border:1px solid rgba(212,175,55,.35);
  /* Esquinas estilo carta antigua (clip-path) */
  clip-path: polygon(
    0 6px, 6px 0,
    calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px)
  );
  /* Sombras de relieve */
  box-shadow:
    0 4px 14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:all .3s ease;
}
.ci-zone-ornament-left,
.ci-zone-ornament-right{
  font-size:.65rem;
  opacity:.7;
  display:inline-block;
  transition:transform .3s ease;
}
.ci-zone-name{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.ci-zone-lock{
  font-size:.7rem;
  opacity:.85;
}

/* Estados de las placas */
.ci-pathmap-zone-label--unlocked,
.ci-pathmap-zone-label--active{
  color:#fbbf24;
  border-color:rgba(212,175,55,.7);
  background:
    linear-gradient(180deg, rgba(40,28,8,.95), rgba(15,10,5,.98));
  box-shadow:
    0 4px 14px rgba(0,0,0,.6),
    0 0 18px rgba(212,175,55,.25),
    inset 0 1px 0 rgba(212,175,55,.2);
  text-shadow:0 0 8px rgba(212,175,55,.5);
}
.ci-pathmap-zone-label--unlocked .ci-zone-ornament-left,
.ci-pathmap-zone-label--unlocked .ci-zone-ornament-right,
.ci-pathmap-zone-label--active .ci-zone-ornament-left,
.ci-pathmap-zone-label--active .ci-zone-ornament-right{
  color:#fbbf24;
  opacity:1;
  text-shadow:0 0 6px rgba(251,191,36,.8);
}
.ci-pathmap-zone-label--next{
  color:var(--ci-accent);
  border-color:rgba(0,212,170,.7);
  background:
    linear-gradient(180deg, rgba(5,30,25,.95), rgba(2,15,12,.98));
  box-shadow:
    0 4px 14px rgba(0,0,0,.6),
    0 0 18px rgba(0,212,170,.3),
    inset 0 1px 0 rgba(0,212,170,.2);
  text-shadow:0 0 8px rgba(0,212,170,.5);
  animation:ciZoneNextPulse 2.5s ease-in-out infinite;
}
.ci-pathmap-zone-label--next .ci-zone-ornament-left,
.ci-pathmap-zone-label--next .ci-zone-ornament-right{
  color:var(--ci-accent);
}
@keyframes ciZoneNextPulse{
  0%,100% {box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 18px rgba(0,212,170,.3), inset 0 1px 0 rgba(0,212,170,.2);}
  50%     {box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 28px rgba(0,212,170,.5), inset 0 1px 0 rgba(0,212,170,.3);}
}
.ci-pathmap-zone-label--locked{
  color:rgba(255,255,255,.4);
  opacity:.7;
  border-color:rgba(255,255,255,.12);
}

/* Hover: pequeño efecto en los ornamentos */
.ci-pathmap-zone-label:hover .ci-zone-ornament-left{transform:translateX(-3px) rotate(-90deg)}
.ci-pathmap-zone-label:hover .ci-zone-ornament-right{transform:translateX(3px) rotate(90deg)}

/* ── ZONA CLICABLE · placa-enlace con hover reveal ── */
a.ci-pathmap-zone-label--link{
  pointer-events:auto !important;
  cursor:pointer;
  text-decoration:none;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.ci-zone-enter{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  color:var(--ci-accent);
  font-weight:800;
}
a.ci-pathmap-zone-label--link:hover{
  transform:translate(-50%,-50%) scale(1.12);
  z-index:20;
  box-shadow:
    0 8px 24px rgba(0,0,0,.7),
    0 0 32px rgba(0,212,170,.45),
    inset 0 1px 0 rgba(0,212,170,.3);
  border-color:var(--ci-accent);
}
a.ci-pathmap-zone-label--link:hover .ci-zone-enter{
  max-width:24px;
  opacity:1;
  margin-left:6px;
}
/* Placa de zona en progreso · pulso de invitación */
a.ci-pathmap-zone-label--active{
  animation:ciZoneInvite 3s ease-in-out infinite;
}
@keyframes ciZoneInvite{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 18px rgba(212,175,55,.25),inset 0 1px 0 rgba(212,175,55,.2)}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 32px rgba(0,212,170,.45),inset 0 1px 0 rgba(0,212,170,.3)}
}

/* ── HUELLAS DE BOTA · GRANDES Y VISIBLES ── */
.ci-pathmap-footprint{
  transition:all .4s ease;
}
.ci-pathmap-footprint.ci-fp-filled{
  fill:#ffffff;
  opacity:1;
  stroke:#fbbf24;
  stroke-width:0.15;
  filter:
    drop-shadow(0 0 0.8px #fbbf24)
    drop-shadow(0 0 2px rgba(251,191,36,1))
    drop-shadow(0 0 4px rgba(212,175,55,.7));
  animation:ciFootprintStep 1.2s ease-out backwards;
}
.ci-pathmap-footprint.ci-fp-empty{
  fill:rgba(255,255,255,.35);
  opacity:.7;
  stroke:rgba(255,255,255,.5);
  stroke-width:0.1;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.8));
}
@keyframes ciFootprintStep{
  0%   {opacity:0;}
  40%  {opacity:0.5;}
  100% {opacity:1;}
}

/* Modo ilustrado · huellas BRILLANTES sobre la ilustración oscura */
.ci-pathmap--illustrated .ci-pathmap-footprint.ci-fp-filled{
  fill:#fff;
  stroke:#fbbf24;
  stroke-width:0.15;
  filter:
    drop-shadow(0 0 1px #fbbf24)
    drop-shadow(0 0 3px rgba(251,191,36,1))
    drop-shadow(0 0 6px rgba(212,175,55,.8));
}
.ci-pathmap--illustrated .ci-pathmap-footprint.ci-fp-empty{
  fill:rgba(255,255,255,.45);
  opacity:.75;
  stroke:rgba(0,0,0,.6);
  stroke-width:0.12;
  filter:drop-shadow(0 0 0.5px rgba(0,0,0,.9));
}

/* ── COFRES EN EL MAPA ── */
.ci-pathmap-chests{
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
}
.ci-pathmap-chest{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  z-index:4;
}
.ci-pathmap-chest-icon{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  background:linear-gradient(135deg, rgba(212,175,55,.2), rgba(244,114,182,.1));
  border:2px solid rgba(212,175,55,.5);
  border-radius:10px;
  transition:all .3s ease;
  transform:rotate(-3deg);
}
.ci-chest--closed .ci-pathmap-chest-icon{
  background:rgba(20,22,40,.6);
  border-color:rgba(255,255,255,.15);
  opacity:.6;
  filter:grayscale(.5);
}
.ci-chest--open .ci-pathmap-chest-icon{
  animation:ciChestFloat 3s ease-in-out infinite;
  box-shadow:0 0 24px rgba(212,175,55,.3);
}
@keyframes ciChestFloat{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-3px)}
}
.ci-pathmap-chest:hover .ci-pathmap-chest-icon{
  transform:rotate(0deg) scale(1.2);
  box-shadow:0 0 32px rgba(212,175,55,.5);
}
.ci-pathmap-chest-label{
  position:absolute;
  top:calc(100% + 5px);
  left:50%;
  transform:translateX(-50%);
  font-family:'Space Grotesk',sans-serif;
  font-size:.65rem;
  font-weight:600;
  color:var(--ci-gold);
  background:rgba(5,6,13,.9);
  padding:3px 7px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.ci-pathmap-chest:hover .ci-pathmap-chest-label{
  opacity:1;
}
.ci-pathmap-path-active{
  animation:ciPathDraw 2.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ciPathDraw{
  from{stroke-dashoffset:200;stroke-dasharray:200}
  to{stroke-dashoffset:0;stroke-dasharray:none}
}

/* ── Nodos del mapa ── */
.ci-pathmap-nodes{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}
.ci-pathmap-node{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  transition:all .3s ease;
}
.ci-pathmap-node-inner{
  width:54px;height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,24,.85);
  border:2px solid rgba(255,255,255,.1);
  font-size:1.4rem;
  transition:all .3s ease;
  position:relative;
  z-index:2;
}
.ci-pathmap-node-icon{
  filter:grayscale(1) brightness(.4);
  transition:all .3s ease;
}
.ci-pathmap-node-icon.ci-pathmap-node-mystery{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:rgba(255,255,255,.2);
  font-size:1.6rem;
}
.ci-pathmap-node-label{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;
  font-weight:600;
  color:var(--ci-text2);
  white-space:nowrap;
  background:rgba(5,6,13,.85);
  padding:3px 8px;
  border-radius:8px;
  pointer-events:none;
}
.ci-pathmap-node-check,
.ci-pathmap-node-lock{
  position:absolute;
  top:-4px;right:-4px;
  width:18px;height:18px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;
  z-index:3;
}
.ci-pathmap-node-check{
  background:#22c55e;
  color:#fff;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.ci-pathmap-node-lock{
  background:rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.2);
  font-size:.55rem;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
/* En nodos hard-locked sin nombre, ocultar el candado pequeño · ya hay misterio */
.ci-pathmap-node--hard-locked .ci-pathmap-node-lock{
  display:none;
}
.ci-pathmap-node-pulse{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid var(--ci-accent);
  animation:ciNodePulse 1.6s ease-in-out infinite;
}
@keyframes ciNodePulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.25);opacity:0}
}

/* ── Estados ── */
.ci-pathmap-node--unlocked .ci-pathmap-node-inner{
  background:linear-gradient(135deg,rgba(0,212,170,.2),rgba(124,58,237,.15));
  border-color:rgba(0,212,170,.6);
  box-shadow:0 0 24px rgba(0,212,170,.25);
}
.ci-pathmap-node--unlocked .ci-pathmap-node-icon{
  filter:none;
}

.ci-pathmap-node--next .ci-pathmap-node-inner{
  background:linear-gradient(135deg,rgba(0,212,170,.15),rgba(0,212,170,.05));
  border-color:var(--ci-accent);
  box-shadow:0 0 30px rgba(0,212,170,.4);
}
.ci-pathmap-node--next .ci-pathmap-node-icon{
  filter:grayscale(.3) brightness(.9);
}

.ci-pathmap-node--soft-locked .ci-pathmap-node-inner{
  opacity:.65;
  border-color:rgba(255,255,255,.15);
}

.ci-pathmap-node--hard-locked .ci-pathmap-node-inner{
  opacity:.4;
  filter:blur(.5px);
}
.ci-pathmap-node--hard-locked .ci-pathmap-node-label{
  display:none;
}

/* Hover en nodos */
.ci-pathmap-node:hover{
  z-index:10;
}
.ci-pathmap-node:hover .ci-pathmap-node-inner{
  transform:scale(1.15);
  box-shadow:0 0 40px rgba(0,212,170,.5);
}

/* ── COFRES DEL TESORO ── */
.ci-treasure-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  margin-top:12px;
}
.ci-treasure{
  position:relative;
  background:linear-gradient(180deg,var(--ci-bg2),var(--ci-bg));
  border:1px solid var(--ci-border);
  border-radius:16px;
  padding:20px;
  transition:all .3s ease;
  overflow:hidden;
}
.ci-treasure-glow{
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(212,175,55,.08),transparent 40%);
  pointer-events:none;
  animation:ciTreasureGlow 4s ease-in-out infinite;
}
@keyframes ciTreasureGlow{
  0%,100%{opacity:.5;transform:rotate(0deg)}
  50%{opacity:1;transform:rotate(180deg)}
}
.ci-treasure--open{
  border-color:rgba(212,175,55,.3);
  background:linear-gradient(180deg,rgba(212,175,55,.04),var(--ci-bg));
}
.ci-treasure--open:hover{
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.6);
  box-shadow:0 14px 36px rgba(212,175,55,.15);
}
.ci-treasure--locked{
  opacity:.7;
}
.ci-treasure--locked:hover{
  opacity:1;
  border-color:rgba(255,255,255,.15);
}
.ci-treasure-icon{
  font-size:2.2rem;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  border-radius:14px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.ci-treasure--open .ci-treasure-icon{
  background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(0,212,170,.1));
  border:1px solid rgba(212,175,55,.3);
}
.ci-treasure-body{position:relative;z-index:1}
.ci-treasure-threshold{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  color:var(--ci-gold);
  letter-spacing:.1em;
  margin-bottom:6px;
  font-weight:600;
}
.ci-treasure-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:1rem;
  font-weight:600;
  margin:0 0 6px;
  color:var(--ci-text);
}
.ci-treasure-desc{
  font-size:.82rem;
  color:var(--ci-text2);
  line-height:1.5;
  margin:0 0 14px;
}
.ci-treasure-btn{
  display:inline-block;
  background:linear-gradient(90deg,var(--ci-accent),var(--ci-gold));
  color:#0a0a0a;
  font-weight:600;
  font-size:.85rem;
  padding:9px 18px;
  border-radius:99px;
  text-decoration:none;
  transition:all .2s ease;
}
.ci-treasure-btn:hover{
  transform:translateX(3px);
  filter:brightness(1.1);
  box-shadow:0 8px 20px rgba(0,212,170,.3);
}
.ci-treasure-btn[data-coming-soon="1"]::after{
  content:' (próximamente)';
  font-weight:400;
  opacity:.7;
}
.ci-treasure-progress{
  margin-top:8px;
}
.ci-treasure-progress-bar{
  height:6px;
  background:rgba(255,255,255,.05);
  border-radius:99px;
  overflow:hidden;
  margin-bottom:6px;
}
.ci-treasure-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--ci-text3),var(--ci-accent));
  border-radius:99px;
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.ci-treasure-missing{
  font-size:.75rem;
  color:var(--ci-text3);
}
.ci-treasure-missing strong{color:var(--ci-accent)}

/* Responsive · path map */
@media (max-width:768px){
  .ci-pathmap-stats{grid-template-columns:repeat(2,1fr)}
  .ci-pathmap-container--trader{aspect-ratio:4/5}
  .ci-pathmap-node-inner{width:42px;height:42px;font-size:1.1rem}
  .ci-pathmap-node-label{font-size:.62rem}
}

/* ============================================================
   TOOLS · Tarjetas de herramientas externas (NQSuite)
   ============================================================ */
.ci-tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:8px;
}
.ci-tool-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(180deg,var(--ci-bg2),var(--ci-bg));
  border:1px solid var(--ci-border);
  border-radius:16px;
  padding:20px;
  text-decoration:none;
  color:var(--ci-text);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
.ci-tool-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:2px;
  background:var(--ci-grad);
  opacity:0;
  transition:opacity .25s ease;
}
.ci-tool-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,212,170,.3);
  box-shadow:0 12px 28px rgba(0,212,170,.10);
}
.ci-tool-card:hover::before{opacity:1}
.ci-tool-icon{
  font-size:2rem;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,212,170,.08);
  border-radius:14px;
  flex-shrink:0;
}
.ci-tool-body{flex:1;min-width:0}
.ci-tool-body h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1rem;font-weight:600;
  margin:0 0 4px;color:var(--ci-text);
  letter-spacing:-.01em;
}
.ci-tool-body p{
  margin:0;
  font-size:.82rem;
  color:var(--ci-text2);
  line-height:1.4;
}
.ci-tool-arrow{
  font-size:1.1rem;
  color:var(--ci-text3);
  transition:transform .25s ease,color .25s ease;
}
.ci-tool-card:hover .ci-tool-arrow{
  color:var(--ci-accent);
  transform:translate(3px,-3px);
}

/* CTAs grandes (catálogo + Área NQS) */
.ci-tools-ctas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px;
}
.ci-cta-btn{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 26px;
  border-radius:18px;
  text-decoration:none;
  color:var(--ci-text);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
.ci-cta-btn--secondary{
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(59,130,246,.08));
  border:1px solid rgba(124,58,237,.2);
}
.ci-cta-btn--secondary:hover{
  background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(59,130,246,.14));
  border-color:rgba(124,58,237,.4);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(124,58,237,.18);
}
.ci-cta-btn--primary{
  background:linear-gradient(135deg,rgba(0,212,170,.14),rgba(212,175,55,.08));
  border:1px solid rgba(0,212,170,.3);
}
.ci-cta-btn--primary:hover{
  background:linear-gradient(135deg,rgba(0,212,170,.24),rgba(212,175,55,.14));
  border-color:rgba(0,212,170,.5);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,212,170,.20);
}
.ci-cta-icon{
  font-size:2.2rem;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  border-radius:16px;
  flex-shrink:0;
}
.ci-cta-text{
  flex:1;
  display:flex;flex-direction:column;
  gap:3px;
  min-width:0;
}
.ci-cta-text strong{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.ci-cta-text small{
  color:var(--ci-text2);
  font-size:.8rem;
  line-height:1.4;
}
.ci-cta-arrow{
  font-size:1.4rem;
  color:var(--ci-text2);
  transition:transform .25s ease,color .25s ease;
}
.ci-cta-btn:hover .ci-cta-arrow{
  transform:translateX(4px);
  color:var(--ci-accent);
}

/* Responsive · tools */
@media(max-width:1024px){
  .ci-tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .ci-tools-grid{grid-template-columns:1fr}
  .ci-tools-ctas{grid-template-columns:1fr}
  .ci-tool-card{padding:16px}
  .ci-cta-btn{padding:18px 20px;gap:14px}
  .ci-cta-icon{width:50px;height:50px;font-size:1.8rem}
}


/* ============================================================
   INVIT LIGHT · tema claro del dashboard (paleta invit-v3)
   ivory #f7f8fc · navy #0a1c44 · azul #1e5eff · naranja #f7931a
   Los MAPAS fantasy se mantienen oscuros como cuadros enmarcados.
   ============================================================ */
.cryptoion-app{
  --ci-bg:#f7f8fc; --ci-bg2:#ffffff; --ci-bg3:#eef3fb; --ci-bg4:#e6eaf3;
  --ci-accent:#1e5eff; --ci-gold:#e07c00; --ci-gold-bright:#f7931a;
  --ci-red:#dc2626; --ci-green:#16a34a; --ci-purple:#6d28d9;
  --ci-orange:#f7931a; --ci-blue:#1e5eff;
  --ci-text:#0d1729; --ci-text2:#4a5568; --ci-text3:#8a94a6;
  --ci-border:#e6eaf3;
  --ci-grad:linear-gradient(135deg,#1e5eff,#1240c4);
  --ci-grad-gold:linear-gradient(135deg,#f7931a,#e07c00);
  background:var(--ci-bg);color:var(--ci-text);
}
.cryptoion-app::before{background:radial-gradient(circle at 15% 0%,rgba(30,94,255,.05),transparent 45%),radial-gradient(circle at 85% 10%,rgba(247,147,26,.05),transparent 45%)}

/* Fondo claro · sobreescribe todos los overrides oscuros anteriores */
body:has(.cryptoion-app),
body.cryptoion-has-dashboard,
body.elementor-page:has(.cryptoion-app){background:#f7f8fc !important}
body:has(.cryptoion-app) #page, body:has(.cryptoion-app) .site,
body:has(.cryptoion-app) .site-content, body:has(.cryptoion-app) main,
body:has(.cryptoion-app) .elementor-section, body:has(.cryptoion-app) .elementor-container,
body:has(.cryptoion-app) .elementor-column, body:has(.cryptoion-app) .elementor-widget-wrap,
body:has(.cryptoion-app) .elementor-widget, body:has(.cryptoion-app) .elementor-widget-container,
body:has(.cryptoion-app) .e-con, body:has(.cryptoion-app) .e-con-inner,
body:has(.cryptoion-app) .elementor-element{background:#f7f8fc !important}
body:has(.cryptoion-app) .cryptoion-app{background:#f7f8fc !important}

/* Hero */
.ci-hero{background:#fff;border:1px solid #e6eaf3;box-shadow:0 2px 12px rgba(10,28,68,.06)}
.ci-hero-bg{background:radial-gradient(circle,rgba(30,94,255,.06),transparent 60%)}
.ci-eyebrow{background:rgba(30,94,255,.08);color:#1e5eff}
.ci-h1{color:#0d1729}
.ci-h1 span{color:#1e5eff}
.ci-subtitle{color:#4a5568}

/* Stats */
.ci-stat{background:#fff;border:1px solid #e6eaf3;box-shadow:0 1px 4px rgba(10,28,68,.05)}
.ci-stat-value{color:#1e5eff}
.ci-stat-label{color:#8a94a6}

/* Atlas · portales (mapas siguen oscuros = cuadros) */
.ci-atlas-label{color:#e07c00}
.ci-portal{border:1px solid #e6eaf3;box-shadow:0 4px 18px rgba(10,28,68,.10)}
.ci-portal:hover,.ci-portal:focus{box-shadow:0 20px 50px rgba(10,28,68,.18),0 0 30px rgba(247,147,26,.15)}
.ci-portal-salebadge{background:#fff;color:#e07c00;border-color:rgba(247,147,26,.5)}

/* Secciones */
.ci-section-title{color:#0d1729}
.ci-section-sub{color:#8a94a6}

/* Herramientas NQSuite */
.ci-tool-card{background:#fff;border-color:#e6eaf3;box-shadow:0 1px 4px rgba(10,28,68,.05)}
.ci-tool-card:hover{border-color:rgba(30,94,255,.35);box-shadow:0 10px 26px rgba(30,94,255,.12)}
.ci-tool-icon{background:rgba(30,94,255,.07)}
.ci-tool-body h3{color:#0d1729}
.ci-tool-body p{color:#4a5568}
.ci-cta-btn--secondary{background:rgba(30,94,255,.06);border-color:rgba(30,94,255,.25)}
.ci-cta-btn--primary{background:rgba(247,147,26,.08);border-color:rgba(247,147,26,.4)}
.ci-cta-btn{color:#0d1729}
.ci-cta-text small{color:#4a5568}
.ci-cta-icon{background:rgba(10,28,68,.04)}

/* Logros */
.ci-badge{background:#fff;border:1px solid #e6eaf3}
.ci-badge.locked{opacity:.55;filter:grayscale(.7)}
.ci-badge.unlocked{border-color:rgba(247,147,26,.45);box-shadow:0 2px 10px rgba(247,147,26,.12)}
.ci-badge-name{color:#0d1729}
.ci-badge-desc{color:#8a94a6}
.ci-collapse-btn{background:#fff;border-color:#e6eaf3;color:#4a5568}
.ci-collapse-btn:hover{background:rgba(30,94,255,.06);color:#1e5eff}

/* Path-map · hero claro, MAPA queda oscuro enmarcado */
.ci-pathmap-eyebrow{background:rgba(30,94,255,.07);border-color:rgba(30,94,255,.25);color:#1e5eff}
.ci-pathmap-title{background:linear-gradient(135deg,#0a1c44,#1e5eff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ci-pathmap-subtitle{color:#4a5568}
.ci-pathmap-stat{background:#fff;border-color:#e6eaf3;box-shadow:0 1px 4px rgba(10,28,68,.05)}
.ci-pathmap-stat-val{color:#0d1729}
.ci-pathmap-stat-lbl{color:#8a94a6}
.ci-pathmap-back{background:#fff;border-color:#e6eaf3;color:#4a5568}
.ci-pathmap-frame{background:linear-gradient(135deg,rgba(30,94,255,.08),rgba(247,147,26,.06)),#0a1c44}

/* Cofres del tesoro */
.ci-treasure{background:#fff;border-color:#e6eaf3;box-shadow:0 1px 5px rgba(10,28,68,.05)}
.ci-treasure--open{border-color:rgba(247,147,26,.45);background:linear-gradient(180deg,rgba(247,147,26,.04),#fff)}
.ci-treasure--open:hover{box-shadow:0 12px 30px rgba(247,147,26,.15)}
.ci-treasure-icon{background:rgba(10,28,68,.04)}
.ci-treasure--open .ci-treasure-icon{background:rgba(247,147,26,.1);border-color:rgba(247,147,26,.35)}
.ci-treasure-threshold{color:#e07c00}
.ci-treasure-title{color:#0d1729}
.ci-treasure-desc{color:#4a5568}
.ci-treasure-btn{background:linear-gradient(90deg,#1e5eff,#1240c4);color:#fff}
.ci-treasure-progress-fill{background:linear-gradient(90deg,#8a94a6,#1e5eff)}
.ci-treasure-missing{color:#8a94a6}
.ci-treasure-missing strong{color:#1e5eff}


/* ============================================================
   PARCHES v3.9 · feedback de diseño
   ============================================================ */
/* 1) Portales del Atlas · 10% menos oscuros (se intuye el mapa sin hover) */
.ci-portal-veil{
  background:linear-gradient(180deg, rgba(5,6,13,.42) 0%, rgba(5,6,13,.68) 70%, rgba(5,6,13,.85) 100%) !important;
  backdrop-filter:grayscale(.25) brightness(.85) !important;
  -webkit-backdrop-filter:grayscale(.25) brightness(.85) !important;
}
.ci-portal--forsale .ci-portal-veil{
  background:linear-gradient(180deg, rgba(5,6,13,.6) 0%, rgba(5,6,13,.78) 70%, rgba(5,6,13,.9) 100%) !important;
  backdrop-filter:grayscale(.7) brightness(.65) !important;
  -webkit-backdrop-filter:grayscale(.7) brightness(.65) !important;
}

/* 2) Placas de zona del mapa · FUERA el negro+azul → placa marfil elegante */
.ci-pathmap--illustrated .ci-pathmap-zone-label,
.ci-pathmap-zone-label{
  background:rgba(250,248,243,.95) !important;
  border:1px solid rgba(224,124,0,.45) !important;
  color:#0a1c44 !important;
  text-shadow:none !important;
  box-shadow:0 3px 12px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(6px);
}
.ci-pathmap-zone-label--unlocked,.ci-pathmap-zone-label--active{
  color:#0a1c44 !important;
  border-color:#e07c00 !important;
  box-shadow:0 3px 12px rgba(0,0,0,.35), 0 0 16px rgba(247,147,26,.35) !important;
}
.ci-pathmap-zone-label--unlocked .ci-zone-ornament-left,
.ci-pathmap-zone-label--unlocked .ci-zone-ornament-right,
.ci-pathmap-zone-label--active .ci-zone-ornament-left,
.ci-pathmap-zone-label--active .ci-zone-ornament-right{color:#e07c00 !important;text-shadow:none !important}
.ci-pathmap-zone-label--next{color:#1240c4 !important;border-color:rgba(30,94,255,.5) !important;animation:none !important}
.ci-pathmap-zone-label--next .ci-zone-ornament-left,
.ci-pathmap-zone-label--next .ci-zone-ornament-right{color:#1e5eff !important}
.ci-pathmap-zone-label--locked{color:#8a94a6 !important;border-color:rgba(138,148,166,.35) !important;opacity:.85 !important}
.ci-zone-enter{color:#e07c00 !important}
a.ci-pathmap-zone-label--link:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 24px rgba(247,147,26,.5) !important;
  border-color:#f7931a !important;
}

/* 3) Ruta del sendero · mas discreta */
.ci-pathmap--illustrated .ci-pathmap-road-full{
  stroke:rgba(255,255,255,.16) !important;
  stroke-width:.45 !important;
  animation:none !important;
}
.ci-pathmap--illustrated .ci-pathmap-road-active{
  stroke-width:.8 !important;
  filter:drop-shadow(0 0 2px rgba(247,147,26,.5)) !important;
  animation:none !important;
  opacity:.75;
}

/* 4) Wordmark de marca en el hero del mapa (sustituye a CAMINO X) */
.ci-pathmap-hero{padding-top:44px}
.ci-pathmap-brand{
  display:inline-block;margin-bottom:14px;line-height:0;
}
.ci-pathmap-brand img{
  height:52px !important;width:auto !important;max-width:none !important;display:block;
}
.ci-pathmap-brand:hover img{opacity:.85}

/* 5) Tooltips de informacion en stats */
.ci-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:rgba(30,94,255,.12);color:#1e5eff;
  font-size:.62rem;font-weight:700;cursor:help;margin-left:5px;
  vertical-align:middle;font-style:normal;
}
.ci-info:hover{background:#1e5eff;color:#fff}

/* 6) Cofre reclamable · clicable con brillo de invitacion */
a.ci-pathmap-chest{pointer-events:auto !important;cursor:pointer;text-decoration:none !important}
.ci-chest--claim .ci-pathmap-chest-icon{
  animation:ciChestFloat 2s ease-in-out infinite;
  box-shadow:0 0 22px rgba(247,147,26,.65), 0 4px 10px rgba(0,0,0,.5) !important;
}
.ci-chest--claim:hover .ci-pathmap-chest-icon{transform:scale(1.25) rotate(0deg)}
.ci-chest--claim .ci-pathmap-chest-label{
  background:#f7931a !important;color:#fff !important;opacity:1 !important;
  font-weight:700;
}

/* ============================================================
   PARCHE v3.9.4 · Tarjeta "Tu progreso" del mapa
   Antes: tarjeta vertical de grid estirada a ancho completo,
   portada con bandas negras y boton gigante. Ahora: tarjeta
   horizontal (portada izquierda sobre fondo claro + contenido
   centrado a la derecha), botones de tamaño natural.
   Solo afecta al mapa (.ci-pathmap-app); el dashboard mantiene
   su grid.
   ============================================================ */
.ci-pathmap-app .ci-course-card{
  display:flex;flex-wrap:wrap;align-items:stretch;
}
.ci-pathmap-app .ci-course-thumb{
  flex:0 0 300px;width:300px;
  min-height:210px;height:auto;aspect-ratio:auto;
  background-color:#eef3fb !important;
  background-size:contain;background-position:center;
  border-right:1px solid #e6eaf3;
}
.ci-pathmap-app .ci-course-overlay{display:none}
.ci-pathmap-app .ci-course-body{
  flex:1;min-width:280px;padding:26px 32px;
  display:flex;flex-direction:column;justify-content:center;
}
.ci-pathmap-app .ci-course-title{font-size:1.35rem;margin-bottom:8px}
.ci-pathmap-app .ci-course-actions{margin-top:10px}
.ci-pathmap-app .ci-btn-course{
  flex:0 0 auto;padding:12px 32px;font-size:.9rem;
}
.ci-pathmap-app .ci-course-lessons{flex-basis:100%;width:100%}
@media (max-width:700px){
  .ci-pathmap-app .ci-course-thumb{
    flex:1 1 100%;width:100%;min-height:200px;
    border-right:none;border-bottom:1px solid #e6eaf3;
  }
  .ci-pathmap-app .ci-btn-course{flex:1}
}

/* ============================================================
   v4.0 · REVISION UX COMPLETA (auditoria + skill de diseño)
   Consolida TODOS los restos del tema oscuro y unifica estados,
   sombras y radios a la paleta invit. Un solo bloque, no parches.
   ============================================================ */

/* -- 0 · Contraste AA: text3 pasaba 3.08:1 sobre blanco -------- */
.cryptoion-app{--ci-text3:#6b7688}

/* -- 1 · ACORDEON DE LECCIONES: era panel oscuro dentro de
      tarjeta blanca (texto tinta sobre negro = ilegible) -------- */
.ci-course-lessons{
  background:#f4f7fc !important;
  border-top:1px solid #e6eaf3 !important;
}
.ci-topic-header{border-bottom-color:#e6eaf3 !important}
.ci-lesson-link{color:#0d1729}
.ci-lesson-link:hover{
  background:rgba(30,94,255,.06) !important;
  border-color:rgba(30,94,255,.25) !important;
  color:#1240c4 !important;
}
.ci-lesson-status{
  background:#eef3fb !important;border-color:#dce3f0 !important;
  color:#4a5568 !important;
}
.ci-lesson.completed .ci-lesson-status{
  background:linear-gradient(135deg,#15803d,#16a34a) !important;
  border-color:#16a34a !important;color:#fff !important;
}
.ci-lesson.next .ci-lesson-status{
  background:linear-gradient(135deg,#1e5eff,#1240c4) !important;
  border-color:#1e5eff !important;color:#fff !important;
  box-shadow:0 0 0 3px rgba(30,94,255,.16) !important;
  animation:none !important;
}
.ci-lesson.next .ci-lesson-type{
  background:rgba(30,94,255,.1) !important;color:#1240c4 !important;
}
.ci-lesson.completed .ci-lesson-title{text-decoration-color:rgba(13,23,41,.3)}
.ci-lesson-type{
  background:#eef3fb !important;color:#6b7688 !important;
}
.ci-topic-bar{background:#e6eaf3 !important}

/* Lecciones BLOQUEADAS (nuevo estado del acordeon LMS) */
.ci-lesson.locked .ci-lesson-link{
  opacity:.5;cursor:not-allowed;
}
.ci-lesson.locked .ci-lesson-link:hover{
  background:transparent !important;border-color:transparent !important;
  transform:none;color:#0d1729 !important;
}
.ci-lesson.locked .ci-lesson-status{font-size:.6rem}

/* -- 2 · PORTALES DEL ATLAS: texto quedo oscuro sobre velo
      oscuro al migrar las variables (pitch de venta ilegible) --- */
.ci-portal-eyebrow{color:rgba(255,255,255,.72) !important}
.ci-portal-stats-row{color:rgba(255,255,255,.85) !important}
.ci-portal-sale-pitch{color:rgba(255,255,255,.88) !important}
.ci-portal-sale-pitch strong{color:#f7931a !important}

/* -- 3 · Etiquetas de nodos del mapa: texto oscuro sobre
      pastilla oscura tras la migracion ------------------------- */
.ci-pathmap-node-label{
  color:#e8edf6 !important;background:rgba(5,6,13,.9) !important;
}

/* -- 4 · Hovers residuales en verde teal -> azul invit,
      sombras negras pesadas -> navy suave ---------------------- */
.ci-stat:hover{border-color:rgba(30,94,255,.3) !important}
.ci-course-card:hover{
  border-color:rgba(30,94,255,.3) !important;
  box-shadow:0 12px 30px rgba(10,28,68,.12) !important;
}
.ci-btn-course:hover{box-shadow:0 10px 26px rgba(30,94,255,.28) !important}
.ci-btn-expand:hover{
  border-color:rgba(30,94,255,.35) !important;
  background:#e6ecf9 !important;color:#1240c4 !important;
}
.ci-treasure-btn:hover{
  border-color:rgba(30,94,255,.35) !important;
  box-shadow:0 8px 22px rgba(10,28,68,.14) !important;
}

/* -- 5 · Rieles de progreso invisibles sobre blanco ------------ */
.ci-progress-bar,.ci-treasure-progress-bar{background:#e6eaf3 !important}
.ci-progress-fill{box-shadow:none !important}

/* -- 6 · Boton "Ver lecciones" fantasma ------------------------ */
.ci-btn-expand{
  background:#eef3fb !important;border-color:#dce3f0 !important;
  color:#1240c4 !important;
}

/* -- 7 · Marco del mapa: fuera neon teal y animacion infinita.
      Sombra estatica navy elegante ----------------------------- */
.ci-pathmap-frame{
  animation:none !important;
  box-shadow:0 20px 50px rgba(10,28,68,.35),
             inset 0 0 0 1px rgba(247,147,26,.25) !important;
}

/* -- 8 · CTAs de portal con gradientes de marca antiguos ------- */
.ci-portal-btn--trader{background:linear-gradient(135deg,#1e5eff,#1240c4) !important}
.ci-portal-btn--inversor{background:linear-gradient(135deg,#f7931a,#e07c00) !important}

/* Nodo "siguiente" del mapa: glow teal -> naranja invit */
.ci-pathmap-node--next .ci-pathmap-node-inner{
  box-shadow:0 0 0 4px rgba(247,147,26,.25),0 0 22px rgba(247,147,26,.55) !important;
}

/* -- 9 · Radios unificados: acciones primarias 12px,
      pildoras solo para toggles/links secundarios -------------- */
.ci-btn-course,.ci-portal-btn,.ci-btn-expand{border-radius:12px !important}
.ci-treasure-btn{border-radius:12px !important}

/* -- 10 · Placas de zona: nombres largos desbordaban el mapa --- */
.ci-pathmap-zone-label{
  max-width:min(46vw,220px);
  white-space:normal !important;text-align:center;line-height:1.2;
}

/* -- 11 · Toast de exito: verde semantico solido, sin gradiente  */
.ci-toast{background:#15803d !important;box-shadow:0 14px 34px rgba(21,128,61,.35) !important}

/* ============================================================
   v4.0.1 · BLINDAJE DE HOVERS + CHIPS DE INFO
   Causa raiz del "texto azul sobre boton azul": el a:hover
   global del tema (mayor especificidad) machacaba el color de
   nuestros botones-link, que no fijaban color en :hover.
   Regla de design system: boton solido -> hover oscurece el
   FONDO (tono, no opacidad); el texto NUNCA cambia de color.
   ============================================================ */

/* Botones SOLIDOS: texto blanco fijo en todos los estados */
.ci-btn-course,.ci-btn-course:hover,.ci-btn-course:focus,
.ci-portal-btn--trader,.ci-portal-btn--trader:hover,
.ci-portal-btn--inversor,.ci-portal-btn--inversor:hover,
.ci-portal-btn--sale,.ci-portal-btn--sale:hover,
.ci-treasure-btn,.ci-treasure-btn:hover,.ci-treasure-btn:focus{
  color:#fff !important;text-decoration:none !important;
}
/* Hover: tono mas oscuro del mismo azul/naranja */
.ci-btn-course:hover{background:linear-gradient(135deg,#1a52e0,#0f38ab) !important}
.ci-portal-btn--trader:hover{background:linear-gradient(135deg,#1a52e0,#0f38ab) !important}
.ci-portal-btn--inversor:hover{background:linear-gradient(135deg,#e08312,#c96e00) !important}
.ci-portal-btn--sale:hover{filter:brightness(.94)}
.ci-treasure-btn:hover{
  background:linear-gradient(90deg,#1a52e0,#0f38ab) !important;
  filter:none !important;
}

/* Botones CLAROS (ghost/pildora): texto navy fijo, fondo se tinta */
.ci-pathmap-back:hover{
  color:#0a1c44 !important;background:#eef3fb !important;
  border-color:rgba(30,94,255,.3) !important;
}
.ci-collapse-btn:hover{color:#1240c4 !important;background:rgba(30,94,255,.08) !important}

/* Chips de informacion "i": antes caracter unicode ⓘ diminuto
   (se veia borroso/pixelado). Ahora circulo propio + letra
   tipografica nitida */
.ci-info{
  width:16px !important;height:16px !important;
  background:transparent !important;
  border:1.5px solid #b9c6e3;color:#6b7688 !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;font-weight:700 !important;
  font-style:normal !important;line-height:1 !important;
  transition:.15s;
}
.ci-info:hover{
  background:#1e5eff !important;border-color:#1e5eff !important;
  color:#fff !important;
}

/* ============================================================
   v4.1 · Accesos a la Tienda
   ============================================================ */
.ci-pathmap-shop,.ci-pathmap-shop:hover{
  color:#e07c00 !important;border-color:rgba(247,147,26,.35) !important;
  margin-left:10px;
}
.ci-pathmap-shop:hover{background:rgba(247,147,26,.08) !important}
.ci-atlas-label{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ci-atlas-shop,.ci-atlas-shop:hover{
  color:#e07c00 !important;text-decoration:none !important;
  font-size:.8rem;font-weight:700;
  border:1px solid rgba(247,147,26,.35);border-radius:99px;
  padding:6px 14px;transition:.2s;
}
.ci-atlas-shop:hover{background:rgba(247,147,26,.08)}

/* ============================================================
   v4.2 · 📖 NARRATIVA + CINEMATICAS
   ============================================================ */

/* Capitulo del camino */
.ci-chapter{
  max-width:860px;margin:0 auto 26px;padding:18px 26px;
  background:#fff;border:1px solid #e6eaf3;border-left:4px solid #f7931a;
  border-radius:14px;box-shadow:0 1px 5px rgba(10,28,68,.05);
}
.ci-chapter-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;color:#e07c00;margin-bottom:6px;
}
.ci-chapter-text{margin:0;color:#4a5568;font-size:.95rem;line-height:1.65}
.ci-chapter-text strong{color:#0a1c44}

/* Test de bienvenida */
.ci-ntest{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,28,68,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.ci-ntest-card{
  background:#fff;border-radius:22px;max-width:480px;width:100%;
  padding:34px 32px;box-shadow:0 30px 80px rgba(10,28,68,.35);
  text-align:center;animation:ciNtestIn .45s cubic-bezier(.16,1,.3,1);
}
@keyframes ciNtestIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.ci-ntest-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;
  letter-spacing:.18em;color:#e07c00;margin-bottom:10px;
}
.ci-ntest-title{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.45rem;
  color:#0a1c44;margin:0 0 8px;
}
.ci-ntest-sub{color:#4a5568;font-size:.9rem;margin:0 0 18px;line-height:1.55}
.ci-ntest-label{
  display:block;text-align:left;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#4a5568;margin:12px 0 5px;
}
.ci-ntest-input{
  width:100%;border:1px solid #e6eaf3;border-radius:11px;padding:12px 14px;
  font-size:1rem;font-family:'Inter',sans-serif;background:#f7f8fc;color:#0d1729;
}
.ci-ntest-input:focus{outline:none;border-color:#1e5eff;box-shadow:0 0 0 3px rgba(30,94,255,.15);background:#fff}
.ci-ntest-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.ci-ntest-opts--col{grid-template-columns:1fr}
.ci-ntest-opts button{
  border:1px solid #e6eaf3;background:#f7f8fc;border-radius:11px;
  padding:12px 14px;font-size:.88rem;font-weight:600;color:#0d1729;
  cursor:pointer;transition:.15s;text-align:left;font-family:'Inter',sans-serif;
}
.ci-ntest-opts button:hover{border-color:rgba(30,94,255,.45);background:#eef3fb}
.ci-ntest-opts button.on{border-color:#1e5eff;background:#eef3fb;box-shadow:0 0 0 2px rgba(30,94,255,.18)}
.ci-ntest-next{
  margin-top:16px;width:100%;border:none;border-radius:12px;padding:13px;
  background:linear-gradient(135deg,#1e5eff,#1240c4);color:#fff !important;
  font-weight:800;font-size:.95rem;cursor:pointer;font-family:'Inter',sans-serif;
}
.ci-ntest-next:hover{filter:brightness(.92)}
.ci-ntest-arch{font-size:3.4rem;margin-bottom:6px;animation:ciArchPop .6s cubic-bezier(.16,1,.3,1)}
@keyframes ciArchPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* Revelacion del mapa secreto */
.ci-reveal{
  position:fixed;inset:0;z-index:9999;
  background:#05060d;display:flex;align-items:center;justify-content:center;
  animation:ciRevealBg 1.2s ease;padding:20px;
}
@keyframes ciRevealBg{from{opacity:0}to{opacity:1}}
.ci-reveal-fog{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(109,40,217,.28),transparent 60%),
             radial-gradient(ellipse at 30% 30%,rgba(30,94,255,.16),transparent 55%);
  animation:ciFog 5s ease-in-out infinite alternate;
}
@keyframes ciFog{from{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}
.ci-reveal-content{position:relative;text-align:center;max-width:520px;animation:ciRevealUp 1.4s cubic-bezier(.16,1,.3,1)}
@keyframes ciRevealUp{0%{opacity:0;transform:translateY(40px)}45%{opacity:0}100%{opacity:1;transform:none}}
.ci-reveal-icon{font-size:4rem;margin-bottom:10px;animation:ciFog 3s ease-in-out infinite alternate}
.ci-reveal-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;
  letter-spacing:.22em;color:#a78bfa;margin-bottom:12px;
}
.ci-reveal-title{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.9rem;
  color:#fff;margin:0 0 12px;
}
.ci-reveal-sub{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.65;margin:0 0 22px}
.ci-reveal-btn{
  border:none;border-radius:12px;padding:14px 34px;cursor:pointer;
  background:linear-gradient(135deg,#6d28d9,#4c1d95);color:#fff !important;
  font-weight:800;font-size:.95rem;font-family:'Inter',sans-serif;
  box-shadow:0 10px 40px rgba(109,40,217,.5);
}
.ci-reveal-btn:hover{filter:brightness(1.1)}

/* Apertura de cofre */
.ci-chestmodal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,28,68,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.ci-chestmodal-card{
  background:#fff;border-radius:22px;max-width:400px;width:100%;
  padding:36px 30px;text-align:center;
  box-shadow:0 30px 80px rgba(10,28,68,.4);
  animation:ciNtestIn .4s cubic-bezier(.16,1,.3,1);
}
.ci-chestmodal-icon{
  font-size:4.4rem;display:inline-block;
  animation:ciChestShake .9s ease-in-out;
}
@keyframes ciChestShake{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-8deg) scale(1.02)}30%{transform:rotate(7deg) scale(1.04)}
  45%{transform:rotate(-6deg) scale(1.06)}60%{transform:rotate(5deg) scale(1.08)}
  75%{transform:rotate(-3deg) scale(1.1)}90%{transform:rotate(2deg) scale(1.06)}
}
.ci-chestmodal-icon.open{animation:ciChestOpen .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ciChestOpen{
  0%{transform:scale(1)}40%{transform:scale(1.35)}
  100%{transform:scale(1.15);filter:drop-shadow(0 0 26px rgba(247,147,26,.8))}
}
.ci-chestmodal-title{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.3rem;
  color:#0a1c44;margin:14px 0 6px;
}
.ci-chestmodal-sub{color:#4a5568;font-size:.88rem;margin:0 0 20px}
.ci-chestmodal-btn{
  display:inline-block;border:none;border-radius:12px;padding:13px 30px;cursor:pointer;
  background:linear-gradient(135deg,#f7931a,#e07c00);color:#fff !important;
  font-weight:800;font-size:.92rem;text-decoration:none !important;font-family:'Inter',sans-serif;
}
.ci-chestmodal-btn:hover{filter:brightness(.94)}
.ci-chestmodal-close{
  display:block;margin:12px auto 0;background:none;border:none;cursor:pointer;
  color:#8a94a6;font-size:.8rem;font-family:'Inter',sans-serif;
}

/* ============================================================
   v4.2.2 · BLINDAJE del test de bienvenida contra el tema
   (el tema pintaba los botones de negro en focus/active)
   ============================================================ */
.ci-ntest-opts button,
.ci-ntest-opts button:focus,
.ci-ntest-opts button:active{
  background:#f7f8fc !important;color:#0d1729 !important;
  border:1px solid #e6eaf3 !important;outline:none !important;
  box-shadow:none !important;
}
.ci-ntest-opts button:hover{
  background:#eef3fb !important;color:#0d1729 !important;
  border-color:rgba(30,94,255,.45) !important;
}
.ci-ntest-opts button.on,
.ci-ntest-opts button.on:hover,
.ci-ntest-opts button.on:focus,
.ci-ntest-opts button.on:active{
  background:#eef3fb !important;color:#1240c4 !important;
  border-color:#1e5eff !important;
  box-shadow:0 0 0 2px rgba(30,94,255,.18) !important;
}
.ci-ntest-next,.ci-ntest-next:hover,.ci-ntest-next:focus{
  background:linear-gradient(135deg,#1e5eff,#1240c4) !important;
  color:#fff !important;border:none !important;
}
.ci-ntest-input,.ci-ntest-input:focus{
  background:#f7f8fc !important;color:#0d1729 !important;
  border:1px solid #e6eaf3 !important;
}
.ci-ntest-input:focus{border-color:#1e5eff !important;box-shadow:0 0 0 3px rgba(30,94,255,.15) !important;background:#fff !important}

/* ============================================================
   v4.3 · SISTEMA DE BOTONES OFICIAL en dashboard y mapas
   (mismo criterio que la web: naranja=CTA, navy=secundaria)
   ============================================================ */
.ci-btn-course,.ci-btn-course:hover,
.ci-portal-btn--sale,.ci-portal-btn--sale:hover,
.ci-treasure-btn,.ci-treasure-btn:hover,
.ci-ntest-next,.ci-ntest-next:hover{
  background:linear-gradient(100deg,#f7931a,#e07c00) !important;
  color:#fff !important;border:none !important;
  box-shadow:0 10px 26px -8px rgba(247,147,26,.55) !important;
}
.ci-btn-course:hover,.ci-portal-btn--sale:hover,
.ci-treasure-btn:hover,.ci-ntest-next:hover{
  filter:brightness(1.04);transform:translateY(-2px);
  box-shadow:0 16px 34px -8px rgba(247,147,26,.6) !important;
}
/* Entrar al mapa = acción secundaria (navy), no compite con el CTA */
.ci-portal-btn--trader,.ci-portal-btn--trader:hover,
.ci-portal-btn--inversor,.ci-portal-btn--inversor:hover{
  background:#0a1c44 !important;color:#fff !important;
}
.ci-portal-btn--trader:hover,.ci-portal-btn--inversor:hover{background:#10265c !important}
/* Ghost */
.ci-pathmap-back,.ci-btn-expand{border:1.5px solid #cdd6e6 !important}
.ci-toast{background:#0a1c44 !important;box-shadow:0 14px 40px -10px rgba(10,28,68,.5) !important}

/* ============================================================
   v4.4 · REDISEÑO "CARTOGRAFIA VIVA"
   Problema: interfaz plana de SaaS pegada sobre arte de fantasia.
   Solucion: que cada elemento parezca GRABADO en el mapa —
   pergamino envejecido, filo dorado, sellos de lacre, y niebla de
   guerra que se retira segun avanzas.
   ============================================================ */

/* -- 1 · NIEBLA DE GUERRA ------------------------------------- */
.ci-pathmap-fog{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,
    transparent 0%,
    transparent calc(var(--ci-explored,0%) - 6%),
    rgba(4,7,20,.42) calc(var(--ci-explored,0%) + 10%),
    rgba(4,7,20,.72) 100%);
  transition:background 1.2s ease;
}
.ci-pathmap-fog::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 90% at 92% 45%,rgba(120,140,190,.14),transparent 65%),
             radial-gradient(ellipse 40% 70% at 78% 70%,rgba(90,110,160,.10),transparent 60%);
  animation:ciMist 14s ease-in-out infinite alternate;
}
@keyframes ciMist{from{opacity:.55;transform:translateX(0)}to{opacity:1;transform:translateX(-2%)}}

/* -- 2 · VIÑETA ----------------------------------------------- */
.ci-pathmap-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse 78% 78% at 50% 48%,transparent 55%,rgba(2,4,12,.55) 100%);
}
.ci-pathmap-zone-labels,.ci-pathmap-chests,.ci-pathmap-nodes{z-index:6}

/* -- 3 · PLACAS DE ZONA · pergamino grabado -------------------- */
.ci-pathmap-zone-label{
  background:linear-gradient(168deg,#f3e7cf 0%,#e8d6b4 46%,#dcc79f 100%) !important;
  border:1px solid #8a6a35 !important;
  border-radius:3px !important;
  padding:7px 15px !important;
  white-space:normal !important;max-width:min(42vw,210px);
  text-align:center;line-height:1.18;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 2px rgba(212,175,55,.35),
    0 3px 10px rgba(0,0,0,.5),
    0 10px 30px -8px rgba(0,0,0,.6) !important;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,filter .22s;
}
.ci-pathmap-zone-label::before{
  content:'';position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(94deg,rgba(139,105,50,.05) 0 2px,transparent 2px 5px),
             repeating-linear-gradient(4deg,rgba(139,105,50,.04) 0 3px,transparent 3px 7px);
  mix-blend-mode:multiply;
}
.ci-pathmap-zone-label .ci-zone-name{
  font-family:'Space Grotesk',Georgia,serif !important;
  font-weight:800 !important;font-size:.72rem !important;
  letter-spacing:.11em !important;text-transform:uppercase;
  color:#3d2c10 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}
.ci-zone-ornament-left,.ci-zone-ornament-right{
  color:#a5822f !important;opacity:.85;font-size:.6rem !important;
}
.ci-pathmap-zone-label--active,.ci-pathmap-zone-label--unlocked{
  border-color:#c79a3c !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 0 2px rgba(247,147,26,.55),
    0 0 22px rgba(247,147,26,.45),
    0 10px 30px -8px rgba(0,0,0,.6) !important;
}
.ci-pathmap-zone-label--link:hover{
  transform:translate(-50%,-50%) scale(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 0 0 2px rgba(247,147,26,.75),
    0 0 34px rgba(247,147,26,.6),
    0 14px 36px -8px rgba(0,0,0,.65) !important;
  filter:brightness(1.04);
}
.ci-pathmap-zone-label--locked,.ci-pathmap-zone-label--next{
  background:linear-gradient(168deg,#cdbb9c 0%,#b9a583 48%,#a89474 100%) !important;
  border-color:#6d5628 !important;filter:saturate(.72);
}
.ci-pathmap-zone-label--locked .ci-zone-name,
.ci-pathmap-zone-label--next .ci-zone-name{color:#4a3a1d !important;opacity:.92}

/* Sello de lacre en lugar del emoji de candado */
.ci-zone-lock{
  font-size:0 !important;position:relative;display:inline-block;
  width:13px;height:13px;margin-right:5px;vertical-align:-2px;
  background:radial-gradient(circle at 34% 32%,#a52f2f,#6d1414 70%);
  border-radius:50%;
  box-shadow:inset 0 -1px 3px rgba(0,0,0,.55),inset 0 1px 2px rgba(255,255,255,.28),0 1px 3px rgba(0,0,0,.45);
}
.ci-zone-lock::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(255,220,200,.35);
}
.ci-pathmap-zone-label--next .ci-zone-lock{animation:ciSealPulse 2.6s ease-in-out infinite}
@keyframes ciSealPulse{
  0%,100%{box-shadow:inset 0 -1px 3px rgba(0,0,0,.55),0 0 0 0 rgba(247,147,26,.45)}
  50%{box-shadow:inset 0 -1px 3px rgba(0,0,0,.55),0 0 0 5px rgba(247,147,26,0)}
}
.ci-zone-enter{color:#8a5a12 !important;font-weight:900}

/* -- 4 · COFRES · cinta solo al pasar el raton ----------------- */
.ci-pathmap-chest-label{
  opacity:0 !important;transform:translate(-50%,4px) !important;
  transition:opacity .2s ease,transform .2s ease !important;
  pointer-events:none;
  background:linear-gradient(168deg,#f3e7cf,#ddc79c) !important;
  color:#3d2c10 !important;border:1px solid #8a6a35 !important;
  border-radius:3px !important;padding:5px 11px !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:800 !important;font-size:.63rem !important;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 0 0 2px rgba(212,175,55,.35) !important;
  z-index:9;
}
.ci-pathmap-chest:hover .ci-pathmap-chest-label{
  opacity:1 !important;transform:translate(-50%,0) !important;
}
.ci-pathmap-chest-icon{
  font-size:1.55rem !important;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));
  transition:transform .22s cubic-bezier(.16,1,.3,1),filter .22s;
}
.ci-chest--claim .ci-pathmap-chest-icon{
  filter:drop-shadow(0 0 12px rgba(247,147,26,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.6));
  animation:ciChestFloat 3.2s ease-in-out infinite;
}
@keyframes ciChestFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-5px) rotate(1.5deg)}
}
.ci-pathmap-chest:hover .ci-pathmap-chest-icon{transform:scale(1.18) !important;animation:none}
.ci-chest--closed .ci-pathmap-chest-icon{
  filter:grayscale(.85) brightness(.5) drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* -- 5 · NODOS · medallones metalicos -------------------------- */
.ci-pathmap-node-inner{
  border-width:2px !important;
  box-shadow:0 3px 12px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,255,255,.25) !important;
}
.ci-pathmap-node--unlocked .ci-pathmap-node-inner{
  border-color:#e8c65a !important;
  box-shadow:0 0 16px rgba(232,198,90,.55),0 3px 12px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,255,255,.4) !important;
}
.ci-pathmap-node-label{
  font-family:'Space Grotesk',sans-serif !important;
  font-size:.6rem !important;font-weight:700 !important;
  letter-spacing:.07em;text-transform:uppercase;
  background:rgba(8,10,22,.88) !important;
  border:1px solid rgba(212,175,55,.35) !important;
  border-radius:3px !important;padding:3px 9px !important;
  color:#efe3c8 !important;
}

/* -- 6 · MARCO ------------------------------------------------- */
.ci-frame-corner{opacity:.5;color:#d4af37 !important}
.ci-frame-compass{opacity:.35;transition:opacity .4s}
.ci-pathmap-frame:hover .ci-frame-compass{opacity:.6}

/* -- 7 · Responsive -------------------------------------------- */
@media (max-width:900px){
  .ci-pathmap-zone-label{padding:5px 10px !important;max-width:36vw}
  .ci-pathmap-zone-label .ci-zone-name{font-size:.6rem !important;letter-spacing:.06em !important}
  .ci-zone-ornament-left,.ci-zone-ornament-right{display:none !important}
  .ci-pathmap-node-label{font-size:.52rem !important;padding:2px 6px !important}
  .ci-pathmap-chest-icon{font-size:1.2rem !important}
}

/* ============================================================
   v4.4.1 · PLACAS COMPACTAS + ANTICOLISION
   1) La caja se ajusta al texto (antes sobraba aire y partia
      nombres cortos en dos lineas)
   2) --ci-dy lo calcula el JS para separar las que se solapan
   ============================================================ */
.ci-pathmap-zone-label{
  width:max-content !important;
  max-width:min(30vw,240px) !important;
  white-space:nowrap !important;
  padding:5px 12px !important;
  line-height:1.1 !important;
  transform:translate(-50%,calc(-50% + var(--ci-dy,0px))) !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .22s,filter .22s !important;
}
.ci-pathmap-zone-label .ci-zone-name{
  font-size:.65rem !important;
  letter-spacing:.09em !important;
  display:inline-flex;align-items:center;gap:4px;
}
.ci-zone-ornament-left,.ci-zone-ornament-right{
  font-size:.5rem !important;opacity:.6;
}
.ci-pathmap-zone-label--link:hover{
  transform:translate(-50%,calc(-50% + var(--ci-dy,0px))) scale(1.06) !important;
}
/* Nombres muy largos: dos lineas equilibradas en vez de una tira */
.ci-pathmap-zone-label--wrap{white-space:normal !important;text-align:center}
.ci-pathmap-zone-label--wrap .ci-zone-name{display:inline}

/* Etiquetas de nodo tambien mas ajustadas */
.ci-pathmap-node-label{
  padding:2px 7px !important;font-size:.55rem !important;
  letter-spacing:.05em !important;
}


/* Revertido a la version aprobada (pergamino compacto v4.4.1) */

/* ============================================================
   v4.9.2 · AJUSTE FINAL DEL MAPA
   1) Placas de zona mas pequeñas: caben en UNA linea
   2) Cintas de cofre: solo al pasar el raton (bug de especificidad:
      `.ci-chest--claim .ci-pathmap-chest-label` ganaba a la regla
      que las ocultaba)
   3) Jerarquia: nodos y cofres pesan menos que las zonas
   ============================================================ */

/* -- 1 · PLACAS DE ZONA · compactas y en una sola linea -------- */
.ci-pathmap-zone-label{
  padding:4px 10px !important;
  max-width:none !important;
}
.ci-pathmap-zone-label .ci-zone-name{
  font-size:.55rem !important;
  letter-spacing:.05em !important;
  line-height:1.15 !important;
}
.ci-zone-ornament-left,.ci-zone-ornament-right{
  font-size:.42rem !important;opacity:.5;
}
.ci-zone-lock{width:9px !important;height:9px !important;margin-right:4px !important}
.ci-zone-lock::after{inset:2px !important}

/* -- 2 · CINTAS DE COFRE · ocultas salvo hover ----------------- */
.ci-pathmap-chests .ci-pathmap-chest .ci-pathmap-chest-label,
.ci-pathmap-chests .ci-chest--claim .ci-pathmap-chest-label{
  opacity:0 !important;
  transform:translate(-50%,4px) !important;
  pointer-events:none !important;
  transition:opacity .18s ease,transform .18s ease !important;
}
.ci-pathmap-chests .ci-pathmap-chest:hover .ci-pathmap-chest-label,
.ci-pathmap-chests .ci-chest--claim:hover .ci-pathmap-chest-label{
  opacity:1 !important;
  transform:translate(-50%,0) !important;
}

/* -- 3 · JERARQUIA · lo secundario pesa menos ------------------ */
/* Cofres: mas pequeños que las placas de zona */
.ci-pathmap-chest-icon{font-size:1.15rem !important}
/* Nodos: circulo mas pequeño y etiqueta discreta */
.ci-pathmap-node-inner{
  width:30px !important;height:30px !important;
  font-size:.85rem !important;
}
.ci-pathmap-node-label{
  font-size:.5rem !important;
  padding:2px 6px !important;
  letter-spacing:.04em !important;
  opacity:.88;
}
.ci-pathmap-node--unlocked .ci-pathmap-node-label{opacity:1}

@media (max-width:900px){
  .ci-pathmap-zone-label .ci-zone-name{font-size:.46rem !important}
  .ci-pathmap-node-inner{width:24px !important;height:24px !important;font-size:.7rem !important}
  .ci-pathmap-chest-icon{font-size:.95rem !important}
}

/* -- 4 · El mapa no debe ocupar toda la pantalla --------------- */
.ci-pathmap-frame{
  max-width:1180px !important;
  margin-left:auto !important;margin-right:auto !important;
}
.ci-pathmap-app .ci-section,.ci-chapter{max-width:1180px;margin-left:auto;margin-right:auto}

/* ===== v5.13 · Tus recursos ===== */
.ci-res .ci-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ci-res-shop{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#f7931a,#e07c00);color:#fff !important;text-decoration:none !important;
  font:700 .88rem 'Inter',sans-serif;border-radius:12px;padding:10px 16px;box-shadow:0 6px 18px rgba(224,124,0,.28);transition:filter .16s,transform .16s}
.ci-res-shop:hover{filter:brightness(.95);transform:translateY(-1px)}
.ci-res-shop:focus-visible{outline:3px solid #ffd28a;outline-offset:2px}
.ci-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:12px}
.ci-res-card{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:13px 14px;border:1px solid #e6eaf3;background:#fff;text-decoration:none !important;color:#0d1729 !important;min-width:0}
.ci-res-card.is-open{transition:border-color .16s,box-shadow .16s,transform .16s}
.ci-res-card.is-open:hover{border-color:#1e5eff;box-shadow:0 8px 22px rgba(30,94,255,.12);transform:translateY(-1px)}
.ci-res-card.is-open:focus-visible{outline:2px solid #1e5eff;outline-offset:2px}
.ci-res-card.is-locked{background:#f7f9fd;border-style:dashed}
.ci-res-ico{font-size:1.5rem;line-height:1;flex:none}
.ci-res-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ci-res-txt b{font:700 .92rem 'Space Grotesk',sans-serif;color:#0a1c44}
.ci-res-txt small{font-size:.78rem;color:#6b7891;line-height:1.4}
.ci-res-go{font:700 .76rem 'Inter',sans-serif;color:#1240c4;white-space:nowrap;align-self:center}
.ci-res-bar{display:block;height:5px;border-radius:99px;background:#e6eaf3;overflow:hidden;margin-top:6px}
.ci-res-bar i{display:block;height:100%;background:linear-gradient(90deg,#1e5eff,#1240c4)}
.ci-res-sub{font:700 .8rem 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a96ad;margin:22px 0 0}
.ci-res-empty{color:#6b7891;margin:12px 0 0}
@media (prefers-reduced-motion:reduce){.ci-res-shop,.ci-res-card.is-open{transition:none}.ci-res-shop:hover,.ci-res-card.is-open:hover{transform:none}}

/* ===== v5.15 · Feed del alumno ===== */
.ci-feed{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin:6px 0 26px}
@media(max-width:980px){.ci-feed{grid-template-columns:1fr 1fr}.ci-feed-hist{grid-column:1/-1}}
@media(max-width:640px){.ci-feed{grid-template-columns:1fr}}
.ci-feed-card{background:#fff;border:1px solid #e6eaf3;border-radius:18px;padding:18px 20px;box-shadow:0 1px 4px rgba(10,28,68,.05);min-width:0;font-family:'Inter',sans-serif;color:#0d1729}
.ci-feed-kicker{font:700 .68rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#1240c4;margin-bottom:8px}
.ci-feed-hist{background:linear-gradient(160deg,#0a1c44,#12306e);border:0;color:#dce5f7;position:relative;overflow:hidden}
.ci-feed-hist::after{content:'';position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(247,147,26,.28),transparent 70%)}
.ci-feed-hist .ci-feed-kicker{color:#ffd28a}
.ci-feed-hist h3{font:800 1.25rem/1.25 'Space Grotesk',sans-serif;color:#fff;margin:0 0 4px}
.ci-feed-when{font-size:.8rem;color:#9fb2d8;margin:0 0 10px}
.ci-feed-hist p{position:relative;z-index:1;line-height:1.55;font-size:.92rem;margin:0 0 8px}
.ci-feed-lesson{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;color:#ffe3b3}
.ci-feed-src{position:relative;z-index:1;font-size:.76rem;color:#9fc0ff;text-decoration:underline}
.ci-feed-more{font-size:.76rem;color:#9fb2d8}
.ci-feed-quote blockquote{margin:0 0 10px;font:600 1.02rem/1.5 'Space Grotesk',sans-serif;color:#0a1c44}
.ci-feed-author{margin:0;font-weight:700;font-size:.85rem;color:#46536b}
.ci-feed-author small{display:block;font-weight:400;color:#8a96ad;font-size:.74rem;margin-top:2px}
.ci-feed-act ul{list-style:none;margin:0;padding:0}
.ci-feed-act li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #f1f4fa;font-size:.86rem}
.ci-feed-act li:first-child{border-top:0}
.ci-feed-act li small{display:block;color:#8a96ad;font-size:.72rem}
.ci-feed-act li b{color:#15803d;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:.8rem}
.ci-feed-act li b.neg{color:#b91c1c}
.ci-feed-act p{color:#6b7891;font-size:.86rem;line-height:1.5;margin:0}

.ci-prof{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e6eaf3;border-radius:14px;padding:12px 16px;margin:0 0 14px;font:500 .9rem 'Inter',sans-serif;color:#0d1729}
.ci-prof span{flex:1;min-width:200px}
.ci-prof a{font-weight:700;color:#1240c4;text-decoration:none;white-space:nowrap}
.ci-prof a:hover{text-decoration:underline}
.ci-prof--todo{background:#fef6ea;border-color:#f3ddb5}

/* ============================================================
   DASHBOARD v2 (20/09/2026) · bloque .ci2-*
   Cabecera → siguiente paso → tu camino → indicadores → continuar → pestañas
   ============================================================ */
.ci2{--c2-bg:#f4f6fb;--c2-card:#fff;--c2-ink:#0a1c44;--c2-text:#3d4863;--c2-soft:#7b86a1;--c2-line:#e4e9f3;
     --c2-blue:#1e5eff;--c2-blue-s:#eaf0ff;--c2-or:#f7931a;--c2-or-s:#fff4e6;--c2-green:#15803d;--c2-red:#b91c1c;
     --c2-r:16px;--c2-sh:0 1px 2px rgba(10,28,68,.05),0 6px 24px rgba(10,28,68,.06);
     max-width:1180px;margin:0 auto;padding:22px 16px 60px;display:grid;gap:18px;
     font-family:'Inter',system-ui,sans-serif;color:var(--c2-text);font-size:15px;line-height:1.5}
.ci2 *{box-sizing:border-box}
.ci2>*,.ci2-paths>*,.ci2-cols>*,.ci2-kpis>*,.ci2-next>*,.ci2-grid3>*{min-width:0}
.ci2 h1,.ci2 h2,.ci2 h3{font-family:'Space Grotesk','Inter',sans-serif;color:var(--c2-ink);margin:0;letter-spacing:-.01em}
.ci2 a{color:inherit;text-decoration:none}
.ci2 p{margin:0}
.ci2-card{background:var(--c2-card);border:1px solid var(--c2-line);border-radius:var(--c2-r);box-shadow:var(--c2-sh)}
.ci2-kicker{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c2-soft);font-weight:700}
.ci2-muted{color:var(--c2-soft);font-size:.9rem}
.ci2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ci2-head h2{font-size:1.15rem}
.ci2-link{font-size:.84rem;font-weight:600;color:var(--c2-blue);white-space:nowrap}
.ci2-link:hover{text-decoration:underline}
.ci2-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:700;font-size:.95rem;
         background:var(--c2-or);color:#1a1000;box-shadow:0 6px 18px rgba(247,147,26,.35);transition:transform .15s,box-shadow .15s}
.ci2-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(247,147,26,.45);color:#1a1000}
.ci2-btn--sm{padding:9px 14px;font-size:.86rem;box-shadow:none}
.ci2-btn--ghost{background:var(--c2-blue-s);color:var(--c2-blue)}
.ci2-btn--ghost:hover{color:var(--c2-blue)}

/* 1 · cabecera */
.ci2-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:22px 26px}
.ci2-top h1{font-size:1.75rem}
.ci2-top p{margin-top:4px;color:var(--c2-soft)}
.ci2-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ci2-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--c2-line);border-radius:999px;
          font-size:.85rem;font-weight:600;color:var(--c2-ink);background:#fbfcfe}
.ci2-chip small{color:var(--c2-soft);font-weight:500}

/* 2 · siguiente paso */
.ci2-next{display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;align-items:stretch}
.ci2-next-main{padding:26px;background:linear-gradient(135deg,#0a1c44 0%,#132f73 100%);color:#dbe4ff;display:flex;flex-direction:column;justify-content:center}
.ci2-next-main .ci2-kicker{color:#8fa6ff}
.ci2-next-main h2{color:#fff;font-size:1.45rem;margin:8px 0 6px}
.ci2-next-main p{margin-bottom:18px;max-width:48ch}
.ci2-next-main .ci2-btn{align-self:flex-start}
.ci2-next-meta{margin-top:14px;font-size:.8rem;color:#9fb0dc}
.ci2-side{padding:22px 24px;display:flex;flex-direction:column}
.ci2-side h3{font-size:1rem;margin:6px 0 10px}
.ci2-step{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--c2-line)}
.ci2-step:first-of-type{border-top:0}
.ci2-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;border:2px solid var(--c2-line);color:var(--c2-soft)}
.ci2-step.is-done .ci2-dot{background:var(--c2-green);border-color:var(--c2-green);color:#fff}
.ci2-step.is-now .ci2-dot{border-color:var(--c2-or);color:var(--c2-or)}
.ci2-step b{display:block;color:var(--c2-ink);font-size:.92rem;font-weight:600}
.ci2-step small{color:var(--c2-soft);font-size:.8rem}
.ci2-step.is-done b{color:var(--c2-soft)}
.ci2-mini{font-size:.8rem;font-weight:700;color:var(--c2-blue);white-space:nowrap}
.ci2-mini.is-neg{color:var(--c2-red)}
.ci2-step.is-now .ci2-mini{background:var(--c2-or-s);color:#b35f00;padding:6px 10px;border-radius:8px}
.ci2-bar{height:6px;border-radius:9px;background:var(--c2-line);overflow:hidden;margin-top:auto}
.ci2-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c2-green),#22c55e)}

/* 3 · tu camino */
.ci2-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:18px;align-items:stretch}
.ci2-paths.is-one{grid-template-columns:minmax(0,720px);justify-content:center}
.ci2-path{padding:22px 24px;display:flex;flex-direction:column}
.ci2-path-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ci2-path-top h3{font-size:1.1rem;margin-top:5px}
.ci2-lvl{margin-top:6px;font-size:.86rem;color:var(--c2-soft)}
.ci2-lvl b{color:var(--c2-ink)}
.ci2-pts{text-align:right;flex:0 0 auto}
.ci2-pts .v{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.6rem;font-weight:700;color:var(--c2-ink);line-height:1}
.ci2-pts .u{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;color:var(--c2-or);font-weight:700;margin-top:2px}
.ci2-road{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),1fr);margin:28px 0 16px;align-items:start}
.ci2-track,.ci2-fill{position:absolute;top:18px;height:4px;border-radius:4px;left:calc(100% / var(--n,5) / 2)}
.ci2-track{right:calc(100% / var(--n,5) / 2);background:var(--c2-line)}
.ci2-fill{background:linear-gradient(90deg,var(--c2-blue),#5b8cff);max-width:calc(100% - (100% / var(--n,5)))}
.ci2-st{position:relative;text-align:center;padding:0 6px;display:flex;flex-direction:column;align-items:center}
.ci2-pin{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--c2-line);
         font-size:1rem;position:relative;z-index:1;margin-bottom:8px}
.ci2-st.is-done .ci2-pin{border-color:var(--c2-blue);background:var(--c2-blue);color:#fff;font-size:.9rem}
.ci2-st.is-now .ci2-pin{border-color:var(--c2-or);box-shadow:0 0 0 6px rgba(247,147,26,.18)}
.ci2-st.is-now .ci2-pin::after{content:"TU";position:absolute;top:-21px;left:50%;transform:translateX(-50%);
         font:700 .58rem 'JetBrains Mono',monospace;letter-spacing:.1em;color:#fff;background:var(--c2-or);padding:2px 6px;border-radius:6px}
.ci2-st b{display:block;font-size:.78rem;color:var(--c2-ink);line-height:1.25;min-height:2em}
.ci2-st small{display:block;font-size:.7rem;color:var(--c2-soft);margin-top:2px;line-height:1.25}
.ci2-st.is-next{opacity:.6}
.ci2-here{margin-top:auto;padding:12px 14px;border-radius:12px;background:#f7f9fd;border:1px solid var(--c2-line);
          display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.86rem}
.ci2-here b{color:var(--c2-ink)}
.ci2-due{color:var(--c2-red);font-weight:600}
.ci2-path.is-locked{background:#fbfcfe}
.ci2-path.is-locked h3{color:var(--c2-soft)}

/* 4 · indicadores */
.ci2-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ci2-kpi{padding:16px 18px}
.ci2-kpi .v{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.45rem;font-weight:700;color:var(--c2-ink);line-height:1.15;margin-top:6px}
.ci2-kpi .d{font-size:.78rem;color:var(--c2-soft);margin-top:2px}
.ci2-kpi .d.is-due{color:var(--c2-red);font-weight:600}

/* 5 · continuar + hoy en cripto */
.ci2-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:stretch}
.ci2-box{padding:22px 24px}
.ci2-lesson{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--c2-line)}
.ci2-lesson:first-of-type{border-top:0}
.ci2-lesson:hover b{color:var(--c2-blue)}
.ci2-thumb{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--c2-blue-s);font-size:1.05rem}
.ci2-lesson b{display:block;color:var(--c2-ink);font-size:.92rem;font-weight:600}
.ci2-lesson small{color:var(--c2-soft);font-size:.8rem}
.ci2-tag{font-size:.7rem;font-weight:700;padding:5px 9px;border-radius:7px;background:var(--c2-or-s);color:#b35f00;white-space:nowrap}
.ci2-tag.is-due{background:#fdecec;color:var(--c2-red)}
.ci2-hist{border-radius:14px;padding:18px;background:linear-gradient(145deg,#0a1c44,#1b3a86);color:#dbe4ff}
.ci2-hist .ci2-kicker{color:#f7b35a}
.ci2-hist h3{color:#fff;font-size:1.05rem;margin:6px 0 4px}
.ci2-hist p{font-size:.86rem}
.ci2-hist a{display:inline-block;margin-top:8px;font-size:.78rem;color:#9fb0dc;text-decoration:underline}
.ci2-when{font-size:.78rem;color:#9fb0dc;margin-top:6px}
.ci2-quote{margin-top:14px;padding:16px 18px;border-left:3px solid var(--c2-or);background:#fffaf2;border-radius:0 12px 12px 0}
.ci2-quote p{font-family:'Space Grotesk','Inter',sans-serif;color:var(--c2-ink);font-weight:600}
.ci2-quote small{color:var(--c2-soft);display:block;margin-top:6px}

/* 6 · pestañas */
.ci2-tabs{padding:14px 10px 20px}
.ci2-tabbar{display:flex;gap:4px;padding:0 12px 10px;border-bottom:1px solid var(--c2-line);margin-bottom:16px;overflow-x:auto}
.ci2-tab{padding:9px 14px;border-radius:10px;font:600 .88rem 'Inter',sans-serif;color:var(--c2-soft);white-space:nowrap;cursor:pointer;border:0;background:none}
.ci2-tab small{opacity:.8;font-weight:500}
.ci2-tab.is-on{background:var(--c2-blue-s);color:var(--c2-blue)}
.ci2-pane{display:none;padding:0 16px}
.ci2-pane.is-on{display:block}
.ci2-pane-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ci2-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ci2-res{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--c2-line);border-radius:12px;background:#fff}
.ci2-res:hover b{color:var(--c2-blue)}
.ci2-res .i{font-size:1.25rem;line-height:1.2}
.ci2-res b{display:block;color:var(--c2-ink);font-size:.9rem;font-weight:600}
.ci2-res small{color:var(--c2-soft);font-size:.78rem;display:block;margin-top:2px}
.ci2-res.is-lock{background:#fafbfd}
.ci2-res.is-lock b{color:var(--c2-soft)}
.ci2-resbar{display:block;height:5px;border-radius:5px;background:var(--c2-line);margin-top:8px;overflow:hidden}
.ci2-resbar i{display:block;height:100%;background:var(--c2-blue)}
.ci2-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ci2-bdg{text-align:center;padding:14px 10px;border:1px solid var(--c2-line);border-radius:12px}
.ci2-bdg .i{font-size:1.6rem}
.ci2-bdg b{display:block;color:var(--c2-ink);font-size:.82rem;margin-top:4px}
.ci2-bdg small{color:var(--c2-soft);font-size:.72rem;display:block;margin-top:2px}
.ci2-bdg.is-lock{filter:grayscale(1);opacity:.45}

@media(max-width:980px){
  .ci2-next,.ci2-cols{grid-template-columns:1fr}
  .ci2-paths{grid-template-columns:1fr}
  .ci2-kpis{grid-template-columns:repeat(2,1fr)}
  .ci2-kpis>*:last-child{grid-column:span 2}
  .ci2-top{grid-template-columns:1fr}
  .ci2-chips{justify-content:flex-start}
}
@media(max-width:560px){
  .ci2{padding:14px 12px 44px;gap:14px}
  .ci2-top h1{font-size:1.4rem}
  .ci2-next-main,.ci2-side,.ci2-path,.ci2-box{padding:18px}
  .ci2-st small{display:none}
  .ci2-st b{font-size:.7rem;min-height:2.4em}
  .ci2-pin{width:32px;height:32px;font-size:.9rem}
  .ci2-track,.ci2-fill{top:15px}
  .ci2-here{flex-wrap:wrap}
  .ci2-lesson{grid-template-columns:36px 1fr;row-gap:6px}
  .ci2-lesson .ci2-tag,.ci2-lesson .ci2-link{grid-column:2}
}
/* v2: neutraliza reglas antiguas de .cryptoion-app (centrado con márgenes auto) */
.cryptoion-app.ci2 > *{max-width:none;margin-left:0 !important;margin-right:0 !important}
.cryptoion-app.ci2{background:#f4f6fb}
.cryptoion-app.ci2::before{display:none}

/* v2 · cabecera con banner y foto de perfil */
.ci2-top{display:block;padding:0;overflow:hidden}
.ci2-banner{position:relative;height:0;background:transparent;transition:height .2s}
.ci2-top.has-banner .ci2-banner{height:150px}
.ci2-banner-btn{position:absolute;right:12px;bottom:12px;padding:7px 12px;border:0;border-radius:10px;cursor:pointer;
                font:600 .8rem 'Inter',sans-serif;background:rgba(255,255,255,.92);color:#0a1c44;box-shadow:0 2px 8px rgba(10,28,68,.18)}
.ci2-top:not(.has-banner) .ci2-banner{height:auto;display:flex;justify-content:flex-end;padding:12px 14px 0}
.ci2-top:not(.has-banner) .ci2-banner-btn{position:static;border:1px solid var(--c2-line);background:#fbfcfe;box-shadow:none}
.ci2-top:not(.has-banner) .ci2-top-in{padding-top:6px}
.ci2-banner-btn:hover{background:#fff}
.ci2-top-in{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 26px 22px}
.ci2-top.has-banner .ci2-top-in{padding-top:0}
.ci2-avatar{position:relative;width:86px;height:86px;border-radius:50%;background:linear-gradient(135deg,#1e5eff,#1240c4);
            display:grid;place-items:center;color:#fff;font:700 1.7rem 'Space Grotesk','Inter',sans-serif;
            border:4px solid #fff;box-shadow:0 4px 14px rgba(10,28,68,.14);flex:0 0 auto}
.ci2-top.has-banner .ci2-avatar{margin-top:-46px}
.ci2-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ci2-avatar-edit{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--c2-line);
                 display:grid;place-items:center;font-size:.85rem;cursor:pointer;box-shadow:0 2px 6px rgba(10,28,68,.16)}
.ci2-avatar-edit:hover{background:var(--c2-blue-s)}
.ci2-hello h1{font-size:1.75rem}
.ci2-hello p{margin-top:4px;color:var(--c2-soft)}
.ci2-pers{border-top:1px solid var(--c2-line);padding:16px 26px 20px;background:#fbfcfe}
.ci2-pers-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ci2-pres{display:flex;gap:8px;flex-wrap:wrap}
.ci2-pres-b{width:96px;height:44px;border-radius:10px;border:1px solid var(--c2-line);cursor:pointer;position:relative;overflow:hidden;padding:0}
.ci2-pres-b span{position:absolute;left:0;right:0;bottom:0;font:600 .62rem 'Inter',sans-serif;color:#fff;background:rgba(10,28,68,.45);padding:2px 0}
.ci2-pres-b[data-ci2-preset="limpio"] span{color:#3d4863;background:rgba(255,255,255,.75)}
.ci2-pres-b:hover{outline:2px solid var(--c2-blue);outline-offset:1px}
.ci2-pers-msg{font-size:.82rem;color:var(--c2-green);font-weight:600}
.ci2-pers-msg.is-err{color:var(--c2-red)}
@media(max-width:980px){
  .ci2-top-in{grid-template-columns:auto 1fr;padding:16px 18px 20px}
  .ci2-chips{grid-column:1 / -1}
}
@media(max-width:560px){
  .ci2-top.has-banner .ci2-banner{height:110px}
  .ci2-avatar{width:68px;height:68px;font-size:1.3rem}
  .ci2-top.has-banner .ci2-avatar{margin-top:-38px}
  .ci2-pers{padding:14px 16px 18px}
  .ci2-pres-b{width:calc(50% - 4px)}
}
.cryptoion-app.ci2{box-sizing:border-box;width:100%;max-width:100%}
@media(min-width:1212px){.cryptoion-app.ci2{max-width:1180px;margin:0 auto !important}}
/* v2 · efeméride: que se lea como historia, no como noticia */
.ci2-hist-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.ci2-hist-anyo{font:700 1.15rem "JetBrains Mono",monospace;color:#0a1c44;background:#f7b35a;border-radius:10px;padding:6px 10px;letter-spacing:.02em}
.ci2-hist-top > span:last-child{display:flex;flex-direction:column;gap:2px}
.ci2-hist-fecha{font-size:.78rem;color:#9fb0dc}
.ci2-hist-lec{margin-top:10px;font-size:.84rem;background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px}

/* v2 · áreas personales (Finanzas Personales, Gestión de Capital) */
.ci2-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.ci2-area{padding:20px 22px;display:flex;flex-direction:column}
.ci2-area-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.ci2-area-ico{font-size:1.5rem;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--c2-blue-s);flex:0 0 auto}
.ci2-area h3{font-size:1.05rem;margin:2px 0 4px}
.ci2-area p{font-size:.88rem;color:var(--c2-soft)}
.ci2-area-nota{background:#fffaf2;border-left:3px solid var(--c2-or);border-radius:0 10px 10px 0;padding:10px 12px;font-size:.86rem;color:#7a4a00;margin-bottom:12px}
.ci2-area.is-lock{background:#fbfcfe}
.ci2-area.is-lock h3{color:var(--c2-soft)}
.ci2-area.is-lock .ci2-area-ico{background:#eef2f9}

/* v2 · Vision Board del alumno */
.ci2-vb{display:grid;grid-template-columns:1.25fr 1fr;gap:0;overflow:hidden}
.ci2-vb-main{background:#f7f9fd;display:grid;place-items:center;padding:16px;min-height:260px}
.ci2-vb-ideal{display:block;width:100%}
.ci2-vb-ideal img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 4px 18px rgba(10,28,68,.12)}
.ci2-vb-pdf{display:block;text-align:center;font-weight:600;color:var(--c2-ink);background:#fff;border:1px solid var(--c2-line);border-radius:12px;padding:26px 18px}
.ci2-vb-vacio{text-align:center;color:var(--c2-soft);max-width:320px}
.ci2-vb-vacio span{font-size:2.2rem;display:block}
.ci2-vb-vacio b{display:block;color:var(--c2-ink);margin:6px 0 4px}
.ci2-vb-vacio p{font-size:.86rem}
.ci2-vb-lado{padding:20px 22px}
.ci2-vb-fila{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--c2-line)}
.ci2-vb-fila:first-of-type{border-top:0}
.ci2-vb-ico{font-size:1.2rem;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#f2f5fb}
.ci2-vb-fila.is-on .ci2-vb-ico{background:var(--c2-blue-s)}
.ci2-vb-txt b{display:block;color:var(--c2-ink);font-size:.9rem}
.ci2-vb-txt small{color:var(--c2-soft);font-size:.79rem}
.ci2-vb-acc{display:flex;gap:8px;align-items:center}
.ci2-vb-subir{font-size:.8rem;font-weight:700;color:var(--c2-blue);background:var(--c2-blue-s);border-radius:9px;padding:6px 10px;cursor:pointer}
.ci2-vb-quitar{font-size:.8rem;font-weight:600;color:var(--c2-red);background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.ci2-vb-pie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.ci2-vb-msg{font-size:.82rem;font-weight:600;color:var(--c2-green)}
.ci2-vb-msg.is-err{color:var(--c2-red)}
@media(max-width:980px){.ci2-vb{grid-template-columns:1fr}}


/* ============================================================
   MAPA · arreglos pedidos el 20/09
   ============================================================ */

/* Boton para abrir el mapa del camino (antes era un enlace de texto) */
.ci2-mapbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:999px;
  font:800 .78rem 'Inter',sans-serif;letter-spacing:.06em;
  color:#fff !important;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,#0a1c44 0%,#1e5eff 100%);
  box-shadow:0 4px 14px rgba(30,94,255,.3);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;
}
.ci2-mapbtn:hover,.ci2-mapbtn:focus{
  color:#fff !important;transform:translateY(-1px);
  box-shadow:0 9px 22px rgba(30,94,255,.4);
}
.ci2-mapbtn span{font-size:1rem}

/* Pestanas: el tema pintaba de negro la pulsada */
.ci2-tab,
.ci2-tab:hover,.ci2-tab:focus,.ci2-tab:active,
.ci2-tab.is-on,.ci2-tab.is-on:hover,.ci2-tab.is-on:focus,.ci2-tab.is-on:active{
  border:0;box-shadow:none;outline:none;text-shadow:none;
  -webkit-appearance:none;appearance:none;
  transition:background .15s,color .15s;
}
.ci2-tab,.ci2-tab:hover,.ci2-tab:focus,.ci2-tab:active{background:transparent;color:var(--c2-soft)}
.ci2-tab:hover{background:#eef2fa;color:var(--c2-ink)}
.ci2-tab.is-on,.ci2-tab.is-on:hover,.ci2-tab.is-on:focus,.ci2-tab.is-on:active{
  background:var(--c2-blue-s);color:var(--c2-blue);
}
.ci2-tab:focus-visible{box-shadow:0 0 0 3px rgba(30,94,255,.28)}

/* La zona donde esta el alumno: invitacion a seguir */
.ci-pathmap-zone-label .ci-zone-cta{
  display:block;margin:5px -4px -1px;
  font:800 .52rem 'Inter',sans-serif;letter-spacing:.06em;
  color:#1a1000;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(135deg,#fbbf24 0%,#f7931a 100%);
  border-radius:3px;padding:4px 9px;
  box-shadow:0 2px 8px rgba(247,147,26,.5),inset 0 1px 0 rgba(255,255,255,.45);
  animation:ciZoneCta 2.4s ease-in-out infinite;
}
@keyframes ciZoneCta{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.ci-pathmap-zone-label--link:hover .ci-zone-cta{filter:brightness(1.07)}
@media (max-width:900px){
  .ci-pathmap-zone-label .ci-zone-cta{font-size:.44rem;padding:3px 7px;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.ci-zone-cta{animation:none}}

/* El contenedor lleva width:100% !important pero el box-sizing solo estaba
   puesto a los hijos: en movil el padding lateral sacaba la pagina del
   viewport (407px de ancho con un movil de 390). */
.cryptoion-app{box-sizing:border-box;max-width:100%}

/* Los <button> sin fondo propio del panel: algunos temas les pintan un fondo
   oscuro al pasar el raton o al pulsarlos. Se neutraliza en todos. */
.ci2-vb-quitar,.ci2-vb-quitar:hover,.ci2-vb-quitar:focus,.ci2-vb-quitar:active,
.ci2-pres-b,.ci2-pres-b:hover,.ci2-pres-b:focus,.ci2-pres-b:active{
  border:0;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;
}
.ci2-vb-quitar,.ci2-vb-quitar:hover,.ci2-vb-quitar:focus,.ci2-vb-quitar:active{background:transparent;color:var(--c2-red)}
.ci2-vb-quitar:hover{text-decoration:underline}

/* ============================================================
   v5.50 · BOTONES NEGROS AL PASAR O PULSAR (causa encontrada 29/09)
   El kit global de Elementor del sitio (Estilos globales › Botones) trae
   «.elementor-kit-5514 button:hover, .elementor-kit-5514 button:focus {background-color:#000}».
   Va con la clase del <body>, así que pesa 0,2,1 y ganaba a «.ci2-tab:focus» (0,2,0):
   cualquier <button> del dashboard y del área del Journal se ponía negro al pasar el ratón
   o al pulsarlo. Aquí cada botón fija su fondo en TODOS sus estados con «.ci2 …» o
   «#prModal …» (0,3,0 o más) y !important, para que ningún estilo global lo vuelva a pisar.
   ============================================================ */
.ci2 .ci2-tab,.ci2 .ci2-tab:focus,.ci2 .ci2-tab:active{background:transparent !important;color:var(--c2-soft) !important;box-shadow:none;outline:none}
.ci2 .ci2-tab:hover{background:#eef2fa !important;color:var(--c2-ink) !important}
.ci2 .ci2-tab.is-on,.ci2 .ci2-tab.is-on:hover,.ci2 .ci2-tab.is-on:focus,.ci2 .ci2-tab.is-on:active{background:var(--c2-blue-s) !important;color:var(--c2-blue) !important}
.ci2 .ci2-tab:focus-visible{box-shadow:0 0 0 3px rgba(30,94,255,.28)}
.ci2 button.ci2-btn,.ci2 button.ci2-btn:hover,.ci2 button.ci2-btn:focus,.ci2 button.ci2-btn:active{background:var(--c2-or) !important;color:#1a1000 !important;border:0}
.ci2 button.ci2-btn--ghost,.ci2 button.ci2-btn--ghost:hover,.ci2 button.ci2-btn--ghost:focus,.ci2 button.ci2-btn--ghost:active{background:var(--c2-blue-s) !important;color:var(--c2-blue) !important}
.ci2 .ci2-banner-btn:hover,.ci2 .ci2-banner-btn:focus,.ci2 .ci2-banner-btn:active{background:#fff !important;color:#0a1c44 !important}
.ci2 .ci2-vb-quitar,.ci2 .ci2-vb-quitar:hover,.ci2 .ci2-vb-quitar:focus,.ci2 .ci2-vb-quitar:active{background:transparent !important;color:var(--c2-red) !important}
.ci-chestmodal .ci-chestmodal-close,.ci-chestmodal .ci-chestmodal-close:hover,.ci-chestmodal .ci-chestmodal-close:focus,.ci-chestmodal .ci-chestmodal-close:active,
body .ci-chestmodal-close:hover,body .ci-chestmodal-close:focus,body .ci-chestmodal-close:active{background:none !important;color:#8a94a6 !important}
/* Ventana de «Pon a prueba» (se mueve al <body>, fuera de .ci2) */
#prModal .pr-op,#prModal .pr-op:hover,#prModal .pr-op:focus,#prModal .pr-op:active{background:#fff !important;color:#3d4863 !important}
#prModal .pr-op:hover{border-color:#b9c9ee}
#prModal .pr-op.is-on,#prModal .pr-op.is-on:hover,#prModal .pr-op.is-on:focus,#prModal .pr-op.is-on:active{background:#eef3ff !important;color:#0a1c44 !important}
#prModal .pr-b,#prModal .pr-b:hover,#prModal .pr-b:focus,#prModal .pr-b:active{background:#f7931a !important;color:#1a1000 !important}
#prModal .pr-b--ghost,#prModal .pr-b--ghost:hover,#prModal .pr-b--ghost:focus,#prModal .pr-b--ghost:active{background:#f1f3f8 !important;color:#3d4863 !important}
#prModal .pr-cerrar,#prModal .pr-cerrar:hover,#prModal .pr-cerrar:focus,#prModal .pr-cerrar:active{background:#f1f3f8 !important;color:#5b6784 !important}

/* ============================================================
   v5.51 · «Continúa donde lo dejaste» con el territorio del mapa
   Fondo = recorte ligero del mapa del camino (assets/maps/territorios/{trader|inversor}-{1-5}.webp)
   bajo un velo azul, para que el texto se lea igual que antes.
   ============================================================ */
.ci2 .ci2-next-main.ci2-next-fondo{background:linear-gradient(100deg,rgba(10,28,68,.95) 0%,rgba(10,28,68,.84) 40%,rgba(19,47,115,.3) 100%),var(--ci2-fondo) right center/cover no-repeat,#0a1c44}
.ci2 .ci2-next-lugar{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:#e6ecff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 11px;margin-bottom:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media(max-width:980px){.ci2 .ci2-next-main.ci2-next-fondo{background:linear-gradient(180deg,rgba(10,28,68,.88) 0%,rgba(10,28,68,.72) 55%,rgba(10,28,68,.6) 100%),var(--ci2-fondo) center/cover no-repeat,#0a1c44}}

/* ============================================================
   v5.52 · Revisión semanal en «Tus áreas personales»
   Aviso en rojo (1-2 semanas sin hacer / resta de pips) y contador verde tipo WhatsApp cuando ya es opcional.
   ============================================================ */
.ci2 .ci2-area.is-alerta{border-color:#f3c0c0;box-shadow:0 0 0 1px rgba(185,28,28,.1),0 10px 26px -18px rgba(185,28,28,.45)}
.ci2 .ci2-area-aviso{background:#fdecec;color:var(--c2-red);border:1px solid #f3c0c0;border-radius:10px;padding:9px 12px;font-size:.85rem;font-weight:600;margin:0 0 12px}
.ci2 .ci2-area-ico{position:relative}
.ci2 .ci2-area-badge{position:absolute;top:-7px;right:-9px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#25d366;color:#fff;font:700 .7rem/20px 'Inter',sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
.ci2 .ci2-area-meta{margin-top:10px;font-size:.8rem;color:var(--c2-soft)}

/* ===== v5.53 · «Continúa aprendiendo» → «Tu próxima clase» (propuesta A de Ion, 30/09/2026) ===== */
.ci2 .ci2-ca-dest{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:stretch;border-radius:16px;
  background:linear-gradient(135deg,#0a1c44,#15306e);color:#dbe4ff;padding:14px;box-shadow:0 14px 34px -18px #0a1c44;text-decoration:none;transition:transform .18s,box-shadow .18s}
.ci2 .ci2-ca-dest:hover{transform:translateY(-2px);box-shadow:0 20px 40px -20px #0a1c44}
.ci2 .ci2-ca-dest:focus-visible{outline:3px solid var(--c2-or);outline-offset:3px}
.ci2 .ci2-ca-img{position:relative;border-radius:12px;overflow:hidden;min-height:190px;background:#0a1c44 center/cover no-repeat}
.ci2 .ci2-ca-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,36,.05),rgba(6,14,36,.7))}
.ci2 .ci2-ca-play{position:absolute;z-index:1;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:#0a1c44;font-size:1.3rem;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.ci2 .ci2-ca-dest:hover .ci2-ca-play{transform:scale(1.08)}
.ci2 .ci2-ca-lugar{position:absolute;z-index:1;left:12px;bottom:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 .72rem 'Inter',sans-serif;color:#fff;background:rgba(10,28,68,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 10px;border-radius:999px}
.ci2 .ci2-ca-info{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:6px 8px 6px 0;min-width:0}
.ci2 .ci2-ca-info .ci2-kicker{color:#f7b35a}
.ci2 .ci2-ca-info strong{color:#fff;font:600 1.3rem/1.25 'Space Grotesk','Inter',sans-serif}
.ci2 .ci2-ca-sub{color:#aebbe0;font-size:.88rem}
.ci2 .ci2-ca-barra{height:7px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.ci2 .ci2-ca-barra i{display:block;height:100%;background:linear-gradient(90deg,#f7931a,#ffc76b)}
.ci2 .ci2-ca-meta{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:#aebbe0}
.ci2 .ci2-ca-cta{align-self:flex-start;margin-top:4px}
.ci2 .ci2-ca-fila{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 10px;margin-top:10px;border-radius:12px;
  border:1px solid var(--c2-line);border-left:4px solid var(--c2-or);background:#fff;text-decoration:none;transition:transform .15s,box-shadow .15s}
.ci2 .ci2-ca-fila:hover{transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(10,28,68,.4)}
.ci2 .ci2-ca-fila:hover b{color:var(--c2-blue)}
.ci2 .ci2-ca-fila:focus-visible{outline:3px solid var(--c2-blue);outline-offset:2px}
.ci2 .ci2-ca-fila.is-due{border-left-color:var(--c2-red)}
.ci2 .ci2-ca-fila b{display:block;color:var(--c2-ink);font-size:.95rem;font-weight:600}
.ci2 .ci2-ca-fila small{color:var(--c2-soft);font-size:.8rem}
.ci2 .ci2-ca-mini{position:relative;width:64px;height:44px;border-radius:9px;background:#0a1c44 center/cover no-repeat}
.ci2 .ci2-ca-mini::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;background:rgba(6,14,36,.35);border-radius:9px}
.ci2 .ci2-ca-mini.is-examen{display:grid;place-items:center;background:#fdecec;font-size:1.2rem}
.ci2 .ci2-ca-mini.is-examen::after,.ci2 .ci2-ca-mini.is-cofre::after{display:none}
.ci2 .ci2-ca-fila.is-cofre{border-left-color:#e3a73b;background:linear-gradient(90deg,#fff8ea,#fff 60%)}
.ci2 .ci2-ca-mini.is-cofre{display:grid;place-items:center;background:linear-gradient(145deg,#ffe2a3,#f7931a);font-size:1.3rem}
@media (max-width:760px){
  .ci2 .ci2-ca-dest{grid-template-columns:1fr}
  .ci2 .ci2-ca-img{min-height:170px}
  .ci2 .ci2-ca-info{padding:4px}
  .ci2 .ci2-ca-fila{grid-template-columns:56px 1fr;row-gap:6px}
  .ci2 .ci2-ca-fila .ci2-tag,.ci2 .ci2-ca-fila .ci2-link{grid-column:2;justify-self:start}
  .ci2 .ci2-ca-mini{width:56px;height:40px}
}
@media (prefers-reduced-motion:reduce){.ci2 .ci2-ca-dest,.ci2 .ci2-ca-fila,.ci2 .ci2-ca-play{transition:none}.ci2 .ci2-ca-dest:hover,.ci2 .ci2-ca-fila:hover{transform:none}}

/* ============================================================
   v5.55.3 · «Tus áreas personales» con fondo (claro) y la herramienta dentro de una ventana negro plateado
   Cada tarjeta enseña la herramienta que abre (ilustración con datos de ejemplo) y se inclina al pasar el ratón.
   Fondo claro del panel; el acento de cada área (--aa = r,g,b) solo tiñe el brillo de detrás y el borde al pasar el ratón.
   Las bloqueadas la enseñan desenfocada, con candado. En móvil son un carrusel que se desliza de izquierda a derecha.
   ============================================================ */
.ci2 .ci2-area--art{--aa:56,120,255;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(420px 260px at 92% 100%,rgba(var(--aa),.13),transparent 68%),linear-gradient(180deg,#eceef4 0%,#f7f8fc 34%,#f4f6fb 100%);
  border-color:#e4e9f3;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s}
.ci2 .ci2-area--art:hover,.ci2 .ci2-area--art:focus-within{transform:translateY(-3px);border-color:rgba(var(--aa),.4);box-shadow:0 1px 2px rgba(10,28,68,.05),0 24px 44px -24px rgba(var(--aa),.5)}
.ci2 .ci2-area--rs{--aa:247,147,26}
.ci2 .ci2-area--diario{--aa:56,120,255;--wl:4%}
.ci2 .ci2-area--rs{--wl:-14%}
.ci2 .ci2-area--finanzas-personales{--aa:34,197,94;--wl:2%}
.ci2 .ci2-area--gestion-capital{--aa:139,92,246;--wl:-14%}
.ci2 .ci2-area--art .ci2-area-ico{background:rgba(var(--aa),.13);box-shadow:inset 0 0 0 1px rgba(var(--aa),.2)}
.ci2 .ci2-area--art .ci2-here{background:#fff}
.ci2 .ci2-area--art.is-alerta{border-color:#f3c0c0;box-shadow:0 0 0 1px rgba(185,28,28,.1),0 10px 26px -18px rgba(185,28,28,.45)}

/* compacto (5.55.3): tarjetas ~25 % más bajas */
.ci2 .ci2-area--art{padding:16px 18px}
.ci2 .ci2-area--art .ci2-area-top{gap:11px;margin-bottom:10px}
.ci2 .ci2-area--art .ci2-area-ico{width:38px;height:38px;border-radius:12px;font-size:1.25rem}
.ci2 .ci2-area--art h3{font-size:.98rem;margin:0 0 2px}
.ci2 .ci2-area--art p{font-size:.8rem;line-height:1.4}
.ci2 .ci2-area--art .ci2-here{padding:9px 12px;font-size:.8rem;gap:8px}
.ci2 .ci2-area--art .ci2-area-aviso,.ci2 .ci2-area--art .ci2-area-nota{padding:8px 10px;font-size:.78rem;margin-bottom:8px}
.ci2 .ci2-area--art .ci2-area-meta{margin-top:6px;font-size:.74rem}

/* la ilustración: una ventana negro plateado, inclinada, que asoma por abajo y se endereza al pasar el ratón */
.ci2 .ci2-area-art{display:block;position:relative;height:138px;margin:12px -18px -16px;perspective:1000px;pointer-events:none;flex:0 0 auto}
.ci2 .ci2-area-art::before{content:'';position:absolute;left:22%;right:-12%;top:26%;bottom:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--aa),.38),transparent);filter:blur(16px);opacity:.7;transition:opacity .6s}
.ci2 .ci2-area--art:hover .ci2-area-art::before,.ci2 .ci2-area--art:focus-within .ci2-area-art::before{opacity:1}
.ci2 .ci2-area-win{position:absolute;left:var(--wl,4%);top:6px;width:128%;padding:0 7px;border-radius:15px 15px 0 0;overflow:hidden;
  background:linear-gradient(135deg,#7a8296 0%,#2b303c 13%,#0b0d12 36%,#161922 60%,#4d5467 82%,#1b1e28 100%);
  box-shadow:0 0 0 1px #07080c,0 0 0 2px rgba(190,198,216,.65),0 28px 46px -20px rgba(10,28,68,.55);
  transform-origin:50% 100%;transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-11deg)) rotateZ(var(--rz,1.2deg)) translateY(var(--ty,0)) scale(var(--sc,1));
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s}
.ci2 .ci2-area-win::before{content:'';position:absolute;z-index:2;left:6%;right:6%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.ci2 .ci2-area--art:hover .ci2-area-win,.ci2 .ci2-area--art:focus-within .ci2-area-win{--rx:6deg;--ry:-5deg;--rz:.4deg;--ty:-10px;--sc:1.03}
.ci2 .ci2-area-win.is-sigue{transition:transform .22s ease-out,filter .5s}
.ci2 .ci2-area-bar{display:flex;gap:6px;padding:9px 4px 8px;border-bottom:1px solid rgba(255,255,255,.12)}
.ci2 .ci2-area-bar i{width:9px;height:9px;border-radius:50%;background:#ff6159;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35),0 0 4px rgba(255,97,89,.35)}
.ci2 .ci2-area-bar i:nth-child(2){background:#ffbd2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35),0 0 4px rgba(255,189,46,.3)}
.ci2 .ci2-area-bar i:nth-child(3){background:#27c93f;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35),0 0 4px rgba(39,201,63,.3)}
.ci2 .ci2-area-win img{display:block;width:100%;height:auto;border-radius:2px 2px 0 0}

/* etiqueta flotante: qué se ve en la ilustración */
.ci2 .ci2-area-chip{position:absolute;z-index:2;left:12px;bottom:12px;background:#fff;color:#7b86a1;border-radius:10px;padding:6px 10px;border:1px solid #e4e9f3;
  box-shadow:0 16px 32px -14px rgba(10,28,68,.5);font:700 .54rem 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;animation:ci2AreaFlota 6.5s ease-in-out infinite}
.ci2 .ci2-area-chip b{display:block;margin-top:1px;font:800 .86rem 'Space Grotesk','Inter',sans-serif;letter-spacing:-.01em;text-transform:none;color:#0a1c44}
@keyframes ci2AreaFlota{50%{transform:translateY(-6px)}}

/* áreas bloqueadas: se ve lo que tendrá, desenfocado y con candado */
.ci2 .ci2-area--art.is-lock{background:radial-gradient(420px 260px at 92% 100%,rgba(var(--aa),.08),transparent 68%),linear-gradient(180deg,#e6e9f0 0%,#eff1f6 38%,#ebeef4 100%)}
.ci2 .ci2-area--art.is-lock .ci2-here{background:rgba(255,255,255,.8)}
.ci2 .ci2-area--art.is-lock .ci2-area-win{filter:blur(2.5px) saturate(.5) brightness(.85)}
.ci2 .ci2-area--art.is-lock:hover .ci2-area-win{filter:blur(1.5px) saturate(.65) brightness(.92)}
.ci2 .ci2-area--art.is-lock .ci2-area-chip{display:none}
.ci2 .ci2-area-lock{position:absolute;z-index:3;left:50%;top:44%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;
  background:rgba(14,18,28,.82);border:1px solid rgba(255,255,255,.3);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}

/* móvil: carrusel que se desliza de izquierda a derecha (la siguiente tarjeta asoma) */
.ci2 .ci2-areas-dots{display:none}
.ci2 .ci2-areas-dots span{width:7px;height:7px;border-radius:50%;background:#cbd4e8;transition:width .25s,background .25s}
.ci2 .ci2-areas-dots span.is-on{width:20px;border-radius:4px;background:#1e5eff}
@media(max-width:640px){
  .ci2 .ci2-area--art{--wl:6%}
  .ci2 .ci2-area--rs{--wl:-10%}
  .ci2 .ci2-area-art{height:132px}.ci2 .ci2-area-win{width:114%}
  .ci2 .ci2-areas{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    margin:0 -16px;padding:6px 16px 16px;scroll-padding:0 16px;scrollbar-width:none}
  .ci2 .ci2-areas::-webkit-scrollbar{display:none}
  .ci2 .ci2-area{flex:0 0 min(82%,340px);scroll-snap-align:start}
  .ci2 .ci2-areas-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:-4px}
}
@media(max-width:560px){.ci2 .ci2-areas{margin:0 -12px;padding-left:12px;padding-right:12px;scroll-padding:0 12px}}
@media(prefers-reduced-motion:reduce){.ci2 .ci2-area--art,.ci2 .ci2-area-win,.ci2 .ci2-area-art::before{transition:none}.ci2 .ci2-area-chip{animation:none}.ci2 .ci2-area--art:hover,.ci2 .ci2-area--art:focus-within{transform:none}}

/* ===== Móvil (05/10/2026): cabecera con «Gestionar cuenta» y pestañas sin barra de desplazamiento ===== */
.ci2-account-link:hover{border-color:#1e5eff!important;background:#e9efff!important}
@media(max-width:560px){
  .ci2-top-in{gap:12px 14px;padding:12px 16px 18px}
  .ci2-top:not(.has-banner) .ci2-banner{padding:10px 12px 0}
  .ci2-avatar{width:60px;height:60px;font-size:1.15rem;border-width:3px}
  .ci2-top.has-banner .ci2-avatar{margin-top:-30px}
  .ci2-avatar-edit{width:26px;height:26px;font-size:.75rem}
  .ci2-hello .ci2-kicker{letter-spacing:.08em;font-size:.62rem}
  .ci2 .ci2-kicker{letter-spacing:.08em}
  .ci2-hello h1,.ci2-top h1{font-size:1.3rem;line-height:1.2}
  .ci2-hello p{font-size:.86rem}
  .ci2-chips{gap:8px}
  .ci2-chips .ci2-chip{font-size:.78rem}
  .ci2-tabs{padding:12px 8px 16px}
  .ci2-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:0 4px 10px;overflow:visible}
  .ci2-tab{white-space:normal;text-align:center;padding:8px 4px;font-size:.78rem;line-height:1.25}
  .ci2-tab small{display:block;margin-top:2px}
  .ci2-tab-x{display:none}
}
/* ===== Móvil (05/10/2026 · auditoría del dashboard de alumnos) ===== */
@media(max-width:560px){
  .ci2-top.has-banner .ci2-top-in{padding-top:10px}
  .ci2-avatar-edit{right:-6px;bottom:-6px}
  .ci2-top:not(.has-banner) .ci2-banner{padding:8px 10px 0}
  .ci2-hello .ci2-kicker{font-size:.58rem}
  .ci2-accesos{margin:0 0 14px!important;gap:8px!important}
  .ci2-accesos .ci2-btn{flex:1 1 auto;justify-content:center;font-size:.8rem}
  .ci2-head{flex-wrap:wrap;row-gap:2px}
  .ci2-head .ci2-muted,.ci2-head .ci2-link{font-size:.78rem}
  .ci2-tab-i{display:block;font-size:1.05rem;line-height:1.2}
  .ci2-pane{padding:0 4px}
  .ci2-grid3{gap:8px}
  .ci2-res{padding:10px 12px}
  .ci2-res small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ci2 .ci2-ca-dest{padding:10px;margin:0 -6px}
  .ci2-vb-fila{grid-template-columns:34px 1fr}
  .ci2-vb-acc{grid-column:2;justify-self:start;flex-wrap:wrap}
  .ci2-kpis{gap:8px}
  .ci2-kpi{padding:12px}
  .ci2-kpi .v{font-size:1.2rem}
  .ci2 .map-art{height:190px}
  .ci2 .ci2-areas{margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding:0 16px}
}
@media(max-width:640px){.ci2 .ci2-areas>.ci2-area:only-child{flex-basis:100%}}
/* Recordatorio de la revisión semanal bajo «Continúa donde lo dejaste» (no es la siguiente clase) */
.ci2-next-aviso,.ci2-next-aviso:hover{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:8px 12px;border-radius:10px;font-size:.84rem;font-weight:700;text-decoration:none;color:#0a1c44;background:#fff4e6;border:1px solid #f7c27a}
.ci2-next-fondo .ci2-next-aviso,.ci2-next-fondo .ci2-next-aviso:hover{color:#ffe2b0;background:rgba(10,28,68,.55);border-color:rgba(255,212,144,.45)}
.ci2-next-aviso:hover{border-color:#f7931a}