/**
 * MING v21.0 — Minimalismo Sofisticado
 * Diseño editorial plano, sin artificios
 * Paleta: crema, teal, dorado del logo MING
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Language Selector */
.lang-selector {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  gap: 2px;
  background: var(--surface-card);
  border: 1px solid var(--ming-200);
  border-radius: 20px;
  padding: 2px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.lang-btn {
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ming-400);
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.lang-btn:hover {
  color: var(--ming-ink);
}

.lang-btn.active {
  background: var(--ming-jade);
  color: white;
}

.scene {
  display: none;
  min-height: auto;
  padding: var(--space-4);
  background: var(--ming-paper);
}

.scene.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-2);
}

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL — Elegante y minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

#scenePortal {
  background: var(--ming-paper);
  color: var(--ming-ink);
  text-align: center;
}

.portal { 
  position: relative;
  max-width: 420px;
  padding: var(--space-2) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Decorative corner frames - más sutiles */
.portal__corner {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.portal__corner--tl {
  top: 0;
  left: 0;
  border-top: 1px solid var(--ming-gold);
  border-left: 1px solid var(--ming-gold);
}

.portal__corner--tr {
  top: 0;
  right: 0;
  border-top: 1px solid var(--ming-gold);
  border-right: 1px solid var(--ming-gold);
}

.portal__corner--bl {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid var(--ming-gold);
  border-left: 1px solid var(--ming-gold);
}

.portal__corner--br {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--ming-gold);
  border-right: 1px solid var(--ming-gold);
}

/* Decorative flowers */
.portal__flower {
  position: absolute;
  width: 80px;
  height: auto;
  opacity: 0.15;
  pointer-events: none;
}

.portal__flower--left {
  bottom: 20px;
  left: 20px;
}

.portal__flower--right {
  top: 20px;
  right: 20px;
  transform: scaleX(-1);
}

.portal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-4);
  position: relative;
  z-index: 1;
}

.portal__logo { 
  width: min(85vw, 420px);
  height: auto;
  margin-bottom: -10px;
}

.portal__tagline {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ming-forest);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: -35px; /* NEGATIVO para subir y pegar al logo */
  margin-bottom: var(--space-6);
}

.portal__divider {
  width: 50px;
  height: 1px;
  background: var(--ming-gold);
  margin: 0 auto var(--space-3);
  opacity: 0.5;
}

.portal__question {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ming-ink);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.portal__footer { 
  font-size: 0.7rem; 
  color: var(--ming-ink-soft); 
  margin-top: var(--space-6);
  letter-spacing: 0.05em;
}

/* Privacy badge */
.portal__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(7, 59, 47, 0.05);
  border: 1px solid rgba(7, 59, 47, 0.1);
}

.privacy-decor {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.privacy-text {
  font-size: 0.7rem;
  color: var(--ming-forest);
  letter-spacing: 0.02em;
}

/* Modal privacy badge */
.modal__privacy-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--ming-forest);
  color: white;
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}

.privacy-badge-icon {
  font-family: var(--font-chinese);
  font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD — Jade y Papel
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
  width: 100%;
  max-width: 520px;
  background: white;
  background: var(--surface-card);
  padding: var(--space-6);
  border: var(--border-card);
  position: relative;
  overflow: hidden;
}

/* Decoraciones sutiles para cards */
.card__decor {
  position: absolute;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.card__decor--flowers-tl {
  top: -20px;
  left: -20px;
  width: 120px;
  transform: rotate(-15deg);
}

.card__decor--flowers-br {
  bottom: -30px;
  right: -30px;
  width: 140px;
  transform: rotate(15deg) scaleX(-1);
}

.card__decor--cloud-tr {
  top: 10px;
  right: -40px;
  width: 100px;
}

.card__decor--cloud-bl {
  bottom: 20px;
  left: -30px;
  width: 80px;
  transform: scaleX(-1);
}

.card > *:not(.card__decor) {
  position: relative;
  z-index: 1;
}

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  text-align: center;
  color: var(--ming-ink);
  margin-bottom: var(--space-2);
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  text-align: justify;
  hyphens: auto;
  margin-bottom: var(--space-5);
  line-height: 1.7;
}

.back-link {
  background: none;
  border: none;
  color: var(--ming-primary-dark);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.back-link:hover { 
  color: var(--ming-gold-dark); 
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS — Cuadrados minimalistas
   ═══════════════════════════════════════════════════════════════════════════ */

.progress { display: flex; gap: 8px; }
.progress__dot {
  width: 8px;
  height: 8px;
  background: var(--ming-200);
  transition: background 0.2s;
}
.progress__dot.active { background: var(--ming-gold); }
.progress__dot.done { background: var(--ming-primary-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS — Jade y Papel
   ═══════════════════════════════════════════════════════════════════════════ */

.form { margin-top: var(--space-2); }
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-ink-light);
  margin-bottom: var(--space-1);
}
.field .optional { color: var(--ming-400); font-weight: 400; }

.field input[type="date"],
.field input[type="text"],
.field select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--ming-200);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: white;
  transition: border-color 0.2s;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--ming-gold);
}

.radio-row { display: flex; gap: var(--space-4); }
.radio {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--text-sm);
}
.radio input { accent-color: var(--ming-gold); }

/* Polarity Selection */
.field__hint {
  font-size: var(--text-xs);
  color: var(--ming-400);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  text-align: justify;
  hyphens: auto;
}

.field__note {
  font-size: 0.7rem;
  color: var(--ming-ink-soft);
  line-height: 1.6;
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--ming-100);
  border-left: 2px solid var(--ming-gold);
}

.field__note em {
  font-style: normal;
  color: var(--ming-primary-dark);
  font-weight: 500;
}

.polarity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.polarity-card {
  cursor: pointer;
}

.polarity-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.polarity-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--ming-200);
  transition: border-color 0.2s, background 0.2s;
}

.polarity-card input:checked + .polarity-card__content {
  border-color: var(--ming-primary-dark);
  border-width: 2px;
  background: var(--ming-paper-warm);
}

.polarity-card:hover .polarity-card__content {
  border-color: var(--ming-300);
}

.polarity-card__symbol {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
  line-height: 1;
}

.polarity-card--yang .polarity-card__symbol {
  color: var(--ming-ink);
}

.polarity-card--yin .polarity-card__symbol {
  color: var(--ming-400);
}

.polarity-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ming-ink);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}

.polarity-card__subtitle {
  font-size: 0.7rem;
  color: var(--ming-primary-dark);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

/* Centered button */
.btn--centered {
  display: block;
  width: auto;
  margin: var(--space-5) auto 0;
  padding: var(--space-3) var(--space-6);
}

.polarity-card__desc {
  font-size: 0.7rem;
  color: var(--ming-ink-soft);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO BOX — Minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

.info-box {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--ming-ink-light);
  text-align: justify;
  hyphens: auto;
  border-left: 2px solid var(--ming-gold);
  background: var(--ming-paper-warm);
}

.info-box strong { 
  color: var(--ming-primary-dark); 
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXT BOXES — Nacimiento y Actual (lado a lado)
   ═══════════════════════════════════════════════════════════════════════════ */

.context-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (max-width: 480px) {
  .context-row {
    grid-template-columns: 1fr;
  }
}

.context-box {
  padding: var(--space-4);
  border-left: 2px solid var(--ming-300);
  background: var(--surface-card);
}

.context-box--current {
  border-left-color: var(--ming-primary-dark);
  background: var(--ming-paper-warm);
}

.context-box__label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ming-400);
  margin-bottom: var(--space-2);
}

.context-box--current .context-box__label {
  color: var(--ming-primary-dark);
}

.context-box__date {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-ink);
  margin-bottom: var(--space-2);
  text-transform: capitalize;
}

.context-box--current .context-box__date {
  font-size: var(--text-base);
  color: var(--ming-primary-dark);
}

.context-box__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.7rem;
  color: var(--ming-ink-soft);
}

.context-box__details span {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS — Minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--ming-200);
  margin-bottom: var(--space-5);
  gap: var(--space-1);
}

.tab {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ming-400);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.tab:hover { 
  color: var(--ming-ink-light); 
}

.tab.active {
  color: var(--ming-primary-dark);
  border-bottom-color: var(--ming-primary-dark);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   PILLARS — Wide Illustration Cards (Jade/Gold palette)
   ═══════════════════════════════════════════════════════════════════════════ */

.pillars-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.pillar-card {
  perspective: 1200px;
  cursor: pointer;
  width: 100%;
}

.pillar-card__inner {
  position: relative;
  width: 100%;
  min-height: 280px;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.pillar-card.flipped .pillar-card__inner {
  transform: rotateY(180deg);
}

.pillar-card__front,
.pillar-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ═══ FRONT ═══ */
.pillar-card__front {
  background: white;
  border: 1px solid #e0d8cc;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.pillar-card--dm .pillar-card__front {
  border: 2px solid var(--ming-gold);
  box-shadow: 0 2px 12px rgba(45, 80, 79, 0.1);
}

/* Image section - left side */
.pc-front__image {
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--ming-paper) 0%, var(--ming-100) 100%);
}

.pc-front__image img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.08));
}

.pc-front__emoji-fallback {
  display: none;
  font-size: 80px;
  align-items: center;
  justify-content: center;
}

/* Info section - right side */
.pc-front__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.pc-front__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.pc-front__label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ming-teal);
  font-family: var(--font-display);
}

.pc-front__badge {
  font-size: 9px;
  font-weight: 600;
  color: white;
  background: var(--ming-gold);
  padding: 3px 8px;
  border-radius: 10px;
}

.pc-front__animal {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ming-ink);
  font-family: var(--font-display);
  margin-bottom: var(--space-1);
}

.pc-front__trait {
  font-size: var(--text-sm);
  color: var(--ming-gold);
  margin-bottom: var(--space-3);
}

.pc-front__element {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--ming-paper-warm) 0%, var(--ming-paper-dark) 100%);
  border-radius: var(--radius-md);
  margin-top: auto;
}

.pc-front__char {
  font-family: var(--font-chinese);
  font-size: var(--text-3xl);
}

.pc-front__element-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc-front__element-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-ink-light);
}

.pc-front__element-sub {
  font-size: 10px;
  color: var(--ming-400);
  font-style: italic;
}

.pc-front__tap {
  text-align: center;
  padding: var(--space-2) 0 0;
  font-size: 11px;
  color: var(--ming-gold);
  margin-top: var(--space-2);
}

/* ═══ BACK ═══ */
.pillar-card__back {
  background: var(--ming-paper-warm);
  transform: rotateY(180deg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ming-200);
  overflow-y: auto;
}

.pillar-card--dm .pillar-card__back {
  background: var(--ming-paper-warm);
  border-color: var(--ming-primary-dark);
  border-width: 2px;
}

.pc-back__header {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ming-primary-dark);
  font-family: var(--font-display);
}

.pc-back__subtitle {
  font-size: var(--text-xs);
  color: var(--ming-400);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ming-200);
  margin-bottom: var(--space-4);
}

.pc-back__section {
  margin-bottom: var(--space-4);
}

.pc-back__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ming-gold-dark);
  margin-bottom: var(--space-2);
}

.pc-back__section p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ming-ink-light);
  margin-bottom: var(--space-2);
  text-align: justify;
  hyphens: auto;
}

.pc-back__relations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--ming-ink-soft);
}

.pc-back__relations span {
  background: rgba(201, 168, 108, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
}

.pc-back__advice {
  font-style: italic;
  color: var(--ming-teal);
  padding: var(--space-2);
  background: rgba(45, 80, 79, 0.06);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.pc-back__context {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid #e0d8cc;
}

.pc-back__context p {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ming-ink-soft);
}

.pc-back__tap {
  text-align: center;
  font-size: 11px;
  color: var(--ming-gold);
  margin-top: var(--space-2);
}

/* ═══ STATES ═══ */
.pillar-card--empty .pillar-card__front {
  border-style: dashed;
  opacity: 0.6;
}

@media (hover: hover) {
  .pillar-card:hover .pillar-card__front {
    border-color: var(--ming-gold);
    box-shadow: 0 4px 16px rgba(45, 80, 79, 0.1);
  }
  
  .pillar-card:hover .pc-front__tap {
    color: var(--ming-teal);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS SERVICES — 3 tiers en grid
   ═══════════════════════════════════════════════════════════════════════════ */

.results-services {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ming-200);
}

.results-services__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-ink-soft);
  text-align: center;
  margin-bottom: var(--space-3);
}

.results-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.service-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--ming-200);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}

.service-btn:hover {
  border-color: var(--ming-gold);
  background: var(--el-earth-light);
}

.service-btn__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ming-primary-dark);
}

.service-btn__desc {
  font-size: 0.65rem;
  color: var(--ming-ink-soft);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGENTE DEL DÍA SHOWCASE — Minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

.dm-showcase {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--ming-200);
  margin-bottom: var(--space-4);
}

.dm-showcase__char {
  font-family: var(--font-chinese);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--ming-primary-dark);
}

.dm-showcase__pinyin { 
  font-size: var(--text-lg); 
  font-weight: 500; 
  color: var(--ming-ink);
  font-family: var(--font-display);
}
.dm-showcase__element { font-size: var(--text-sm); color: var(--ming-400); }

.dm-desc {
  font-size: var(--text-sm);
  color: var(--ming-ink-light);
  line-height: 1.8;
  padding: var(--space-4);
  border-left: 2px solid var(--ming-gold);
  text-align: justify;
  hyphens: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGENTE EXPANDED — Minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

.dm-expanded {
  margin-top: var(--space-5);
}

.dm-metaphor {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  border-left: 2px solid var(--ming-gold);
  background: var(--ming-paper-warm);
}

.dm-metaphor__icon {
  display: none; /* Ocultar emoji */
}

.dm-metaphor__text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--ming-teal);
  line-height: 1.5;
}

.dm-education {
  margin-bottom: var(--space-5);
}

.dm-education__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-ink);
  margin-bottom: var(--space-2);
}

.dm-education__text {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.7;
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

/* Element Info Box */
.dm-element-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--ming-paper-warm);
  border: 1px solid var(--ming-200);
  margin-bottom: var(--space-5);
}

.dm-element-info__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.dm-element-info__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ming-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 100px;
}

.dm-element-info__value {
  font-size: var(--text-sm);
  color: var(--ming-ink);
  font-weight: 500;
}

.dm-section {
  border-bottom: 1px solid var(--ming-200);
  margin-bottom: 0;
  overflow: hidden;
}

.dm-section:last-child {
  border-bottom: none;
}

.dm-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  cursor: pointer;
  user-select: none;
}

.dm-section__header:hover {
  opacity: 0.8;
}

.dm-section__icon {
  display: none; /* Ocultar emoji */
}

.dm-section__title {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-ink);
}

.dm-section__toggle {
  color: var(--ming-400);
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.dm-section.expanded .dm-section__toggle {
  transform: rotate(180deg);
}

.dm-section__content {
  display: none;
  padding-bottom: var(--space-4);
}

.dm-section.expanded .dm-section__content {
  display: block;
}

.dm-traits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-traits li {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.8;
  padding: var(--space-1) 0;
}

.dm-traits li::before {
  content: none;
}

.dm-social {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.6;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ming-100);
}

.dm-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .dm-columns {
    grid-template-columns: 1fr;
  }
}

.dm-column {
  padding: 0;
}

.dm-column--strengths,
.dm-column--challenges {
  background: none;
}

.dm-column__title {
  font-size: var(--text-xs);
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--ming-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dm-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-column li {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.6;
  margin-bottom: var(--space-1);
  position: relative;
  padding-left: var(--space-3);
}

.dm-column--strengths li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--el-wood);
  font-weight: bold;
}

.dm-column--challenges li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--el-fire);
  font-weight: bold;
}

.dm-career-intro {
  display: none; /* Ocultar intro redundante */
}

.dm-career-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dm-tag {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  background: var(--ming-100);
  border: none;
  border-radius: var(--radius-full);
  color: var(--ming-ink-light);
}

.dm-section__content p {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.7;
  margin: 0 0 var(--space-2) 0;
}

.dm-section__content p:last-child {
  margin-bottom: 0;
}

.dm-section__content p strong {
  color: var(--ming-ink);
}

.dm-health-advice {
  padding: var(--space-3);
  border-left: 2px solid var(--el-wood);
  margin-top: var(--space-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENT BARS — Minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

.el-bars { margin-bottom: var(--space-5); }

.el-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.el-bar__icon { 
  font-family: var(--font-chinese); 
  font-size: var(--text-sm); 
  width: 20px; 
  color: var(--ming-ink-light);
}
.el-bar__name { 
  font-size: var(--text-xs); 
  color: var(--ming-ink-soft); 
  width: 55px;
  font-weight: 500;
}
.el-bar__track { 
  flex: 1; 
  height: 8px; 
  background: var(--ming-100); 
  overflow: hidden; 
}
.el-bar__fill { 
  height: 100%; 
  transition: width 0.6s ease; 
}
.el-bar__fill--wood { background: var(--el-wood); }
.el-bar__fill--fire { background: var(--el-fire); }
.el-bar__fill--earth { background: var(--el-earth); }
.el-bar__fill--metal { background: var(--el-metal); }
.el-bar__fill--water { background: var(--el-water); }
.el-bar__pct { 
  font-size: var(--text-xs); 
  width: 36px; 
  text-align: right; 
  color: var(--ming-ink-soft);
  font-weight: 500;
}

/* Clickeable */
.el-bar--clickable {
  cursor: pointer;
  transition: background 0.2s ease;
  padding: var(--space-2) var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  border-radius: 4px;
}

.el-bar--clickable:hover {
  background: var(--ming-100);
}

.el-bar--clickable.active {
  background: var(--ming-paper-warm);
  border-left: 2px solid var(--ming-gold);
}

/* Element Detail Panel */
.el-detail-panel {
  display: none;
  margin-top: var(--space-4);
}

.el-detail-panel.visible {
  display: block;
}

.el-detail {
  border: 1px solid var(--ming-200);
  background: var(--surface-card);
  overflow: hidden;
}

.el-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--ming-100);
}

.el-detail__header.el-wood { background: rgba(74, 140, 74, 0.1); }
.el-detail__header.el-fire { background: rgba(201, 76, 76, 0.1); }
.el-detail__header.el-earth { background: rgba(166, 124, 82, 0.1); }
.el-detail__header.el-metal { background: rgba(122, 122, 122, 0.1); }
.el-detail__header.el-water { background: rgba(74, 107, 140, 0.1); }

.el-detail__zh {
  font-family: var(--font-chinese);
  font-size: 2rem;
  line-height: 1;
}

.el-detail__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ming-ink);
}

.el-detail__body {
  padding: var(--space-4);
}

.el-detail__desc {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.8;
  text-align: justify;
  hyphens: auto;
  margin: 0 0 var(--space-4);
}

.el-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 480px) {
  .el-detail__grid {
    grid-template-columns: 1fr;
  }
}

.el-detail__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.el-detail__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ming-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.el-detail__value {
  font-size: var(--text-sm);
  color: var(--ming-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRENGTH CARD — Minimalista
   ═══════════════════════════════════════════════════════════════════════════ */

.strength-card {
  text-align: center;
  padding: var(--space-5);
  border: 1px solid var(--ming-200);
  margin-bottom: var(--space-5);
  background: var(--surface-card);
}

.strength-card__label { 
  font-size: var(--text-xs); 
  color: var(--ming-400); 
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.strength-card__value { 
  font-size: var(--text-xl); 
  font-weight: 500; 
  color: var(--ming-gold); 
  font-family: var(--font-display); 
  margin: var(--space-1) 0;
}
.strength-card__fav { 
  font-size: var(--text-xs); 
  color: var(--ming-ink-soft); 
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENTS TAB EXPANDED — Jade y Papel (simplificado)
   ═══════════════════════════════════════════════════════════════════════════ */

.balance-explanation {
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.7;
}

.balance-explanation:empty {
  display: none;
}

.balance-explanation strong {
  color: var(--ming-ink);
}

.balance-explanation .el-dominant {
  font-weight: 500;
}

.balance-explanation .el-missing {
  color: var(--el-fire);
}

.strength-explanation {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-left: 2px solid var(--ming-gold);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.strength-explanation:empty {
  display: none;
}

.strength-explanation__title {
  font-weight: 500;
  color: var(--ming-ink);
  margin-bottom: var(--space-2);
}

.strength-explanation p {
  margin: 0 0 var(--space-2) 0;
  color: var(--ming-ink-soft);
}

.strength-explanation p:last-child {
  margin-bottom: 0;
}

.favorable-detail {
  margin: var(--space-4) 0;
}

.favorable-detail:empty {
  display: none;
}

.favorable-detail__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ming-ink);
  margin-bottom: var(--space-2);
}

.favorable-detail__intro {
  font-size: var(--text-sm);
  color: var(--ming-ink-light);
  margin-bottom: var(--space-4);
}

.favorable-detail__grid {
  display: grid;
  gap: var(--space-4);
}

.favorable-item {
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(45,80,79,0.02) 0%, rgba(212,168,75,0.02) 100%);
  border: 1px solid var(--ming-200);
  border-radius: var(--radius-md);
}

.favorable-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ming-100);
}

.favorable-item__icon {
  font-size: 1.5rem;
}

.favorable-item__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ming-jade);
}

.favorable-item__tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.favorable-tip {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.5;
}

.favorable-tip strong {
  color: var(--ming-ink);
  font-weight: 500;
}

/* Element Education Section — Jade y Papel */
.el-education {
  margin-top: var(--space-5);
  border: 1px solid var(--border-default);
  background: linear-gradient(135deg, rgba(105, 151, 165, 0.05), rgba(57, 104, 76, 0.03));
  position: relative;
  overflow: hidden;
}

.el-education::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background-image: url('../assets/decorative/cloud-small.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.04;
  pointer-events: none;
}

.el-education__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  user-select: none;
  background: var(--ming-forest);
  color: white;
}

.el-education__header:hover {
  background: var(--ming-jade);
}

.el-education__decor {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  filter: brightness(10);
}

.el-education__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
}

.el-education__toggle {
  opacity: 0.8;
  font-size: 0.8rem;
  transition: transform 0.2s;
}

.el-education.expanded .el-education__toggle {
  transform: rotate(180deg);
}

.el-education__intro {
  display: none;
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--ming-paper-warm);
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.6;
}

.el-education.expanded .el-education__intro {
  display: block;
}

.el-education__content {
  display: none;
  padding: var(--space-4);
}

.el-education.expanded .el-education__content {
  display: block;
}

/* Ciclos individuales */
.el-cycle {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
}

.el-cycle--productive {
  border-left: 3px solid var(--el-wood);
}

.el-cycle--control {
  border-left: 3px solid var(--el-fire);
}

.el-cycle:last-of-type {
  margin-bottom: var(--space-4);
}

.el-cycle__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ming-forest);
  margin-bottom: var(--space-2);
}

.el-cycle__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.el-cycle__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-chinese);
  font-size: 1.2rem;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--ming-paper), var(--ming-paper-warm));
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-3);
}

.el-cycle__chain span {
  padding: 4px 8px;
  font-weight: 500;
}

.el-cycle__explain {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
}

/* Why matters section */
.el-cycle__why {
  padding: var(--space-4);
  background: var(--ming-jade-light);
  border-left: 3px solid var(--ming-jade);
}

.el-cycle__why strong {
  display: block;
  color: var(--ming-forest);
  margin-bottom: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE CARDS — Jade y Papel
   ═══════════════════════════════════════════════════════════════════════════ */

.service-grid { display: flex; flex-direction: column; gap: var(--space-3); }

.service-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: white;
  border: 1px solid var(--ming-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}

.service-card:hover {
  border-color: var(--ming-gold);
}

.service-card__icon { font-size: 1.5rem; text-align: center; }
.service-card__name { font-weight: 500; font-size: var(--text-sm); color: var(--ming-ink); }
.service-card__desc { grid-column: 2; font-size: var(--text-xs); color: var(--ming-ink-soft); line-height: 1.5; }
.service-card__cost { font-size: var(--text-sm); color: var(--ming-gold); font-weight: 500; }

.balance-reminder {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ming-400);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ming-100);
}

.balance-reminder strong { color: var(--ming-gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   READING SECTIONS — Jade y Papel
   ═══════════════════════════════════════════════════════════════════════════ */

.reading-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ming-200);
  margin-bottom: 0;
}

.reading-section:last-child {
  border-bottom: none;
}

.reading-section__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-teal);
  margin-bottom: var(--space-2);
}

.reading-section__content {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LUCK TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.luck-timeline { margin-bottom: var(--space-4); }
.luck-timeline-title { font-size: var(--text-sm); font-weight: 600; color: var(--ming-gold); margin-bottom: var(--space-2); }
.luck-timeline-direction { font-size: 10px; color: #a9a89f; margin-bottom: var(--space-2); }

.luck-pillars-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.luck-pillar {
  flex: 0 0 68px;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: var(--ming-paper);
  border: 1px solid var(--ming-200);
  border-radius: var(--radius-md);
}

.luck-pillar.current { 
  border-color: var(--ming-gold-light); 
  background: linear-gradient(180deg, #fdf9f0 0%, #f5edd8 100%);
  box-shadow: 0 4px 12px rgba(212, 168, 75, 0.15);
}
.luck-pillar-age { font-size: 9px; color: #a9a89f; }
.luck-pillar-chars { font-family: var(--font-chinese); font-size: var(--text-lg); color: var(--ming-ink); }
.luck-pillar-element { font-size: 8px; color: #a9a89f; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPATIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

.compat-you { margin-bottom: var(--space-2); }
.compat-you label { font-size: var(--text-sm); color: var(--ming-ink-soft); }
.compat-badge {
  padding: var(--space-3);
  background: linear-gradient(135deg, #fdf9f0 0%, #f5edd8 100%);
  border: 1px solid rgba(212, 168, 75, 0.3);
  border-radius: var(--radius-md);
  font-family: var(--font-chinese);
  text-align: center;
  font-size: var(--text-lg);
}

.compat-divider {
  text-align: center;
  font-size: var(--text-2xl);
  color: var(--ming-gold-light);
  margin: var(--space-3) 0;
}

.compat-score {
  text-align: center;
  padding: var(--space-5);
  background: linear-gradient(180deg, #fdf9f0 0%, #f5edd8 100%);
  border: 1px solid rgba(212, 168, 75, 0.3);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
}

.compat-score__value { 
  font-size: 4rem; 
  font-weight: 300; 
  color: var(--ming-gold); 
  font-family: var(--font-display);
  line-height: 1;
}
.compat-score__label { font-size: var(--text-lg); color: var(--ming-ink-soft); margin-top: var(--space-2); }

#compatMini {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mini-score {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  background: var(--ming-paper);
  border: 1px solid var(--ming-200);
  border-radius: var(--radius-md);
  min-width: 60px;
}

.mini-score__value { font-size: var(--text-base); font-weight: 600; color: var(--ming-gold); }
.mini-score__label { font-size: 8px; color: #a9a89f; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.cross-nav {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ming-100);
}

.cross-nav .btn { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING & SKELETONS — Identidad MING
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container principal de carga */
.loading {
  text-align: center;
  padding: var(--space-6);
}

/* Spinner dorado MING */
.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-4);
  border: 2px solid var(--ming-100);
  border-top-color: var(--ming-gold);
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading p { 
  font-size: var(--text-sm); 
  color: var(--ming-400);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADER — Estilo MING elegante
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton-container {
  padding: var(--space-6);
  max-width: 100%;
}

/* Mensaje de espera */
.skeleton-message {
  text-align: center;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(212,168,75,0.05) 0%, rgba(45,80,79,0.05) 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--ming-200);
}

.skeleton-message__icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.skeleton-message__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ming-ink);
  margin-bottom: var(--space-1);
}

.skeleton-message__desc {
  font-size: var(--text-sm);
  color: var(--ming-400);
  line-height: 1.5;
}

.skeleton-message__time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--ming-paper);
  border-radius: 20px;
  font-size: var(--text-xs);
  color: var(--ming-jade);
}

.skeleton-message__time::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--ming-gold);
  border-radius: 50%;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Sección skeleton individual */
.skeleton-section {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--ming-100);
}

/* Barra animada base */
.skeleton-bar {
  background: linear-gradient(
    90deg,
    var(--ming-100) 0%,
    var(--ming-50) 50%,
    var(--ming-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Título skeleton */
.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: var(--space-2);
}

/* Subtítulo skeleton */
.skeleton-subtitle {
  height: 14px;
  width: 40%;
  margin-bottom: var(--space-4);
  opacity: 0.7;
}

/* Líneas de texto */
.skeleton-line {
  height: 12px;
  margin-bottom: var(--space-2);
}

.skeleton-line:nth-child(1) { width: 100%; }
.skeleton-line:nth-child(2) { width: 95%; }
.skeleton-line:nth-child(3) { width: 88%; }
.skeleton-line:nth-child(4) { width: 92%; }
.skeleton-line:nth-child(5) { width: 75%; }

/* Separador decorativo */
.skeleton-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  color: var(--ming-200);
  font-size: var(--text-xs);
}

.skeleton-divider::before,
.skeleton-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--ming-200), transparent);
}

/* Skeleton para consejos prácticos */
.skeleton-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.skeleton-tip {
  padding: var(--space-3);
  background: rgba(212,168,75,0.03);
  border: 1px dashed var(--ming-200);
  border-radius: var(--radius-sm);
}

.skeleton-tip__icon {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-bottom: var(--space-2);
}

.skeleton-tip__text {
  height: 10px;
  width: 80%;
}

/* Progreso de carga */
.skeleton-progress {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--ming-paper);
  border-radius: var(--radius-sm);
}

.skeleton-progress__bar {
  height: 4px;
  background: var(--ming-100);
  border-radius: 2px;
  overflow: hidden;
}

.skeleton-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ming-jade), var(--ming-gold));
  border-radius: 2px;
  animation: progress-fill 8s ease-out forwards;
}

@keyframes progress-fill {
  0% { width: 0%; }
  20% { width: 25%; }
  50% { width: 55%; }
  75% { width: 80%; }
  100% { width: 95%; }
}

.skeleton-progress__text {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ming-400);
}

/* Error styling mejorado */
.error {
  text-align: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, #fef8f8 0%, #fef5f5 100%);
  border: 1px solid rgba(199, 91, 91, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.error p { color: #c75b5b; margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOKEN BADGE & MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.token-badge {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  background: linear-gradient(135deg, #fdf9f0 0%, #f5edd8 100%);
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(212, 168, 75, 0.2);
  border: 1px solid rgba(212, 168, 75, 0.3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-gold);
  z-index: 100;
  transition: all 0.2s;
}

.token-badge:hover { 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 168, 75, 0.25); 
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  backdrop-filter: blur(4px);
}

.modal__card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  max-width: 400px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  max-height: 90vh;
  overflow-y: auto;
}

.modal__card--tokens {
  text-align: left;
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #a9a89f;
  transition: color 0.2s;
  z-index: 10;
}

.modal__close:hover { color: #c75b5b; }

.modal__balance-section {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ming-100);
  margin-bottom: var(--space-4);
}

.modal__icon { 
  font-size: 48px; 
  margin-bottom: var(--space-2);
  font-family: var(--font-chinese);
  color: var(--ming-gold);
}
.modal__balance { 
  font-size: var(--text-2xl); 
  font-weight: 300; 
  color: var(--ming-gold);
  font-family: var(--font-display);
}

.modal__section { margin-bottom: var(--space-4); }

.modal__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ming-forest);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--ming-100);
  font-size: var(--text-sm);
  color: var(--ming-ink-light);
}

.cost-row span:last-child { 
  color: var(--ming-forest);
  font-weight: 600;
}

/* Buy section */
.modal__buy-section {
  background: var(--ming-jade-light);
  padding: var(--space-4);
  margin: 0 calc(-1 * var(--space-5));
  margin-bottom: var(--space-4);
}

.buy-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.buy-pack {
  text-align: center;
  padding: var(--space-3);
  background: white;
  border: 2px solid var(--ming-jade);
  cursor: pointer;
  transition: all 0.2s;
}

.buy-pack:hover {
  background: var(--ming-jade);
  color: white;
}

.buy-pack--best {
  border-color: var(--ming-gold);
  position: relative;
}

.buy-pack--best::before {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ming-gold);
  color: white;
  font-size: 0.6rem;
  padding: 2px 8px;
  white-space: nowrap;
}

.buy-pack__credits {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ming-forest);
  display: block;
}

.buy-pack__price {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.buy-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* Terms section */
.modal__terms {
  background: var(--ming-paper-warm);
  padding: var(--space-4);
  margin: 0 calc(-1 * var(--space-5));
  margin-bottom: var(--space-4);
}

.terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.term-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.term-icon {
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--ming-forest);
  font-weight: 600;
  width: 20px;
  text-align: center;
}

.term-item strong {
  display: block;
  font-size: var(--text-xs);
  color: var(--ming-forest);
  margin-bottom: 2px;
}

.term-item p {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Referral section */
.modal__referral {
  background: linear-gradient(135deg, #fdf9f0 0%, #f5edd8 100%);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  border: 1px solid rgba(212, 168, 75, 0.2);
}

.referral-title { font-weight: 600; font-size: var(--text-sm); color: var(--ming-gold); margin-bottom: var(--space-1); }
.modal__referral p { font-size: 11px; color: var(--ming-ink-soft); margin-bottom: var(--space-2); }

.referral-box { display: flex; gap: var(--space-2); }
.referral-box input {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--ming-200);
  border-radius: var(--radius-sm);
  font-size: 10px;
  background: white;
}
.referral-box button {
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--ming-gold-light) 0%, var(--ming-gold) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: all 0.2s;
}

.referral-box button:hover { transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

#toastContainer {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  padding: var(--space-3) var(--space-5);
  background: #1a1a1a;
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast--success { background: var(--ming-jade); color: #fff; }
.toast--warning { background: var(--ming-yellow); color: var(--ming-ink); }
.toast--error { background: var(--ming-red); color: #fff; }
.toast--error { background: linear-gradient(135deg, #c75b5b 0%, #d97b7b 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENT COLORS
   ═══════════════════════════════════════════════════════════════════════════ */

.el-wood { color: #4a7c59; }
.el-fire { color: #c75b5b; }
.el-earth { color: #b8860b; }
.el-metal { color: var(--ming-ink-soft); }
.el-water { color: #3d5a80; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 520px) {
  .scene { padding: var(--space-3); }
  .card { padding: var(--space-4); max-width: 100%; }
  
  /* Stack cards vertically on mobile */
  .pillar-card__front {
    flex-direction: column;
  }
  
  .pc-front__image {
    flex: 0 0 auto;
    padding: var(--space-3);
  }
  
  .pc-front__image img {
    max-height: 160px;
  }
  
  .pc-front__content {
    padding: var(--space-3);
  }
  
  .pillar-card__inner {
    min-height: 380px;
  }
  
  .dm-showcase { flex-direction: column; text-align: center; }
  .service-card { grid-template-columns: 48px 1fr; }
  .service-card__cost { grid-column: 2; justify-self: start; margin-top: var(--space-1); }
}

@media (min-width: 768px) {
  .card { max-width: 600px; }
  .card--wide { max-width: 720px; }
  
  .pc-front__image img {
    max-height: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORECAST SCENE — Pronósticos
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botones lado a lado en identity */
.btn-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-row .btn {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
}

/* Clima Energético */
.energy-climate {
  background: var(--ming-paper-warm);
  border: 1px solid var(--ming-200);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.climate-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ming-200);
}

.climate-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ming-forest);
  margin: 0;
}

.climate-datetime {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
}

.climate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.climate-card {
  background: var(--surface-card);
  border: 1px solid var(--ming-100);
  padding: var(--space-3);
  text-align: center;
}

.climate-card--wide {
  grid-column: 1 / -1;
  text-align: left;
}

.climate-card__label {
  font-size: var(--text-xs);
  color: var(--ming-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.climate-card__pillar {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-chinese);
  font-size: var(--text-2xl);
  color: var(--ming-forest);
  margin-bottom: var(--space-1);
}

.climate-card__moon {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.climate-card__season {
  font-family: var(--font-chinese);
  font-size: var(--text-xl);
  color: var(--ming-forest);
  margin-bottom: var(--space-1);
}

.climate-card__element {
  font-size: var(--text-sm);
  font-weight: 500;
}

.climate-card__desc {
  font-size: var(--text-xs);
  color: var(--ming-ink-soft);
}

/* Barra de armonía */
.climate-card__harmony {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.harmony-bar {
  flex: 1;
  height: 8px;
  background: var(--ming-100);
  overflow: hidden;
}

.harmony-fill {
  height: 100%;
  transition: width 0.5s ease;
}

.harmony-fill.harmony-good { background: var(--el-wood); }
.harmony-fill.harmony-neutral { background: var(--ming-gold); }
.harmony-fill.harmony-bad { background: var(--el-fire); }

.harmony-label {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.climate-card__advice {
  font-size: var(--text-sm);
  color: var(--ming-ink-light);
  line-height: 1.5;
}

/* Opciones de pronóstico */
.forecast-options {
  margin-bottom: var(--space-6);
}

.forecast-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ming-ink);
  margin: 0 0 var(--space-2);
}

.forecast-desc {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  margin-bottom: var(--space-4);
}

.forecast-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.forecast-option {
  background: var(--surface-card);
  border: 1px solid var(--ming-200);
  padding: var(--space-4);
  transition: border-color var(--duration-base);
}

.forecast-option:hover {
  border-color: var(--ming-gold);
}

.forecast-option__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.forecast-option__icon {
  font-family: var(--font-chinese);
  font-size: var(--text-2xl);
  color: var(--ming-forest);
}

.forecast-option__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ming-ink);
}

.forecast-option__desc {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.forecast-option__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forecast-option__cost {
  font-size: var(--text-sm);
  color: var(--ming-gold-dark);
  font-weight: 500;
}

/* Resultados de pronóstico */
.forecast-results {
  margin-bottom: var(--space-4);
}

.forecast-result__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ming-200);
}

.forecast-result__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ming-forest);
  margin: 0;
}

.forecast-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.forecast-section {
  background: var(--ming-paper-warm);
  border-left: 3px solid var(--ming-gold);
  padding: var(--space-4);
}

.forecast-section__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ming-ink);
  margin: 0 0 var(--space-2);
}

.forecast-section__subtitle {
  font-size: var(--text-sm);
  color: var(--ming-ink-soft);
  margin: 0 0 var(--space-3);
}

.forecast-section__content {
  font-size: var(--text-sm);
  color: var(--ming-ink-light);
  line-height: 1.6;
}

.forecast-section__content p {
  margin: 0 0 var(--space-2);
}

.forecast-section__content p:last-child {
  margin-bottom: 0;
}

.practical-advice {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--ming-200);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .climate-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .climate-card:first-child {
    grid-column: 1 / -1;
  }
  
  .climate-header {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .btn-row {
    flex-direction: column;
  }
  
  .btn-row .btn {
    max-width: none;
  }
}

/* I Ching Promo — Link a VALIS */
.iching-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
  background: var(--ming-900);
  border: 1px solid var(--ming-700);
  text-decoration: none;
  transition: border-color var(--duration-base), background var(--duration-base);
}

.iching-promo:hover {
  border-color: var(--ming-gold);
  background: var(--ming-800);
}

.iching-promo__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.iching-promo__logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.iching-promo__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iching-promo__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ming-50);
}

.iching-promo__desc {
  font-size: var(--text-xs);
  color: var(--ming-400);
}

.iching-promo__arrow {
  font-size: var(--text-lg);
  color: var(--ming-gold);
  transition: transform var(--duration-base);
}

.iching-promo:hover .iching-promo__arrow {
  transform: translateX(4px);
}

@media (max-width: 480px) {
  .iching-promo {
    flex-direction: column;
    text-align: center;
    padding: var(--space-4);
  }
  
  .iching-promo__content {
    flex-direction: column;
  }
  
  .iching-promo__arrow {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIVE FACTORS CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.factors-chart {
  margin-top: var(--space-5);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  overflow: hidden;
}

.factors-chart--empty {
  padding: var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, var(--ming-paper), var(--ming-paper-warm));
}

.factors-empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.factors-empty-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  max-width: 280px;
  margin: 0 auto;
}

.factors-chart__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--ming-forest);
  color: white;
  cursor: pointer;
  user-select: none;
}

.factors-chart__header:hover {
  background: var(--ming-jade);
}

.factors-chart__icon {
  width: 24px;
  height: 24px;
  opacity: 0.9;
  filter: brightness(10);
}

.factors-chart__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
}

.factors-chart__dominant {
  font-size: var(--text-sm);
  opacity: 0.9;
  padding: 4px 12px;
  background: rgba(255,255,255,0.15);
}

.factors-chart__toggle {
  opacity: 0.8;
  transition: transform 0.2s;
}

.factors-chart.expanded .factors-chart__toggle {
  transform: rotate(180deg);
}

.factors-chart__intro {
  display: none;
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--ming-paper-warm);
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.6;
}

.factors-chart.expanded .factors-chart__intro {
  display: block;
}

.factors-chart__preview {
  padding: var(--space-3) var(--space-4);
  background: var(--ming-paper);
}

.factors-preview-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  background: var(--ming-100);
}

.factors-preview-bar__segment {
  transition: width 0.3s ease;
}

.factors-chart__content {
  display: none;
  padding: var(--space-4);
}

.factors-chart.expanded .factors-chart__content {
  display: block;
}

/* Factor cards grid */
.factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.factor-card {
  padding: var(--space-3);
  background: var(--ming-paper);
  border: 1px solid var(--border-default);
  text-align: center;
  position: relative;
}

.factor-card--wealth { border-top: 3px solid var(--el-earth); }
.factor-card--output { border-top: 3px solid var(--el-fire); }
.factor-card--influence { border-top: 3px solid var(--el-water); }
.factor-card--resource { border-top: 3px solid var(--el-wood); }
.factor-card--companion { border-top: 3px solid var(--el-metal); }

.factor-card--dominant {
  background: var(--ming-jade-light);
  border-color: var(--ming-jade);
}

.factor-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.factor-card__chinese {
  font-family: var(--font-chinese);
  font-size: 1.2rem;
  color: var(--ming-forest);
}

.factor-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.factor-card__bar {
  height: 6px;
  background: var(--ming-100);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.factor-card__bar-fill {
  height: 100%;
  background: var(--ming-jade);
  transition: width 0.3s ease;
}

.factor-card--wealth .factor-card__bar-fill { background: var(--el-earth); }
.factor-card--output .factor-card__bar-fill { background: var(--el-fire); }
.factor-card--influence .factor-card__bar-fill { background: var(--el-water); }
.factor-card--resource .factor-card__bar-fill { background: var(--el-wood); }
.factor-card--companion .factor-card__bar-fill { background: var(--el-metal); }

.factor-card__percentage {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ming-forest);
  margin-bottom: var(--space-2);
}

.factor-card__meaning {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.factor-card__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: var(--ming-gold);
  color: var(--ming-forest);
}

.factors-chart__insight {
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(105, 151, 165, 0.08), rgba(57, 104, 76, 0.05));
  border-left: 3px solid var(--ming-cerulean);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-primary);
}

.factors-chart__insight strong {
  color: var(--ming-forest);
}

.factors-chart__insight em {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING — Tutorial para nuevos usuarios
   Estética editorial plana, sin sombras, sin border-radius
   ═══════════════════════════════════════════════════════════════════════════ */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: onboarding-fade-in 0.3s ease;
}

.onboarding-panel {
  position: fixed;
  z-index: calc(var(--z-modal) + 1);
  width: 90%;
  max-width: 360px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--ming-gold);
  animation: onboarding-slide-up 0.3s ease;
}

.onboarding-panel--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.onboarding-panel__inner {
  padding: var(--space-6);
  text-align: center;
}

.onboarding-panel__icon {
  font-family: var(--font-chinese);
  font-size: var(--text-3xl);
  color: var(--ming-gold);
  margin-bottom: var(--space-3);
  line-height: 1;
}

.onboarding-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
}

.onboarding-panel__content {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.onboarding-panel__highlight {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ming-gold-dark);
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--ming-gold-light);
  background: rgba(189, 172, 134, 0.12);
  border-left: 2px solid var(--ming-gold);
}

.onboarding-panel__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.onboarding-panel__progress {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.onboarding-panel__actions {
  display: flex;
  gap: var(--space-3);
}

.onboarding-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.onboarding-btn--skip {
  color: var(--text-muted);
}

.onboarding-btn--skip:hover {
  color: var(--text-secondary);
}

.onboarding-btn--next {
  background: var(--ming-forest);
  color: var(--ming-paper);
  border-color: var(--ming-forest);
}

.onboarding-btn--next:hover {
  background: var(--ming-forest-light);
  border-color: var(--ming-forest-light);
}

/* Arrow para posiciones no centradas */
.onboarding-panel__arrow {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  transform: rotate(45deg);
}

.onboarding-panel--bottom .onboarding-panel__arrow {
  display: block;
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-right: none;
  border-bottom: none;
}

.onboarding-panel--top .onboarding-panel__arrow {
  display: block;
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-left: none;
  border-top: none;
}

/* Highlight del target actual */
.onboarding-target {
  position: relative;
  z-index: calc(var(--z-modal) + 2);
  outline: 2px solid var(--ming-gold);
  outline-offset: 4px;
  animation: onboarding-pulse 1.5s ease infinite;
}

/* Animations */
@keyframes onboarding-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes onboarding-slide-up {
  from { 
    opacity: 0; 
    transform: translate(-50%, -45%);
  }
  to { 
    opacity: 1; 
    transform: translate(-50%, -50%);
  }
}

.onboarding-panel--bottom,
.onboarding-panel--top,
.onboarding-panel--left,
.onboarding-panel--right {
  animation: onboarding-fade-in 0.3s ease;
  transform: none;
}

@keyframes onboarding-pulse {
  0%, 100% { outline-color: var(--ming-gold); }
  50% { outline-color: var(--ming-gold-light); }
}

/* Dark theme adjustments */
[data-theme="dark"] .onboarding-panel {
  background: var(--surface-card);
  border-color: var(--border-default);
}

[data-theme="dark"] .onboarding-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .onboarding-btn--next {
  background: var(--ming-gold);
  color: var(--ming-900);
  border-color: var(--ming-gold);
}

[data-theme="dark"] .onboarding-btn--next:hover {
  background: var(--ming-gold-light);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .onboarding-panel {
    width: calc(100% - 32px);
    max-width: none;
  }
  
  .onboarding-panel__inner {
    padding: var(--space-4);
  }
  
  .onboarding-panel__icon {
    font-size: var(--text-2xl);
  }
  
  .onboarding-panel__title {
    font-size: var(--text-lg);
  }
  
  .onboarding-panel__content {
    font-size: var(--text-sm);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POR QUÉ SOMOS DISTINTOS - Modal y Botón
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botón con animación de pulso sutil */
.portal__why-btn {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--ming-gold);
  color: var(--ming-gold);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: why-pulse 3s ease-in-out infinite;
}

.portal__why-btn:hover {
  background: var(--ming-gold);
  color: var(--ming-900);
  animation: none;
}

@keyframes why-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    border-color: var(--ming-gold);
  }
  50% {
    box-shadow: 0 0 12px 2px rgba(201, 162, 39, 0.25);
    border-color: var(--ming-gold-light);
  }
}

/* Modal "Por qué somos distintos" */
.modal__card--why {
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
}

.why-modal__header {
  text-align: center;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-4);
}

.why-modal__icon {
  display: inline-block;
  font-size: var(--text-3xl);
  color: var(--ming-gold);
  margin-bottom: var(--space-2);
}

.why-modal__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
}

.why-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.why-modal__section {
  padding: var(--space-3);
  background: var(--surface-subtle);
  border-left: 2px solid var(--ming-gold);
}

.why-modal__section--highlight {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.08) 0%, transparent 100%);
  border-left-color: var(--ming-gold-light);
}

.why-modal__section-title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ming-gold);
  margin: 0 0 var(--space-2) 0;
}

.why-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.why-modal__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.why-icon {
  flex-shrink: 0;
  width: 1.5em;
  text-align: center;
  color: var(--ming-gold);
  font-family: var(--font-chinese);
}

.why-modal__footer {
  margin-top: var(--space-5);
  text-align: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.why-modal__footer .btn {
  width: 100%;
  max-width: 280px;
}

/* Dark theme */
[data-theme="dark"] .why-modal__section {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .why-modal__section--highlight {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.12) 0%, transparent 100%);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .modal__card--why {
    padding: var(--space-4);
    max-height: 85vh;
  }
  
  .why-modal__title {
    font-size: var(--text-lg);
  }
  
  .why-modal__section {
    padding: var(--space-2);
  }
  
  .why-modal__list li {
    font-size: var(--text-xs);
  }
}