:root{
  /* ── WARM IVORY & DEEP GRAPHITE SYSTEM ── */
  
  /* ── FONDOS IVORY (transparentes para dejar ver la textura) ── */
  --bg:transparent;
  --bg2:rgba(242,234,215,0.55);
  --bg3:rgba(235,225,200,0.68);
  --bg-nav:rgba(26,61,40,0.95);
  --bg-card:rgba(250,245,235,0.80);
  --bg-modal:rgba(252,248,240,0.97);

  /* ── IVORY BASE ("marfil cálido puro") ── */
  --background:#FAF6EC;          /* HSL 42 67% 95% */

  /* ── VERDE BOSQUE PROFUNDO (jade / paleta portada) ── */
  --vio:#2A5A3A;--vio2:#356A45;--vio3:#1A3D28;--vio4:#0F2A1A;

  /* ── VERDE JADE MEDIO ── */
  --blu:#4A7A58;--blu2:#5A8A68;--blu3:#2E4A38;

  /* ── VERDE SUAVE / ACENTO ── */
  --grn:#6A9A78;--grn2:#7AAA88;--grn3:#3A6A48;

  /* ── GOLD ACCENT (dorado académico bruno) ── */
  --gold:#8A734B;--gold2:#A89364;--gold3:#6B5A3A;

  /* ── TINTA VERDE OSCURA (texto) ── */
  --dark:#1A3D28;--text:#1C2E22;--muted:#4A7A58;--light:#6A9A78;

  /* ── TEXTO DE LECTURA (verde bosque profundo) ── */
  --reading-text:#1A3D28;        /* verde bosque profundo */

  /* ── MODAL I CHING ── */
  --oracle-card:#E8E4D6;         /* HSL 42 24% 88% */
  --oracle-text:#0F2A1A;         /* verde muy oscuro */

  /* ── PANELES CLÍNICOS ── */
  --clinical-green:#EDF4EF;      /* verde muy claro */
  --clinical-blue:#EDEBE4;       /* HSL 40 15% 91% */
  --clinical-green-border:rgba(42,90,58,0.42);
  --clinical-red-bg:#F0E8E0;     /* compañero editorial */
  --clinical-red-border:rgba(138,115,75,0.32);

  /* ── BORDES (verde jade sutil) ── */
  --border:rgba(42,90,58,0.18);--border2:rgba(26,61,40,0.32);

  /* ── SOMBRA (verde bosque) ── */
  --shadow:rgba(26,61,40,0.15);

  /* ── 5 ELEMENTOS ── */
  --madera:#3D6A3D;--fuego:#6B4A3A;--tierra:#7A6840;--metal:#5A7A65;--agua:#2E4A5A;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body {font-family:'EB Garamond',Georgia,serif;background-color:#F5F0E3;background-image:none;background-color:#EDF4EF;background-size:cover;background-position:center center;background-attachment:fixed;color:var(--text);min-height:100vh;overflow-x:hidden}

/* Viñeta suave — graphite sutil */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(ellipse 90% 85% at 50% 50%, transparent 48%, rgba(42,90,58,0.10) 100%);}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 8% 10% at 94% 92%, rgba(138,115,75,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 12% 15% at 12% 55%, rgba(90,90,90,0.03) 0%, transparent 70%);}

/* ── FONDO DECORATIVO (tinta graphite / sello dorado) ── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 55% 45% at 15% 25%, rgba(42,90,58,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 75%, rgba(90,90,90,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(138,115,75,0.04) 0%, transparent 60%);
}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(168,147,100,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(90,90,90,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 20%, rgba(168,147,100,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(42,90,58,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 60%, rgba(168,147,100,0.20) 0%, transparent 100%);
}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(245,240,227,0.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(138,115,75,0.15);box-shadow:0 2px 12px rgba(26,61,40,0.06)}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.5rem 1.5rem;flex-wrap:wrap}
.nav-brand{font-family:'Cinzel',serif;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-size:0.85rem;font-weight:600;padding:0;
  margin-right:0.5rem;
  white-space:nowrap;letter-spacing:0.12em;text-transform:uppercase}
.nav-links{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0.1rem 0;
}
.nav-btn{background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:'EB Garamond',Georgia,serif;font-size:0.75rem;padding:0.3rem 0.6rem;
  transition:color 0.2s;letter-spacing:0.02em;white-space:nowrap;
  border-bottom:2px solid transparent}
.nav-btn:hover{color:var(--gold);border-bottom-color:rgba(138,115,75,0.3)}
.nav-btn.active{color:var(--gold);border-bottom-color:var(--gold2);font-weight:500}

/* ── MAIN ── */
main{padding-top:70px;position:relative;z-index:1}
.section{display:none;min-height:calc(100vh - 70px);padding:2.5rem 1rem}
.section.active{display:block}
.container{max-width:980px;margin:0 auto}

/* ── TÍTULOS ── */
.page-title{font-family:'Cinzel',serif;font-size:1.9rem;
  background:linear-gradient(135deg,var(--vio4),var(--blu3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-align:center;margin-bottom:0.4rem;letter-spacing:0.04em}
.page-subtitle{text-align:center;color:var(--muted);font-style:italic;margin-bottom:2rem;font-size:1.05rem}
.section-divider{text-align:center;margin:1.5rem 0;color:var(--gold2);font-size:1.2rem;letter-spacing:0.3em}

/* ── ORNAMENTO ── */
.ornament{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}
.ornament::before,.ornament::after{content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--border2),transparent)}
.ornament span{color:var(--vio3);white-space:nowrap;font-family:'Cinzel',serif;font-size:0.85rem;letter-spacing:0.1em}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.25rem 1.5rem;margin-bottom:1rem;position:relative;
  box-shadow:0 2px 20px rgba(100,60,0,0.18)}
.card::before{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;
  border:1px solid rgba(42,90,58,0.12);border-radius:5px;pointer-events:none}

/* ── INICIO ── */
.hero{text-align:center;padding:3rem 1rem 2rem}
.hero-title{font-family:'Cinzel',serif;font-size:2.4rem;
  background:linear-gradient(135deg,var(--vio4) 0%,var(--blu3) 50%,var(--grn3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.25;margin-bottom:0.5rem;letter-spacing:0.04em}
.hero-subtitle{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold2);margin-bottom:1.5rem;letter-spacing:0.08em}
.hero-desc{max-width:680px;margin:0 auto 2rem;color:var(--muted);font-size:1.05rem;line-height:1.8}
.hero-badge{display:inline-block;
  background:linear-gradient(135deg,var(--vio),var(--blu));
  color:var(--vio4);font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.15em;
  padding:0.3rem 1rem;border-radius:20px;margin-bottom:1rem;border:1px solid var(--vio2)}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}
.feature-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.25rem;text-align:center;cursor:pointer;transition:all 0.25s;
  box-shadow:0 2px 16px rgba(100,60,0,0.14)}
.feature-card:hover{background:linear-gradient(135deg,rgba(26,61,40,0.3),rgba(42,90,58,0.3));
  border-color:var(--vio3);transform:translateY(-3px);box-shadow:0 8px 30px var(--shadow)}
.feature-card:hover .fc-title{color:var(--vio4)}
.feature-card:hover .fc-desc{color:var(--text)}
.fc-icon{font-size:2rem;margin-bottom:0.5rem;display:block}
.fc-title{font-family:'Cinzel',serif;font-size:0.85rem;color:var(--vio3);margin-bottom:0.3rem;letter-spacing:0.05em;transition:color 0.2s}
.fc-desc{font-size:0.85rem;color:var(--muted);line-height:1.5;transition:color 0.2s}

/* ── CORRESPONDENCIAS ── */
.corr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;margin:1.5rem 0}
.corr-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:0.9rem 0.6rem;text-align:center;cursor:pointer;transition:all 0.25s;position:relative;
  box-shadow:0 2px 12px rgba(100,60,0,0.14)}
.corr-card:hover,.corr-card.selected{
  background:linear-gradient(135deg,rgba(26,61,40,0.22),rgba(42,90,58,0.22));
  box-shadow:0 4px 24px var(--note-color, var(--shadow))66;
  transform:translateY(-2px)}
.corr-card.selected{border-width:2px;background:linear-gradient(135deg, color-mix(in srgb, var(--note-color) 18%, transparent), color-mix(in srgb, var(--note-color) 8%, transparent))}
.corr-card:hover .cn,.corr-card.selected .cn{color:var(--muted)}
.corr-card:hover .cn2,.corr-card.selected .cn2{color:var(--gold3)}
.corr-note{font-family:'Cinzel',serif;font-size:1.7rem;font-weight:700;margin-bottom:0.2rem;letter-spacing:0.04em}
.cn{font-size:0.8rem;color:var(--muted);margin-bottom:0.1rem}
.cn2{font-size:0.75rem;color:var(--gold2)}
.play-btn{position:absolute;top:4px;right:4px;border:none;cursor:pointer;
  font-size:0.85rem;opacity:0.65;transition:opacity 0.2s;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.corr-card:hover .play-btn,.corr-card.selected .play-btn{opacity:1;transform:scale(1.1)}

.corr-detail{background:var(--bg2);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-top:1rem;display:none;box-shadow:0 4px 30px var(--shadow)}
.corr-detail.visible{display:block}
.cd-title{font-family:'Cinzel',serif;font-size:1.2rem;color:var(--vio4);margin-bottom:1rem}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.75rem}
.cd-item label{display:block;font-size:0.75rem;color:var(--muted);letter-spacing:0.05em;margin-bottom:0.15rem;font-family:'Cinzel',serif}
.cd-item span{font-size:1rem;color:var(--text)}

/* ── ACERCA DE ── */
.acerca-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:1.8rem 2rem;margin-bottom:1.5rem;position:relative;overflow:hidden;
  transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s}
.acerca-card:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(100,60,0,0.18);border-color:var(--vio3)}
.acerca-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--gold2), var(--vio4), var(--blu3))}
.acerca-tag{font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.14em;
  color:var(--gold3);margin-bottom:0.5rem;display:inline-block;
  padding:0.2rem 0.65rem;border:1px solid rgba(252,211,77,0.3);border-radius:14px;
  background:rgba(252,211,77,0.06)}
.acerca-title{font-family:'Cinzel',serif;color:var(--vio4);font-size:1.6rem;font-weight:700;
  margin:0.4rem 0 0.9rem;letter-spacing:0.02em;line-height:1.3}
.acerca-lead{color:var(--text);font-size:1.02rem;line-height:1.7;margin-bottom:1.2rem;font-style:italic}
.acerca-meta{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem 1.5rem;margin-top:0.5rem;
  padding:1rem 1.1rem;background:rgba(210,185,130,0.55);border-radius:6px;border:1px solid var(--border)}
.acerca-meta > div{display:flex;flex-direction:column}
.acerca-label{font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;margin-bottom:0.2rem}
.acerca-value{color:var(--text);font-size:0.92rem;line-height:1.45}
.acerca-card p{color:var(--text);line-height:1.7;margin-bottom:0.6rem}
.acerca-card p strong{color:var(--gold2)}
.acerca-features{list-style:none;padding:0;margin:1rem 0}
.acerca-features li{padding:0.45rem 0;border-bottom:1px dashed var(--border);color:var(--text);line-height:1.55;font-size:0.93rem}
.acerca-features li:last-child{border-bottom:none}
.acerca-features li strong{color:var(--vio4);font-weight:600}
@media (max-width:680px){.acerca-meta{grid-template-columns:1fr}.acerca-card{padding:1.3rem}}

/* ── TRÍADAS — Modal y clickables ── */
.rd-triada-clickable{cursor:pointer;padding:0.35rem 0.6rem;border-radius:4px;transition:background 0.2s;color:var(--text)}
.rd-triada-clickable:hover{background:rgba(42,90,58,0.18)}
.triadas-matches{background:linear-gradient(135deg,rgba(252,211,77,0.07),rgba(42,90,58,0.06));
  border:1px solid rgba(252,211,77,0.25);border-radius:8px;padding:1rem 1.1rem;margin-bottom:1rem}
.tm-label{font-family:'Cinzel',serif;font-size:0.82rem;color:var(--gold3);letter-spacing:0.06em;margin-bottom:0.65rem}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.55rem}
.tm-card{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:0.55rem 0.75rem;cursor:pointer;
  transition:all 0.2s;border-left:3px solid var(--tm-color)}
.tm-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(100,60,0,0.18);border-color:var(--tm-color)}
.tm-sig{font-family:'Cinzel',serif;font-weight:600;font-size:0.92rem;margin-bottom:0.15rem}
.tm-stats{font-size:0.72rem;color:var(--muted)}
.trd-overlay{position:fixed;inset:0;background:rgba(40,20,0,0.72);z-index:1000;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.2s;backdrop-filter:blur(6px);padding:1rem;overflow-y:auto}
.trd-overlay.open{opacity:1}
.trd-modal{background:var(--bg2);border:1px solid var(--trd-color);border-radius:10px;
  width:min(560px,92vw);max-width:560px;max-height:85vh;overflow-y:auto;
  padding:1.1rem 1.25rem;position:relative;box-shadow:0 0 60px var(--trd-color)44, 0 0 0 1px var(--trd-color)33}
.trd-close{position:absolute;top:0.4rem;right:0.55rem;background:none;border:none;color:var(--muted);
  font-size:1.35rem;cursor:pointer;width:30px;height:30px;border-radius:50%;transition:all 0.2s;line-height:1;display:flex;align-items:center;justify-content:center}
.trd-close:hover{background:rgba(42,90,58,0.2);color:#1C2E22}
.trd-head{margin-bottom:0.85rem;padding-right:2rem}
.trd-sig{font-family:'Cinzel',serif;font-size:1.15rem;letter-spacing:0.05em;font-weight:700;margin-bottom:0.15rem;line-height:1.25}
.trd-tono{font-size:0.78rem;color:var(--muted)}
.trd-section{margin-top:0.85rem}
.trd-section h4{font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.08em;color:var(--gold3);margin-bottom:0.35rem;border-bottom:1px solid var(--border);padding-bottom:0.2rem}
.trd-section ul{list-style:none;padding:0;margin:0}
.trd-section li{padding:0.32rem 0.5rem;border-radius:4px;margin-bottom:0.18rem;font-size:0.82rem;color:var(--text);line-height:1.45}
.trd-link{cursor:pointer;transition:background 0.18s;display:flex;align-items:center;gap:0.4rem;border:1px solid transparent}
.trd-link:hover{background:rgba(42,90,58,0.12);border-color:var(--vio3)}
.trd-link .dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.trd-empty{color:var(--muted);font-style:italic;font-size:0.8rem}
.trd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0.85rem;margin-top:0.85rem}
.trd-actions{display:flex;gap:0.5rem;margin-top:1rem;flex-wrap:wrap}
.trd-actions .sc-btn{flex:1;min-width:120px;font-size:0.8rem;padding:0.5rem 0.8rem}
@media (max-width:640px){
  .trd-modal{padding:0.9rem 1rem;max-height:88vh;width:min(560px,94vw)}
  .trd-cols{grid-template-columns:1fr;gap:0.7rem}
  .trd-sig{font-size:1.05rem}
  .trd-overlay{padding:0.5rem}
}

/* ── EMOCIONES (sana vs patológica) ── */
.emo-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;margin-bottom:1.25rem}
.emo-box{border-radius:6px;padding:0.7rem 1rem;border:1px solid}
.emo-sana{background:rgba(60,110,75,0.07);border-color:rgba(60,110,75,0.3)}
.emo-patho{background:rgba(100,70,60,0.06);border-color:rgba(100,70,60,0.3)}
.emo-title{font-size:0.7rem;font-family:'Cinzel',serif;letter-spacing:0.07em;margin-bottom:0.35rem;font-weight:600}
.emo-sana .emo-title{color:#4A7A58}
.emo-patho .emo-title{color:#8B1515}
.emo-text{font-size:0.87rem;color:var(--text);line-height:1.55}
@media (max-width:720px){.emo-grid{grid-template-columns:1fr}}

/* ── DODECAEDRO 3D (portada de 12 Órganos) ── */
.dodeca-wrap{position:relative;width:100%;max-width:780px;margin:1.5rem auto 2rem;
  height:520px;background:radial-gradient(ellipse at center, rgba(122,21,21,0.10) 0%, transparent 70%);
  border-radius:12px;overflow:hidden;cursor:grab;user-select:none}
.dodeca-wrap.grabbing{cursor:grabbing}
#dodeca-canvas-host{width:100%;height:100%;position:absolute;inset:0}
#dodeca-canvas-host canvas{display:block;width:100%!important;height:100%!important}
.dodeca-label{position:absolute;pointer-events:none;font-family:'Cinzel',serif;
  font-weight:700;color:#0a0a0a;background:rgba(255,255,255,0.92);
  padding:0.25rem 0.55rem;border-radius:4px;font-size:0.8rem;
  white-space:nowrap;transform:translate(-50%,-50%);
  box-shadow:0 2px 8px rgba(100,60,0,0.25), 0 0 12px currentColor;
  transition:opacity 0.2s, transform 0.2s;letter-spacing:0.03em;
  border:1px solid rgba(0,0,0,0.3)}
.dodeca-label .ln-note{font-size:1.05rem;display:block;line-height:1}
.dodeca-label .ln-org{font-size:0.62rem;font-family:'EB Garamond',serif;color:#333;letter-spacing:0.04em;text-transform:uppercase;font-weight:600}

.dodeca-controls{position:absolute;top:0.6rem;left:0.6rem;display:flex;gap:0.4rem;z-index:5}
.dodeca-controls button{background:rgba(210,185,130,0.85);color:var(--vio4);border:1px solid var(--border2);
  padding:0.35rem 0.65rem;border-radius:5px;cursor:pointer;font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.05em;
  transition:all 0.18s}
.dodeca-controls button:hover{background:var(--vio3);color:#fff}
.dodeca-controls button.active{background:var(--gold2);color:#0a0a0a;border-color:var(--gold3);font-weight:700}
.dodeca-legend{position:absolute;top:0.6rem;right:0.7rem;background:rgba(5,5,15,0.85);border:1px solid var(--border);
  border-radius:6px;padding:0.5rem 0.7rem;font-size:0.7rem;display:flex;flex-direction:column;gap:0.2rem;z-index:5;
  font-family:'Cinzel',serif;letter-spacing:0.04em;color:#E8DEC8;pointer-events:none}
.dodeca-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:0.4rem;vertical-align:middle}
.dodeca-hint{position:absolute;bottom:0.6rem;left:50%;transform:translateX(-50%);
  color:var(--muted);font-style:italic;font-size:0.8rem;letter-spacing:0.05em;
  background:transparent;padding:0.25rem 0.75rem;border-radius:14px;
  border:none;pointer-events:none}
@media (max-width: 720px){
  .dodeca-wrap{height:420px}
}

/* ── ESCALAS (vista escala-céntrica) ── */
.quintas-wrap{display:flex;justify-content:center;margin:0 auto 2rem;position:relative}
.quintas-svg{max-width:380px;width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(42,90,58,0.2))}
.quintas-svg .seg{cursor:pointer;transition:opacity 0.2s, transform 0.2s;transform-origin:190px 190px}
.quintas-svg .seg:hover{opacity:0.85;transform:scale(1.04)}
.quintas-svg .seg.active{filter:brightness(1.3) drop-shadow(0 0 12px currentColor)}
.quintas-svg text{font-family:'Cinzel',serif;font-weight:600;pointer-events:none;fill:#0a0a0a}
.scales-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.scale-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1.1rem 1.25rem;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;position:relative;overflow:hidden}
.scale-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sc-color)}
.scale-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(100,60,0,0.18);border-color:var(--sc-color)}
.scale-card.extra{background:linear-gradient(135deg,rgba(217,119,6,0.06),var(--bg2));border-color:rgba(252,211,77,0.25)}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.5rem}
.sc-name{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--sc-color);letter-spacing:0.04em;font-weight:700}
.sc-sub{font-size:0.78rem;color:var(--muted);font-style:italic}
.sc-notes{display:flex;gap:0.25rem;flex-wrap:wrap;margin:0.5rem 0 0.85rem}
.sc-note-pill{padding:0.18rem 0.5rem;border-radius:14px;font-family:'Cinzel',serif;font-size:0.78rem;font-weight:600;color:#0a0a0a}
.sc-section{margin-top:0.65rem}
.sc-label{font-size:0.72rem;color:var(--muted);font-family:'Cinzel',serif;letter-spacing:0.08em;margin-bottom:0.3rem}
.sc-tonif{color:var(--grn3)}
.sc-disp{color:var(--blu3)}
.sc-organs{display:flex;gap:0.3rem;flex-wrap:wrap}
.sc-organ-chip{padding:0.22rem 0.55rem;border-radius:4px;font-size:0.8rem;cursor:pointer;
  background:rgba(210,185,130,0.70);border:1px solid var(--border);transition:all 0.18s;display:inline-flex;align-items:center;gap:0.3rem}
.sc-organ-chip:hover{transform:translateY(-1px);filter:brightness(1.3)}
.sc-organ-chip .dot{width:8px;height:8px;border-radius:50%}
.sc-actions{display:flex;gap:0.5rem;margin-top:0.85rem}
.sc-btn{flex:1;padding:0.5rem 0.75rem;border-radius:5px;border:1px solid var(--border2);cursor:pointer;
  font-family:'Cinzel',serif;font-size:0.78rem;letter-spacing:0.05em;background:rgba(42,90,58,0.1);
  color:var(--vio4);transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:0.4rem}
.sc-btn:hover{background:var(--sc-color);color:#0a0a0a;border-color:var(--sc-color);font-weight:600}
.sc-btn.playing{background:var(--gold2);color:#0a0a0a;border-color:var(--gold3)}
.sc-extra-text{font-size:0.88rem;line-height:1.65;color:var(--text);margin-top:0.4rem}
.sc-extra-text strong{color:var(--gold3)}

/* ── ÓRGANOS ── */
.organ-tabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem}
.otab{background:rgba(210,185,130,0.82);border:1px solid var(--border);border-radius:4px;
  padding:0.4rem 0.75rem;cursor:pointer;font-family:'EB Garamond',serif;
  font-size:0.9rem;color:var(--muted);transition:all 0.2s}
.otab:hover{background:rgba(42,90,58,0.15);color:#1C2E22}
.otab.active{background:color-mix(in srgb, var(--org-color, var(--vio2)) 28%, transparent);border-color:var(--org-color, var(--vio3));color:var(--dark);font-weight:600;box-shadow:0 0 16px color-mix(in srgb, var(--org-color, var(--vio3)) 40%, transparent)}
.organ-content{display:none}
.organ-content.active{display:block}
.organ-header{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.organ-icon-box{width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,var(--vio),var(--blu));
  display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0;
  box-shadow:0 0 20px var(--shadow)}
.organ-title{font-family:'Cinzel',serif;font-size:1.5rem;color:var(--vio4);margin-bottom:0.25rem}
.organ-note{font-size:0.9rem;color:var(--muted)}
.organ-note strong{color:var(--gold2);font-size:1.1rem}

.modulo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
@media(max-width:580px){.modulo-grid{grid-template-columns:1fr}}
.modulo-box{border-radius:6px;padding:1rem;transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s}
.modulo-box[onclick]:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(100,60,0,0.18)}
.nota-clickable{cursor:pointer;transition:opacity 0.15s,text-shadow 0.15s}
.nota-clickable:hover{opacity:0.8;text-shadow:0 0 12px currentColor}
.play-scale-inline{background:none;border:1px solid currentColor;border-radius:3px;cursor:pointer;font-size:0.68rem;padding:0.08rem 0.35rem;opacity:0.65;transition:opacity 0.18s,background 0.18s;color:inherit;margin-right:0.3rem;vertical-align:middle}
.play-scale-inline:hover{opacity:1;background:rgba(255,255,255,0.1)}
.modulo-box.tonificar{background:rgba(255,162,58,0.12);border:1px solid rgba(255,162,58,0.4)}
.modulo-box.tonificar[onclick]:hover{border-color:rgba(255,162,58,0.8)}
.modulo-box.dispersar{background:rgba(135,206,235,0.15);border:1px solid rgba(135,206,235,0.5)}
.modulo-box.dispersar[onclick]:hover{border-color:rgba(135,206,235,0.9)}
.rc-mod-clickable{cursor:pointer;transition:all 0.2s}
.rc-mod-clickable[title*="tonificar"]{background:rgba(255,140,0,0.22);border-color:rgba(255,140,0,0.55);color:#1a1a1a}
.rc-mod-clickable[title*="dispersar"]{background:rgba(100,180,230,0.25);border-color:rgba(100,180,230,0.55);color:#1a1a1a}
.rc-mod-clickable:hover{background:rgba(42,90,58,0.35)!important;color:#1C2E22!important;transform:translateY(-1px)}
/* Escalas del Buscador sin link → coloreadas por tipo */
#searchResults .rc-modulos .escala-tonificar{background:rgba(255,140,0,0.22);border:1px solid rgba(255,140,0,0.55);color:#1a1a1a}
#searchResults .rc-modulos .escala-tonificar:hover{background:rgba(255,140,0,0.45)!important;color:#1C2E22!important;transform:translateY(-1px)}
#searchResults .rc-modulos .escala-dispersar{background:rgba(100,180,230,0.25);border:1px solid rgba(100,180,230,0.55);color:#1a1a1a}
#searchResults .rc-modulos .escala-dispersar:hover{background:rgba(100,180,230,0.5)!important;color:#1C2E22!important;transform:translateY(-1px)}
#searchResults .rc-modulos .escala-extraord{background:rgba(60,180,80,0.22);border:1px solid rgba(60,180,80,0.55);color:#1a1a1a}
#searchResults .rc-modulos .escala-extraord:hover{background:rgba(60,180,80,0.5)!important;color:#1C2E22!important;transform:translateY(-1px)}
.rd-mod-clickable{cursor:pointer;padding:0.35rem 0.6rem;border-radius:4px;transition:background 0.2s}
.rd-mod-clickable:hover{background:rgba(42,90,58,0.18)}
.mb-title{font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.1em;margin-bottom:0.5rem}
.modulo-box.tonificar .mb-title{color:#FFA23A}
.modulo-box.dispersar .mb-title{color:#87CEEB}
.mb-escala{font-size:1rem;color:var(--text);margin-bottom:0.4rem;font-weight:500}
.mb-puntos{font-size:0.85rem;color:var(--muted);line-height:1.6}
.punto-tag{display:inline-block;background:rgba(30,27,75,0.6);border:1px solid var(--border2);
  border-radius:3px;padding:0.1rem 0.4rem;margin:0.1rem;font-size:0.8rem;color:var(--vio4)}

/* ── BUSCADOR ── */
.search-box{position:relative;margin-bottom:1.5rem}
.search-input{width:100%;padding:0.9rem 3rem 0.9rem 1.25rem;border:1px solid var(--border2);
  border-radius:6px;background:var(--bg2);font-family:'EB Garamond',serif;font-size:1.05rem;
  color:var(--text);outline:none;transition:border 0.2s}
.search-input:focus{border-color:var(--vio3);box-shadow:0 0 0 3px rgba(42,90,58,0.15)}
.search-input::placeholder{color:var(--light)}
.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  color:var(--vio3);font-size:1.2rem}
.search-hint{font-size:0.85rem;color:var(--muted);margin-bottom:1rem;font-style:italic}
.result-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.2rem 1.5rem;margin-bottom:0.75rem;cursor:pointer;transition:all 0.2s}
.result-card:hover{border-color:var(--vio3);box-shadow:0 4px 20px var(--shadow)}
.rc-name{font-family:'Cinzel',serif;font-size:1rem;color:var(--vio4);margin-bottom:0.4rem}
.rc-tag{display:inline-block;font-size:0.72rem;padding:0.15rem 0.5rem;border-radius:10px;
  margin:0.1rem;font-family:'Cinzel',serif;letter-spacing:0.03em}
.rc-tag.general{background:rgba(42,90,58,0.15);color:var(--vio4);border:1px solid rgba(42,90,58,0.3)}
.rc-tag.onco{background:rgba(90,90,80,0.15);color:var(--grn3);border:1px solid rgba(90,90,80,0.3)}
.rc-tag.neuro{background:rgba(80,80,90,0.15);color:var(--blu3);border:1px solid rgba(80,80,90,0.3)}
.rc-sindromes{font-size:0.88rem;color:var(--muted);margin-top:0.4rem;line-height:1.6}
.rc-modulos{margin-top:0.5rem}
.rc-modulos span{display:inline-block;background:rgba(30,27,75,0.5);border:1px solid var(--border2);
  font-size:0.78rem;padding:0.15rem 0.5rem;border-radius:3px;margin:0.1rem;color:var(--text)}

.result-detail{background:var(--bg3);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-bottom:1rem;display:none;box-shadow:0 4px 30px var(--shadow)}
.result-detail.open{display:block}
.rd-section{margin-bottom:1rem}
.rd-section h4{font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.1em;
  color:var(--gold2);margin-bottom:0.4rem;border-bottom:1px solid var(--border);padding-bottom:0.2rem}
.rd-section p{font-size:0.9rem;color:var(--text);line-height:1.7}

.no-results{text-align:center;padding:3rem;color:var(--muted);font-style:italic}

/* ── ORÁCULO ── */
.oracle-tabs{display:flex;gap:0.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
.oracle-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;
  padding:0.75rem 1.5rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.9rem;
  color:var(--muted);letter-spacing:0.05em;transition:all 0.2s}
.oracle-tab:hover{color:var(--vio4)}
.oracle-tab.active{color:var(--vio4);border-bottom-color:var(--vio3)}
.oracle-panel{display:none}
.oracle-panel.active{display:block}

/* Oracle Al Azar */
.coin-area{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.5rem;text-align:center;margin-bottom:1rem;
  box-shadow:inset 0 0 40px rgba(26,61,40,0.07)}
.hexagram-display{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;
  margin:1.5rem 0;min-height:130px}
.hex-line{display:flex;justify-content:center;align-items:center;gap:6px;position:relative}
.hex-line-label{{
  position:absolute;
  left:-8rem;
  width:7rem;
  text-align:right;
}font-size:0.72rem;color:var(--muted);
  font-family:'Cinzel',serif;letter-spacing:0.02em;white-space:nowrap}
.hex-line-num{position:absolute;right:-2rem;font-size:0.72rem;color:var(--muted)}
.yang-line{width:120px;height:8px;
  background:linear-gradient(90deg,var(--vio3),var(--blu3));
  border-radius:4px;box-shadow:0 0 8px rgba(50,100,65,0.5)}
.yin-line-left,.yin-line-right{width:50px;height:8px;
  background:linear-gradient(90deg,var(--grn2),var(--grn3));
  border-radius:4px;box-shadow:0 0 8px rgba(90,90,80,0.4)}
.yin-gap{width:20px}
.trigram-divider{width:140px;height:1px;background:var(--border2);margin:4px 0;opacity:0.6}

.step-indicator{display:flex;gap:0.4rem;justify-content:center;margin-bottom:1rem}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.step-dot.done{background:var(--vio3)}
.step-dot.current{background:var(--gold2);box-shadow:0 0 0 3px rgba(217,119,6,0.3)}

.throw-btn{background:linear-gradient(135deg,var(--vio2),var(--blu2));color:#fff;border:none;
  padding:0.75rem 2rem;font-family:'Cinzel',serif;font-size:0.95rem;letter-spacing:0.05em;
  cursor:pointer;border-radius:6px;transition:all 0.2s;
  box-shadow:0 4px 15px var(--shadow)}
.throw-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--shadow)}
.throw-btn:disabled{opacity:0.3;cursor:default;transform:none}
.btn-gold{background:none;border:1px solid var(--gold2);color:var(--gold2)}
.btn-gold:hover{background:rgba(217,119,6,0.15);border-color:var(--gold3)}

.oracle-result{background:var(--bg2);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-top:1rem;display:none;box-shadow:0 0 40px rgba(26,61,40,0.15)}
.oracle-result.visible{display:block}
.or-title{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--vio4);margin-bottom:1rem;text-align:center}
.chord-cell.playing{transform:scale(1.08);box-shadow:0 0 0 2px var(--vio3),0 0 18px var(--vio3);z-index:2;position:relative}
.play-progression-btn{display:inline-flex;align-items:center;gap:0.5rem;margin:0.6rem auto 0;padding:0.5rem 1.4rem;background:linear-gradient(135deg,var(--vio),var(--vio2));border:none;border-radius:5px;color:#fff;font-family:'Cinzel',serif;font-size:0.82rem;letter-spacing:0.06em;cursor:pointer;transition:opacity 0.2s,transform 0.15s}
.play-progression-btn:hover{opacity:0.9;transform:scale(1.02)}
.play-progression-btn:disabled{opacity:0.5;cursor:default;transform:none}
.progression-display{text-align:center;font-size:1.3rem;color:var(--text);
  font-family:'EB Garamond',Georgia,serif;letter-spacing:0.05em;margin:1rem 0;
  background:var(--bg3);padding:1rem;border-radius:6px;border:1px solid var(--border2);
  box-shadow:inset 0 0 20px rgba(26,61,40,0.1)}
.chord-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0.5rem;margin:1rem 0}
.chord-cell{text-align:center;padding:0.6rem 0.2rem;border-radius:4px;font-size:0.85rem}
.chord-yang{background:rgba(42,90,58,0.12);border:1px solid rgba(50,100,65,0.3)}
.chord-yin{background:rgba(90,90,80,0.10);border:1px solid rgba(110,110,100,0.25)}
.chord-name{font-weight:600;color:var(--text);font-family:'EB Garamond',Georgia,serif;font-size:1rem}
.chord-func{font-size:0.7rem;color:var(--muted);margin-top:0.2rem}

/* Oracle Momento Vital */
.mv-form{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:1.5rem;margin-bottom:1rem}
.mv-form h3{font-family:'Cinzel',serif;color:var(--vio4);margin-bottom:1rem;font-size:1rem;letter-spacing:0.05em}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1rem}
.form-group label{display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.3rem;
  font-family:'Cinzel',serif;letter-spacing:0.05em}
.form-group input,.form-group select{width:100%;padding:0.6rem 0.75rem;border:1px solid var(--border);
  border-radius:4px;background:var(--bg3);font-family:'EB Garamond',serif;
  font-size:1rem;color:var(--text);outline:none;
  -webkit-appearance:none;appearance:none}
.form-group input:focus,.form-group select:focus{border-color:var(--vio3);
  box-shadow:0 0 0 2px rgba(42,90,58,0.2)}
.form-group select option{background:var(--bg3);color:var(--text)}

.pillar-select{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;margin-top:0.75rem}
.pillar-btn{background:var(--bg3);border:1px solid var(--border);border-radius:4px;
  padding:0.5rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.75rem;
  letter-spacing:0.03em;color:var(--muted);transition:all 0.2s;text-align:center}
.pillar-btn:hover,.pillar-btn.active{background:var(--vio2);border-color:var(--vio3);color:#fff}

.mv-result{background:var(--bg2);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-top:1rem;display:none;box-shadow:0 0 40px rgba(26,61,40,0.12)}
.mv-result.visible{display:block}

/* ── LIBRO ── */
.tomo-header{background:linear-gradient(135deg,var(--vio),var(--blu));color:#fff;
  padding:1rem 1.5rem;border-radius:6px 6px 0 0;margin-top:1.5rem}
.tomo-header h2{font-family:'Cinzel',serif;font-size:1rem;letter-spacing:0.08em}
.tomo-header p{font-size:0.85rem;opacity:0.8;margin-top:0.2rem}
.chapter-list{background:var(--bg2);border:1px solid var(--border);border-top:none;border-radius:0 0 6px 6px}
.chapter-item{padding:0.75rem 1.5rem;border-bottom:1px solid rgba(55,48,163,0.2);
  display:flex;align-items:baseline;gap:1rem}
.chapter-item:last-child{border-bottom:none}
.ch-num{font-family:'Cinzel',serif;font-size:0.75rem;color:var(--vio3);letter-spacing:0.08em;min-width:70px}
.ch-title{font-size:0.95rem;color:var(--text)}

/* ── 5 ELEMENTOS — COLORES SEMÁNTICOS ── */
.elem-madera{color:var(--madera)!important}
.elem-fuego{color:var(--fuego)!important}
.elem-tierra{color:var(--tierra)!important}
.elem-metal{color:var(--metal)!important}
.elem-agua{color:var(--agua)!important}
.bg-madera{background:rgba(22,163,74,0.12)!important;border-color:rgba(110,110,100,0.3)!important}
.bg-fuego{background:rgba(100,70,60,0.12)!important;border-color:rgba(100,70,60,0.3)!important}
.bg-tierra{background:rgba(217,119,6,0.12)!important;border-color:rgba(252,211,77,0.3)!important}
.bg-metal{background:rgba(148,163,184,0.10)!important;border-color:rgba(148,163,184,0.25)!important}
.bg-agua{background:rgba(80,80,90,0.12)!important;border-color:rgba(100,100,110,0.3)!important}

/* ── LECTOR ── */
#chapterContent h1,#chapterContent h2{font-family:'Cinzel',serif;color:var(--vio4);margin:1.5rem 0 0.75rem}
#chapterContent p:hover,#chapterContent h1:hover,#chapterContent h2:hover,#chapterContent h3:hover{background:rgba(42,90,58,0.07);border-radius:3px;cursor:pointer}
.tts-jump-flash{animation:ttsJumpFlash 0.6s ease-out}
@keyframes ttsJumpFlash{0%{background:rgba(42,90,58,0.35)}100%{background:transparent}}
/* ── TTS ACTIVE READING HIGHLIGHT ── */
.tts-reading{
  background:rgba(42,90,58,0.13)!important;
  border-left:3px solid var(--vio3)!important;
  padding-left:0.6rem!important;
  border-radius:4px!important;
  transition:background 0.25s,border-color 0.25s;
  scroll-margin-top:80px;
  scroll-margin-bottom:120px;
}
.tts-reading-fade{
  background:rgba(42,90,58,0.04)!important;
  border-left:3px solid rgba(50,100,65,0.2)!important;
  padding-left:0.6rem!important;
  border-radius:4px!important;
  transition:background 0.8s,border-color 0.8s;
}
#chapterContent h3{font-family:'Cinzel',serif;color:var(--blu3);margin:1.25rem 0 0.6rem;font-size:1.05rem}
#chapterContent h4{font-family:'Cinzel',serif;color:var(--grn3);margin:1rem 0 0.5rem;font-size:0.95rem}
#chapterContent p{margin-bottom:0.9rem;line-height:1.9}
#chapterContent strong{color:var(--vio4);font-weight:600}
#chapterContent em{color:var(--gold2)}
#chapterContent blockquote,#chapterContent [style*="border-left"]{
  border-left-color:var(--gold2)!important;color:var(--muted)!important}
#chapterContent table thead tr{background:linear-gradient(90deg,var(--vio),var(--blu))!important;color:#fff}
#chapterContent table tbody tr:nth-child(even){background:rgba(30,27,75,0.25)!important}
#chapterContent table{border-collapse:collapse}
#chapterContent td,#chapterContent th{border-color:var(--border)!important}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .hero-title{font-size:1.7rem}
  .nav-brand{display:none}
  .nav-inner{padding:0.3rem 0.25rem;justify-content:center}
  .nav-btn{font-size:0.65rem;padding:0.25rem 0.35rem}
  .nav-links{justify-content:center}
  .corr-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .chord-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── ANIMACIONES ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.section.active{animation:fadeIn 0.35s ease}
@keyframes coinFlip{0%{transform:rotateY(0)}50%{transform:rotateY(360deg)}100%{transform:rotateY(0)}}
.spinning{animation:coinFlip 0.4s ease}
@keyframes glow{0%,100%{box-shadow:0 0 10px var(--shadow)}50%{box-shadow:0 0 25px var(--shadow),0 0 50px rgba(50,100,65,0.2)}}
.oracle-result.visible{animation:glow 3s ease-in-out infinite}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--vio2)}

/* Highlight buscador */
mark{background:rgba(42,90,58,0.3);color:var(--vio4);border-radius:2px;padding:0 2px}

/* ── TRÍADAS INDEX MENU ── */
.triadas-index-panel{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1rem 1.2rem;margin-bottom:2rem}
.triadas-index-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:0}
.triadas-index-title{font-family:'Cinzel',serif;font-size:0.82rem;letter-spacing:0.1em;color:var(--gold2);display:flex;align-items:center;gap:0.5rem}
.triadas-index-toggle{color:var(--muted);font-size:0.8rem;transition:transform 0.2s;margin-left:0.5rem}
.triadas-index-body{margin-top:0.85rem}
.triadas-group{margin-bottom:0.9rem}
.triadas-group:last-child{margin-bottom:0}
.triadas-group-label{font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.1em;color:var(--muted);margin-bottom:0.35rem;text-transform:uppercase}
.triadas-chips{display:flex;flex-wrap:wrap;gap:0.35rem}
.triada-chip{display:inline-flex;align-items:center;gap:0.3rem;padding:0.28rem 0.7rem;border-radius:5px;font-size:0.78rem;font-family:'Cinzel',serif;cursor:pointer;border:1px solid transparent;transition:all 0.18s;white-space:nowrap;background:none}
.triada-chip:hover{transform:scale(1.05);box-shadow:0 2px 12px var(--chip-glow,rgba(42,90,58,0.35))}
.triada-chip .chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.triada-chip .chip-stats{font-size:0.62rem;opacity:0.55;margin-left:0.2rem}
/* ── TTS BAR ── */
.tts-bar{position:sticky;top:57px;z-index:50;display:flex;align-items:center;gap:0.6rem;
  flex-wrap:wrap;padding:0.6rem 1rem;background:var(--bg2);
  border-bottom:1px solid var(--border);margin-bottom:0}
.tts-title{font-family:'Cinzel',serif;font-size:0.72rem;color:var(--muted);
  letter-spacing:0.04em;flex:1;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tts-btn{background:none;border:1px solid var(--border);border-radius:4px;
  padding:0.3rem 0.75rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.78rem;
  color:var(--text);transition:all 0.18s;white-space:nowrap}
.tts-btn:hover{border-color:var(--vio3);color:var(--vio4)}
.tts-btn.playing{background:var(--vio);border-color:var(--vio3);color:#fff}
.tts-progress{flex:1;min-width:60px;max-width:180px;height:4px;
  background:var(--bg3);border-radius:2px;overflow:hidden}
.tts-bar-fill{height:100%;background:var(--vio3);width:0%;
  transition:width 0.4s;border-radius:2px}
.tts-speed{font-size:0.72rem;color:var(--muted);border:1px solid var(--border);
  border-radius:4px;padding:0.25rem 0.4rem;background:var(--bg3);cursor:pointer}
.tts-speed:hover{border-color:var(--vio3)}
/* ── TABLES EN LIBRO ── */
.libro-table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:0.88rem;
  display:block;overflow-x:auto}
.libro-table thead th{background:#5C21B6;color:#fff!important;padding:0.5rem 0.75rem;
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.04em;
  text-align:left;white-space:nowrap}
.libro-table thead th strong,.libro-table thead th em{color:#fff!important}
.libro-table td{padding:0.4rem 0.75rem;
  border-bottom:1px solid rgba(92,33,182,0.15);vertical-align:top;line-height:1.55}
.libro-table tr:nth-child(even) td{background:rgba(92,33,182,0.06)}
.libro-table tr:hover td{background:rgba(92,33,182,0.12)}
/* ── CHAPTER READING ── */
#chapterContent h1,#chapterContent h2,#chapterContent h3{font-family:'Cinzel',serif}
#chapterContent h1{font-size:1.4rem;color:var(--vio4);margin:1.5rem 0 0.75rem;line-height:1.3}
#chapterContent h2{font-size:1.1rem;color:var(--vio3);margin:1.25rem 0 0.5rem;
  border-bottom:1px solid rgba(92,33,182,0.25);padding-bottom:0.25rem}
#chapterContent h3{font-size:0.95rem;color:var(--gold2);margin:1rem 0 0.4rem}
#chapterContent p{line-height:1.9;margin-bottom:0.9rem;font-size:1rem}
#chapterContent blockquote{border-left:3px solid var(--vio3);
  padding:0.5rem 0 0.5rem 1.25rem;margin:1rem 0;color:var(--muted);
  font-style:italic;background:rgba(92,33,182,0.07);border-radius:0 4px 4px 0}
#chapterContent ul{margin:0.5rem 0 0.9rem 1rem;list-style:none}
#chapterContent li{padding:0.2rem 0 0.2rem 1.25rem;position:relative;line-height:1.7}
#chapterContent li::before{content:'◆';position:absolute;left:0;
  color:var(--vio3);font-size:0.65rem;top:0.45rem}


/* ── I CHING — 64 HEXAGRAMAS ── */
.hex-grid-64{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:0.7rem;margin:1.5rem 0}
.hex64-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:0.9rem 0.75rem;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.hex64-card:hover{border-color:var(--gold2);transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,119,6,0.2)}
.hex64-num{font-family:'Cinzel',serif;font-size:0.65rem;color:var(--muted);letter-spacing:0.08em;margin-bottom:0.3rem}
.hex64-lines{display:flex;flex-direction:column;gap:4px;margin:0.4rem 0;align-items:flex-start}
.hex64-yang{width:44px;height:5px;background:linear-gradient(90deg,var(--vio3),var(--blu3));border-radius:2px}
.hex64-yin-l,.hex64-yin-r{width:18px;height:5px;background:linear-gradient(90deg,var(--grn2),var(--grn3));border-radius:2px}
.hex64-name{font-family:'Cinzel',serif;font-size:0.78rem;color:var(--vio4);margin-bottom:0.1rem;letter-spacing:0.03em}
.hex64-sub{font-size:0.67rem;color:var(--muted);font-style:italic;margin-bottom:0.1rem;letter-spacing:0.01em;line-height:1.3}
.hex64-cn{font-size:0.85rem;color:var(--gold2)}
.hex64-pin{font-size:0.7rem;color:var(--muted);font-style:italic}
.hex64-kw{font-size:0.68rem;color:var(--light);margin-top:0.3rem;line-height:1.4}
.hex-modal-overlay{position:fixed;inset:0;background:rgba(40,20,0,0.75);z-index:2000;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity 0.2s;backdrop-filter:blur(8px);padding:1rem}
.hex-modal-overlay.open{opacity:1}
.hex-modal{background:var(--bg2);border:1px solid var(--gold2);border-radius:10px;
  max-width:620px;width:100%;padding:1.8rem 2rem;position:relative;
  box-shadow:0 0 60px rgba(217,119,6,0.25);max-height:90vh;overflow-y:auto}
.hm-close{position:absolute;top:0.5rem;right:0.8rem;background:none;border:none;
  color:var(--muted);font-size:1.6rem;cursor:pointer;width:36px;height:36px;
  border-radius:50%;transition:all 0.2s}
.hm-close:hover{background:rgba(217,119,6,0.2);color:#1C2E22}
.hm-header{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.2rem}
.hm-lines-big{display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.hm-yang{width:80px;height:10px;background:linear-gradient(90deg,var(--vio3),var(--blu3));border-radius:4px;
  box-shadow:0 0 8px rgba(50,100,65,0.5)}
.hm-yin-l,.hm-yin-r{width:33px;height:10px;background:linear-gradient(90deg,var(--grn2),var(--grn3));border-radius:4px}
.hm-divider-line{width:80px;height:1px;background:var(--border2);opacity:0.6;margin:2px 0}
.hm-meta{flex:1}
.hm-num{font-family:'Cinzel',serif;font-size:0.72rem;color:var(--muted);letter-spacing:0.1em;margin-bottom:0.2rem}
.hm-title{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold3);letter-spacing:0.04em;line-height:1.2}
.hm-cn{font-size:1.6rem;color:var(--gold2)}
.hm-pin{font-style:italic;color:var(--muted);font-size:0.9rem;margin-top:0.2rem}
.hm-sub{font-style:italic;color:var(--muted);font-size:0.88rem;margin-top:0.15rem;letter-spacing:0.01em}
.hm-trigs{font-size:0.82rem;color:var(--light);margin-top:0.3rem}
.hm-section{margin-top:1rem}
.hm-section h4{font-family:'Cinzel',serif;font-size:0.75rem;letter-spacing:0.1em;
  color:var(--gold3);margin-bottom:0.4rem;border-bottom:1px solid var(--border);padding-bottom:0.2rem}
.hm-section p{font-size:0.9rem;color:var(--text);line-height:1.75}
.hm-section p strong em,.hm-section p em strong{display:block;color:var(--gold3);font-style:italic;font-weight:600;
  margin-bottom:0.6rem;line-height:1.6;letter-spacing:0.01em}
.hm-kw-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.6rem}
.hm-kw{padding:0.2rem 0.55rem;border-radius:12px;font-size:0.72rem;font-family:'Cinzel',serif;
  background:rgba(217,119,6,0.1);border:1px solid rgba(217,119,6,0.3);color:var(--gold3);letter-spacing:0.04em}
.hex-filter-bar{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.25rem;align-items:center}
.hex-filter-btn{background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  padding:0.3rem 0.75rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.75rem;
  color:var(--muted);letter-spacing:0.04em;transition:all 0.18s}
.hex-filter-btn:hover,.hex-filter-btn.active{background:rgba(217,119,6,0.12);border-color:var(--gold2);color:var(--gold3)}
.hex-search-input{flex:1;min-width:160px;padding:0.45rem 0.85rem;border:1px solid var(--border2);
  border-radius:4px;background:var(--bg3);font-size:0.95rem;
  color:var(--text);outline:none;transition:border 0.2s}
.hex-search-input:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(217,119,6,0.15)}
.sc-note-pill{cursor:pointer;transition:all 0.15s}
.sc-note-pill:hover{transform:scale(1.15) translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.5);opacity:0.85}
.sc-note-pill:active{transform:scale(0.95)}
.chord-cell{cursor:pointer;transition:all 0.2s;user-select:none}
.chord-cell:hover{transform:scale(1.07);box-shadow:0 4px 20px rgba(50,100,65,0.4);z-index:2;position:relative}
.chord-cell:active{transform:scale(0.97)}


/* ─── Tríadas Clínicas section ─── */
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;padding:0.5rem 0}
.td-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow 0.2s}
.td-card:hover{box-shadow:0 4px 24px color-mix(in srgb,var(--td-color) 30%,transparent)}
.td-card-header{display:flex;align-items:center;gap:0.6rem;padding:0.75rem 1rem;background:var(--td-color);cursor:pointer;user-select:none;border-bottom:1px solid color-mix(in srgb,var(--td-color) 25%,transparent);transition:background 0.18s}
.td-card-header:hover{background:color-mix(in srgb,var(--td-color) 85%,#000)}
.td-card-emoji{font-size:1.15rem}
.td-card-nota{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;letter-spacing:0.06em;flex:1}
.td-card-play{font-size:0.82rem;opacity:0.8;transition:opacity 0.18s}
.td-card-header:hover .td-card-play{opacity:1}
.td-card-body{padding:0.5rem 0}
.td-row{display:flex;align-items:center;gap:0.55rem;padding:0.4rem 1rem;cursor:pointer;transition:background 0.15s;border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent)}
.td-row:last-child{border-bottom:none}
.td-row:hover,.td-row-hover{background:color-mix(in srgb,var(--td-color) 9%,transparent)}
.td-num{font-family:'Cinzel',serif;font-size:0.72rem;font-weight:700;color:var(--td-color);min-width:1.2rem;opacity:0.85}
.td-desc{flex:1;font-size:0.84rem;color:var(--text);line-height:1.35}
.td-arrow{font-size:0.72rem;color:var(--td-color);opacity:0.6}
/* ── FIX TIPOGRÁFICO: Cinzel es versalitas → Bb se ve BB, Eb se ve EB, etc.
   En modo inglés, los elementos que muestran notas musicales usan EB Garamond
   que sí distingue mayúsculas de minúsculas. ── */
:lang(en) .corr-note,
:lang(en) .trd-sig,
:lang(en) .tm-sig,
:lang(en) .dodeca-label .ln-note,
:lang(en) .organ-title,
:lang(en) .nota-clickable,
:lang(en) .quintas-svg text,
:lang(en) .td-num {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   v3 — PULIDO EDITORIAL (cambios conservadores, sin rediseño)
   ───────────────────────────────────────────────────────────── */

/* Cuerpo de lectura: contraste/temperatura más de "tratado académico" */
p,.description,.article,.body-copy{color:var(--reading-text)}
/* Excepciones: elementos que mantienen su color propio */
.nav-inner p,.nav-brand,.btn p,.badge p,
.hex-modal p,.oracle-result p,.fc-card p,
.emo-text,.emo-title,
.cn,.cn2,.fc-desc,.page-subtitle{color:inherit}

/* Texto secundario un poco más visible (sin perder jerarquía) */
.page-subtitle,.fc-desc{color:var(--muted)}

/* Rojo editorial — pequeños encabezados ("MAIN FUNCTION", "DESCRIPTION", etc.) */
.editorial-sub,
.organ-content > div > p:first-child[style*="Cinzel"],
.organ-content > div > p[style*="Cinzel"][style*="0.85rem"],
.organ-content > div > p[style*="Cinzel"][style*="0.8rem"]{
  color:var(--editorial-red) !important;
}
.ornament span{color:var(--editorial-red)}
.fc-title{color:var(--editorial-red)}
.feature-card:hover .fc-title{color:var(--vio)}

/* Modal I Ching — contraste corregido (punto más débil de la UI) */
.hex-modal{
  background:var(--oracle-card) !important;
  color:var(--oracle-text);
  border-color:var(--gold2) !important;
}
.hex-modal *:not(button):not(input):not(select):not(textarea){color:var(--oracle-text)}
.hex-modal h1,.hex-modal h2,.hex-modal h3,.hex-modal h4{color:#3A1A0A}
.hex-modal .punto-tag{color:var(--oracle-text) !important}

/* Paneles clínicos — sage/marfil editorial en vez de "Bootstrap" */
.emo-sana{
  background:var(--clinical-green) !important;
  border-color:var(--clinical-green-border) !important;
}
.emo-sana .emo-title{color:#3F5A2A !important}
.emo-sana .emo-text{color:#2E3A1E}
.emo-patho{
  background:var(--clinical-red-bg) !important;
  border-color:var(--clinical-red-border) !important;
}
.emo-patho .emo-title{color:var(--editorial-red) !important}
.emo-patho .emo-text{color:#3A1A12}

/* Botones, badges y tags — coherencia tipográfica editorial */
.badge{font-family:'Cinzel',serif;letter-spacing:0.04em}
.punto-tag{
  background:rgba(212,190,145,0.45) !important;
  color:var(--reading-text) !important;
  border-color:var(--gold2) !important;
}
.btn-gold{color:var(--gold) !important;border-color:var(--gold) !important}
.btn-gold:hover{background:rgba(154,104,0,0.12) !important;color:var(--gold) !important}

/* Tarjetas "acerca / scale" — alinear texto interno al cuerpo de lectura */
.acerca-card p,.acerca-features li,.scale-card p{color:var(--reading-text)}
.acerca-features li strong{color:var(--editorial-red)}

/* ===== from style_main.css ===== */

:root{
  /* ── WARM IVORY & DEEP GRAPHITE SYSTEM ── */
  
  /* ── FONDOS IVORY (transparentes para dejar ver la textura) ── */
  --bg:transparent;
  --bg2:rgba(242,234,215,0.55);
  --bg3:rgba(235,225,200,0.68);
  --bg-nav:rgba(26,61,40,0.95);
  --bg-card:rgba(250,245,235,0.80);
  --bg-modal:rgba(252,248,240,0.97);

  /* ── IVORY BASE ("marfil cálido puro") ── */
  --background:#FAF6EC;          /* HSL 42 67% 95% */

  /* ── VERDE BOSQUE PROFUNDO (jade / paleta portada) ── */
  --vio:#2A5A3A;--vio2:#356A45;--vio3:#1A3D28;--vio4:#0F2A1A;

  /* ── VERDE JADE MEDIO ── */
  --blu:#4A7A58;--blu2:#5A8A68;--blu3:#2E4A38;

  /* ── VERDE SUAVE / ACENTO ── */
  --grn:#6A9A78;--grn2:#7AAA88;--grn3:#3A6A48;

  /* ── GOLD ACCENT (dorado académico bruno) ── */
  --gold:#8A734B;--gold2:#A89364;--gold3:#6B5A3A;

  /* ── TINTA VERDE OSCURA (texto) ── */
  --dark:#1A3D28;--text:#1C2E22;--muted:#4A7A58;--light:#6A9A78;

  /* ── TEXTO DE LECTURA (verde bosque profundo) ── */
  --reading-text:#1A3D28;        /* verde bosque profundo */

  /* ── MODAL I CHING ── */
  --oracle-card:#E8E4D6;         /* HSL 42 24% 88% */
  --oracle-text:#0F2A1A;         /* verde muy oscuro */

  /* ── PANELES CLÍNICOS ── */
  --clinical-green:#EDF4EF;      /* verde muy claro */
  --clinical-blue:#EDEBE4;       /* HSL 40 15% 91% */
  --clinical-green-border:rgba(42,90,58,0.42);
  --clinical-red-bg:#F0E8E0;     /* compañero editorial */
  --clinical-red-border:rgba(138,115,75,0.32);

  /* ── BORDES (verde jade sutil) ── */
  --border:rgba(42,90,58,0.18);--border2:rgba(26,61,40,0.32);

  /* ── SOMBRA (verde bosque) ── */
  --shadow:rgba(26,61,40,0.15);

  /* ── 5 ELEMENTOS ── */
  --madera:#3D6A3D;--fuego:#6B4A3A;--tierra:#7A6840;--metal:#5A7A65;--agua:#2E4A5A;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'EB Garamond',Georgia,serif;background-color:#F5F0E3;background-image:none;background-color:#EDF4EF;background-size:cover;background-position:center center;background-attachment:fixed;color:var(--text);min-height:100vh;overflow-x:hidden}

/* Viñeta suave — graphite sutil */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(ellipse 90% 85% at 50% 50%, transparent 48%, rgba(42,90,58,0.10) 100%);}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 8% 10% at 94% 92%, rgba(138,115,75,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 12% 15% at 12% 55%, rgba(90,90,90,0.03) 0%, transparent 70%);}

/* ── FONDO DECORATIVO (tinta graphite / sello dorado) ── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 55% 45% at 15% 25%, rgba(42,90,58,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 75%, rgba(90,90,90,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(138,115,75,0.04) 0%, transparent 60%);
}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(168,147,100,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(90,90,90,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 20%, rgba(168,147,100,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(42,90,58,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 60%, rgba(168,147,100,0.20) 0%, transparent 100%);
}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(245,240,227,0.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(138,115,75,0.15);box-shadow:0 2px 12px rgba(26,61,40,0.06)}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.5rem 1.5rem;flex-wrap:wrap}
.nav-brand{font-family:'Cinzel',serif;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-size:0.85rem;font-weight:600;padding:0;
  margin-right:0.5rem;
  white-space:nowrap;letter-spacing:0.12em;text-transform:uppercase}
.nav-links{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0.1rem 0;
}
.nav-btn{background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:'EB Garamond',Georgia,serif;font-size:0.75rem;padding:0.3rem 0.6rem;
  transition:color 0.2s;letter-spacing:0.02em;white-space:nowrap;
  border-bottom:2px solid transparent}
.nav-btn:hover{color:var(--gold);border-bottom-color:rgba(138,115,75,0.3)}
.nav-btn.active{color:var(--gold);border-bottom-color:var(--gold2);font-weight:500}

/* ── MAIN ── */
main{padding-top:70px;position:relative;z-index:1}
.section{display:none;min-height:calc(100vh - 70px);padding:2.5rem 1rem}
.section.active{display:block}
.container{max-width:980px;margin:0 auto}

/* ── TÍTULOS ── */
.page-title{font-family:'Cinzel',serif;font-size:1.9rem;
  background:linear-gradient(135deg,var(--vio4),var(--blu3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-align:center;margin-bottom:0.4rem;letter-spacing:0.04em}
.page-subtitle{text-align:center;color:var(--muted);font-style:italic;margin-bottom:2rem;font-size:1.05rem}
.section-divider{text-align:center;margin:1.5rem 0;color:var(--gold2);font-size:1.2rem;letter-spacing:0.3em}

/* ── ORNAMENTO ── */
.ornament{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}
.ornament::before,.ornament::after{content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--border2),transparent)}
.ornament span{color:var(--vio3);white-space:nowrap;font-family:'Cinzel',serif;font-size:0.85rem;letter-spacing:0.1em}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.25rem 1.5rem;margin-bottom:1rem;position:relative;
  box-shadow:0 2px 20px rgba(100,60,0,0.18)}
.card::before{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;
  border:1px solid rgba(42,90,58,0.12);border-radius:5px;pointer-events:none}

/* ── INICIO ── */
.hero{text-align:center;padding:3rem 1rem 2rem}
.hero-title{font-family:'Cinzel',serif;font-size:2.4rem;
  background:linear-gradient(135deg,var(--vio4) 0%,var(--blu3) 50%,var(--grn3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.25;margin-bottom:0.5rem;letter-spacing:0.04em}
.hero-subtitle{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold2);margin-bottom:1.5rem;letter-spacing:0.08em}
.hero-desc{max-width:680px;margin:0 auto 2rem;color:var(--muted);font-size:1.05rem;line-height:1.8}
.hero-badge{display:inline-block;
  background:linear-gradient(135deg,var(--vio),var(--blu));
  color:var(--vio4);font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.15em;
  padding:0.3rem 1rem;border-radius:20px;margin-bottom:1rem;border:1px solid var(--vio2)}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}
.feature-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.25rem;text-align:center;cursor:pointer;transition:all 0.25s;
  box-shadow:0 2px 16px rgba(100,60,0,0.14)}
.feature-card:hover{background:linear-gradient(135deg,rgba(26,61,40,0.3),rgba(42,90,58,0.3));
  border-color:var(--vio3);transform:translateY(-3px);box-shadow:0 8px 30px var(--shadow)}
.feature-card:hover .fc-title{color:var(--vio4)}
.feature-card:hover .fc-desc{color:var(--text)}
.fc-icon{font-size:2rem;margin-bottom:0.5rem;display:block}
.fc-title{font-family:'Cinzel',serif;font-size:0.85rem;color:var(--vio3);margin-bottom:0.3rem;letter-spacing:0.05em;transition:color 0.2s}
.fc-desc{font-size:0.85rem;color:var(--muted);line-height:1.5;transition:color 0.2s}

/* ── CORRESPONDENCIAS ── */
.corr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;margin:1.5rem 0}
.corr-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:0.9rem 0.6rem;text-align:center;cursor:pointer;transition:all 0.25s;position:relative;
  box-shadow:0 2px 12px rgba(100,60,0,0.14)}
.corr-card:hover,.corr-card.selected{
  background:linear-gradient(135deg,rgba(26,61,40,0.22),rgba(42,90,58,0.22));
  box-shadow:0 4px 24px var(--note-color, var(--shadow))66;
  transform:translateY(-2px)}
.corr-card.selected{border-width:2px;background:linear-gradient(135deg, color-mix(in srgb, var(--note-color) 18%, transparent), color-mix(in srgb, var(--note-color) 8%, transparent))}
.corr-card:hover .cn,.corr-card.selected .cn{color:var(--muted)}
.corr-card:hover .cn2,.corr-card.selected .cn2{color:var(--gold3)}
.corr-note{font-family:'Cinzel',serif;font-size:1.7rem;font-weight:700;margin-bottom:0.2rem;letter-spacing:0.04em}
.cn{font-size:0.8rem;color:var(--muted);margin-bottom:0.1rem}
.cn2{font-size:0.75rem;color:var(--gold2)}
.play-btn{position:absolute;top:4px;right:4px;border:none;cursor:pointer;
  font-size:0.85rem;opacity:0.65;transition:opacity 0.2s;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.corr-card:hover .play-btn,.corr-card.selected .play-btn{opacity:1;transform:scale(1.1)}

.corr-detail{background:var(--bg2);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-top:1rem;display:none;box-shadow:0 4px 30px var(--shadow)}
.corr-detail.visible{display:block}
.cd-title{font-family:'Cinzel',serif;font-size:1.2rem;color:var(--vio4);margin-bottom:1rem}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.75rem}
.cd-item label{display:block;font-size:0.75rem;color:var(--muted);letter-spacing:0.05em;margin-bottom:0.15rem;font-family:'Cinzel',serif}
.cd-item span{font-size:1rem;color:var(--text)}

/* ── ACERCA DE ── */
.acerca-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:1.8rem 2rem;margin-bottom:1.5rem;position:relative;overflow:hidden;
  transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s}
.acerca-card:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(100,60,0,0.18);border-color:var(--vio3)}
.acerca-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--gold2), var(--vio4), var(--blu3))}
.acerca-tag{font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.14em;
  color:var(--gold3);margin-bottom:0.5rem;display:inline-block;
  padding:0.2rem 0.65rem;border:1px solid rgba(252,211,77,0.3);border-radius:14px;
  background:rgba(252,211,77,0.06)}
.acerca-title{font-family:'Cinzel',serif;color:var(--vio4);font-size:1.6rem;font-weight:700;
  margin:0.4rem 0 0.9rem;letter-spacing:0.02em;line-height:1.3}
.acerca-lead{color:var(--text);font-size:1.02rem;line-height:1.7;margin-bottom:1.2rem;font-style:italic}
.acerca-meta{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem 1.5rem;margin-top:0.5rem;
  padding:1rem 1.1rem;background:rgba(210,185,130,0.55);border-radius:6px;border:1px solid var(--border)}
.acerca-meta > div{display:flex;flex-direction:column}
.acerca-label{font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;margin-bottom:0.2rem}
.acerca-value{color:var(--text);font-size:0.92rem;line-height:1.45}
.acerca-card p{color:var(--text);line-height:1.7;margin-bottom:0.6rem}
.acerca-card p strong{color:var(--gold2)}
.acerca-features{list-style:none;padding:0;margin:1rem 0}
.acerca-features li{padding:0.45rem 0;border-bottom:1px dashed var(--border);color:var(--text);line-height:1.55;font-size:0.93rem}
.acerca-features li:last-child{border-bottom:none}
.acerca-features li strong{color:var(--vio4);font-weight:600}
@media (max-width:680px){.acerca-meta{grid-template-columns:1fr}.acerca-card{padding:1.3rem}}

/* ── TRÍADAS — Modal y clickables ── */
.rd-triada-clickable{cursor:pointer;padding:0.35rem 0.6rem;border-radius:4px;transition:background 0.2s;color:var(--text)}
.rd-triada-clickable:hover{background:rgba(42,90,58,0.18)}
.triadas-matches{background:linear-gradient(135deg,rgba(252,211,77,0.07),rgba(42,90,58,0.06));
  border:1px solid rgba(252,211,77,0.25);border-radius:8px;padding:1rem 1.1rem;margin-bottom:1rem}
.tm-label{font-family:'Cinzel',serif;font-size:0.82rem;color:var(--gold3);letter-spacing:0.06em;margin-bottom:0.65rem}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.55rem}
.tm-card{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:0.55rem 0.75rem;cursor:pointer;
  transition:all 0.2s;border-left:3px solid var(--tm-color)}
.tm-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(100,60,0,0.18);border-color:var(--tm-color)}
.tm-sig{font-family:'Cinzel',serif;font-weight:600;font-size:0.92rem;margin-bottom:0.15rem}
.tm-stats{font-size:0.72rem;color:var(--muted)}
.trd-overlay{position:fixed;inset:0;background:rgba(40,20,0,0.72);z-index:1000;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.2s;backdrop-filter:blur(6px);padding:1rem;overflow-y:auto}
.trd-overlay.open{opacity:1}
.trd-modal{background:var(--bg2);border:1px solid var(--trd-color);border-radius:10px;
  width:min(560px,92vw);max-width:560px;max-height:85vh;overflow-y:auto;
  padding:1.1rem 1.25rem;position:relative;box-shadow:0 0 60px var(--trd-color)44, 0 0 0 1px var(--trd-color)33}
.trd-close{position:absolute;top:0.4rem;right:0.55rem;background:none;border:none;color:var(--muted);
  font-size:1.35rem;cursor:pointer;width:30px;height:30px;border-radius:50%;transition:all 0.2s;line-height:1;display:flex;align-items:center;justify-content:center}
.trd-close:hover{background:rgba(42,90,58,0.2);color:#1C2E22}
.trd-head{margin-bottom:0.85rem;padding-right:2rem}
.trd-sig{font-family:'Cinzel',serif;font-size:1.15rem;letter-spacing:0.05em;font-weight:700;margin-bottom:0.15rem;line-height:1.25}
.trd-tono{font-size:0.78rem;color:var(--muted)}
.trd-section{margin-top:0.85rem}
.trd-section h4{font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.08em;color:var(--gold3);margin-bottom:0.35rem;border-bottom:1px solid var(--border);padding-bottom:0.2rem}
.trd-section ul{list-style:none;padding:0;margin:0}
.trd-section li{padding:0.32rem 0.5rem;border-radius:4px;margin-bottom:0.18rem;font-size:0.82rem;color:var(--text);line-height:1.45}
.trd-link{cursor:pointer;transition:background 0.18s;display:flex;align-items:center;gap:0.4rem;border:1px solid transparent}
.trd-link:hover{background:rgba(42,90,58,0.12);border-color:var(--vio3)}
.trd-link .dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.trd-empty{color:var(--muted);font-style:italic;font-size:0.8rem}
.trd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0.85rem;margin-top:0.85rem}
.trd-actions{display:flex;gap:0.5rem;margin-top:1rem;flex-wrap:wrap}
.trd-actions .sc-btn{flex:1;min-width:120px;font-size:0.8rem;padding:0.5rem 0.8rem}
@media (max-width:640px){
  .trd-modal{padding:0.9rem 1rem;max-height:88vh;width:min(560px,94vw)}
  .trd-cols{grid-template-columns:1fr;gap:0.7rem}
  .trd-sig{font-size:1.05rem}
  .trd-overlay{padding:0.5rem}
}

/* ── EMOCIONES (sana vs patológica) ── */
.emo-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;margin-bottom:1.25rem}
.emo-box{border-radius:6px;padding:0.7rem 1rem;border:1px solid}
.emo-sana{background:rgba(60,110,75,0.07);border-color:rgba(60,110,75,0.3)}
.emo-patho{background:rgba(100,70,60,0.06);border-color:rgba(100,70,60,0.3)}
.emo-title{font-size:0.7rem;font-family:'Cinzel',serif;letter-spacing:0.07em;margin-bottom:0.35rem;font-weight:600}
.emo-sana .emo-title{color:#4A7A58}
.emo-patho .emo-title{color:#8B1515}
.emo-text{font-size:0.87rem;color:var(--text);line-height:1.55}
@media (max-width:720px){.emo-grid{grid-template-columns:1fr}}

/* ── DODECAEDRO 3D (portada de 12 Órganos) ── */
.dodeca-wrap{position:relative;width:100%;max-width:780px;margin:1.5rem auto 2rem;
  height:520px;background:radial-gradient(ellipse at center, rgba(122,21,21,0.10) 0%, transparent 70%);
  border-radius:12px;overflow:hidden;cursor:grab;user-select:none}
.dodeca-wrap.grabbing{cursor:grabbing}
#dodeca-canvas-host{width:100%;height:100%;position:absolute;inset:0}
#dodeca-canvas-host canvas{display:block;width:100%!important;height:100%!important}
.dodeca-label{position:absolute;pointer-events:none;font-family:'Cinzel',serif;
  font-weight:700;color:#0a0a0a;background:rgba(255,255,255,0.92);
  padding:0.25rem 0.55rem;border-radius:4px;font-size:0.8rem;
  white-space:nowrap;transform:translate(-50%,-50%);
  box-shadow:0 2px 8px rgba(100,60,0,0.25), 0 0 12px currentColor;
  transition:opacity 0.2s, transform 0.2s;letter-spacing:0.03em;
  border:1px solid rgba(0,0,0,0.3)}
.dodeca-label .ln-note{font-size:1.05rem;display:block;line-height:1}
.dodeca-label .ln-org{font-size:0.62rem;font-family:'EB Garamond',serif;color:#333;letter-spacing:0.04em;text-transform:uppercase;font-weight:600}

.dodeca-controls{position:absolute;top:0.6rem;left:0.6rem;display:flex;gap:0.4rem;z-index:5}
.dodeca-controls button{background:rgba(210,185,130,0.85);color:var(--vio4);border:1px solid var(--border2);
  padding:0.35rem 0.65rem;border-radius:5px;cursor:pointer;font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.05em;
  transition:all 0.18s}
.dodeca-controls button:hover{background:var(--vio3);color:#fff}
.dodeca-controls button.active{background:var(--gold2);color:#0a0a0a;border-color:var(--gold3);font-weight:700}
.dodeca-legend{position:absolute;top:0.6rem;right:0.7rem;background:rgba(5,5,15,0.85);border:1px solid var(--border);
  border-radius:6px;padding:0.5rem 0.7rem;font-size:0.7rem;display:flex;flex-direction:column;gap:0.2rem;z-index:5;
  font-family:'Cinzel',serif;letter-spacing:0.04em;color:#E8DEC8;pointer-events:none}
.dodeca-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:0.4rem;vertical-align:middle}
.dodeca-hint{position:absolute;bottom:0.6rem;left:50%;transform:translateX(-50%);
  color:var(--muted);font-style:italic;font-size:0.8rem;letter-spacing:0.05em;
  background:transparent;padding:0.25rem 0.75rem;border-radius:14px;
  border:none;pointer-events:none}
@media (max-width: 720px){
  .dodeca-wrap{height:420px}
}

/* ── ESCALAS (vista escala-céntrica) ── */
.quintas-wrap{display:flex;justify-content:center;margin:0 auto 2rem;position:relative}
.quintas-svg{max-width:380px;width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(42,90,58,0.2))}
.quintas-svg .seg{cursor:pointer;transition:opacity 0.2s, transform 0.2s;transform-origin:190px 190px}
.quintas-svg .seg:hover{opacity:0.85;transform:scale(1.04)}
.quintas-svg .seg.active{filter:brightness(1.3) drop-shadow(0 0 12px currentColor)}
.quintas-svg text{font-family:'Cinzel',serif;font-weight:600;pointer-events:none;fill:#0a0a0a}
.scales-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.scale-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1.1rem 1.25rem;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;position:relative;overflow:hidden}
.scale-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sc-color)}
.scale-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(100,60,0,0.18);border-color:var(--sc-color)}
.scale-card.extra{background:linear-gradient(135deg,rgba(217,119,6,0.06),var(--bg2));border-color:rgba(252,211,77,0.25)}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.5rem}
.sc-name{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--sc-color);letter-spacing:0.04em;font-weight:700}
.sc-sub{font-size:0.78rem;color:var(--muted);font-style:italic}
.sc-notes{display:flex;gap:0.25rem;flex-wrap:wrap;margin:0.5rem 0 0.85rem}
.sc-note-pill{padding:0.18rem 0.5rem;border-radius:14px;font-family:'Cinzel',serif;font-size:0.78rem;font-weight:600;color:#0a0a0a}
.sc-section{margin-top:0.65rem}
.sc-label{font-size:0.72rem;color:var(--muted);font-family:'Cinzel',serif;letter-spacing:0.08em;margin-bottom:0.3rem}
.sc-tonif{color:var(--grn3)}
.sc-disp{color:var(--blu3)}
.sc-organs{display:flex;gap:0.3rem;flex-wrap:wrap}
.sc-organ-chip{padding:0.22rem 0.55rem;border-radius:4px;font-size:0.8rem;cursor:pointer;
  background:rgba(210,185,130,0.70);border:1px solid var(--border);transition:all 0.18s;display:inline-flex;align-items:center;gap:0.3rem}
.sc-organ-chip:hover{transform:translateY(-1px);filter:brightness(1.3)}
.sc-organ-chip .dot{width:8px;height:8px;border-radius:50%}
.sc-actions{display:flex;gap:0.5rem;margin-top:0.85rem}
.sc-btn{flex:1;padding:0.5rem 0.75rem;border-radius:5px;border:1px solid var(--border2);cursor:pointer;
  font-family:'Cinzel',serif;font-size:0.78rem;letter-spacing:0.05em;background:rgba(42,90,58,0.1);
  color:var(--vio4);transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:0.4rem}
.sc-btn:hover{background:var(--sc-color);color:#0a0a0a;border-color:var(--sc-color);font-weight:600}
.sc-btn.playing{background:var(--gold2);color:#0a0a0a;border-color:var(--gold3)}
.sc-extra-text{font-size:0.88rem;line-height:1.65;color:var(--text);margin-top:0.4rem}
.sc-extra-text strong{color:var(--gold3)}

/* ── ÓRGANOS ── */
.organ-tabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem}
.otab{background:rgba(210,185,130,0.82);border:1px solid var(--border);border-radius:4px;
  padding:0.4rem 0.75rem;cursor:pointer;font-family:'EB Garamond',serif;
  font-size:0.9rem;color:var(--muted);transition:all 0.2s}
.otab:hover{background:rgba(42,90,58,0.15);color:#1C2E22}
.otab.active{background:color-mix(in srgb, var(--org-color, var(--vio2)) 28%, transparent);border-color:var(--org-color, var(--vio3));color:var(--dark);font-weight:600;box-shadow:0 0 16px color-mix(in srgb, var(--org-color, var(--vio3)) 40%, transparent)}
.organ-content{display:none}
.organ-content.active{display:block}
.organ-header{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.organ-icon-box{width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,var(--vio),var(--blu));
  display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0;
  box-shadow:0 0 20px var(--shadow)}
.organ-title{font-family:'Cinzel',serif;font-size:1.5rem;color:var(--vio4);margin-bottom:0.25rem}
.organ-note{font-size:0.9rem;color:var(--muted)}
.organ-note strong{color:var(--gold2);font-size:1.1rem}

.modulo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
@media(max-width:580px){.modulo-grid{grid-template-columns:1fr}}
.modulo-box{border-radius:6px;padding:1rem;transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s}
.modulo-box[onclick]:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(100,60,0,0.18)}
.nota-clickable{cursor:pointer;transition:opacity 0.15s,text-shadow 0.15s}
.nota-clickable:hover{opacity:0.8;text-shadow:0 0 12px currentColor}
.play-scale-inline{background:none;border:1px solid currentColor;border-radius:3px;cursor:pointer;font-size:0.68rem;padding:0.08rem 0.35rem;opacity:0.65;transition:opacity 0.18s,background 0.18s;color:inherit;margin-right:0.3rem;vertical-align:middle}
.play-scale-inline:hover{opacity:1;background:rgba(255,255,255,0.1)}
.modulo-box.tonificar{background:rgba(255,162,58,0.12);border:1px solid rgba(255,162,58,0.4)}
.modulo-box.tonificar[onclick]:hover{border-color:rgba(255,162,58,0.8)}
.modulo-box.dispersar{background:rgba(135,206,235,0.15);border:1px solid rgba(135,206,235,0.5)}
.modulo-box.dispersar[onclick]:hover{border-color:rgba(135,206,235,0.9)}
.rc-mod-clickable{cursor:pointer;transition:all 0.2s}
.rc-mod-clickable[title*="tonificar"]{background:rgba(255,140,0,0.22);border-color:rgba(255,140,0,0.55);color:#1a1a1a}
.rc-mod-clickable[title*="dispersar"]{background:rgba(100,180,230,0.25);border-color:rgba(100,180,230,0.55);color:#1a1a1a}
.rc-mod-clickable:hover{background:rgba(42,90,58,0.35)!important;color:#1C2E22!important;transform:translateY(-1px)}
/* Escalas del Buscador sin link → coloreadas por tipo */
#searchResults .rc-modulos .escala-tonificar{background:rgba(255,140,0,0.22);border:1px solid rgba(255,140,0,0.55);color:#1a1a1a}
#searchResults .rc-modulos .escala-tonificar:hover{background:rgba(255,140,0,0.45)!important;color:#1C2E22!important;transform:translateY(-1px)}
#searchResults .rc-modulos .escala-dispersar{background:rgba(100,180,230,0.25);border:1px solid rgba(100,180,230,0.55);color:#1a1a1a}
#searchResults .rc-modulos .escala-dispersar:hover{background:rgba(100,180,230,0.5)!important;color:#1C2E22!important;transform:translateY(-1px)}
#searchResults .rc-modulos .escala-extraord{background:rgba(60,180,80,0.22);border:1px solid rgba(60,180,80,0.55);color:#1a1a1a}
#searchResults .rc-modulos .escala-extraord:hover{background:rgba(60,180,80,0.5)!important;color:#1C2E22!important;transform:translateY(-1px)}
.rd-mod-clickable{cursor:pointer;padding:0.35rem 0.6rem;border-radius:4px;transition:background 0.2s}
.rd-mod-clickable:hover{background:rgba(42,90,58,0.18)}
.mb-title{font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.1em;margin-bottom:0.5rem}
.modulo-box.tonificar .mb-title{color:#FFA23A}
.modulo-box.dispersar .mb-title{color:#87CEEB}
.mb-escala{font-size:1rem;color:var(--text);margin-bottom:0.4rem;font-weight:500}
.mb-puntos{font-size:0.85rem;color:var(--muted);line-height:1.6}
.punto-tag{display:inline-block;background:rgba(30,27,75,0.6);border:1px solid var(--border2);
  border-radius:3px;padding:0.1rem 0.4rem;margin:0.1rem;font-size:0.8rem;color:var(--vio4)}

/* ── BUSCADOR ── */
.search-box{position:relative;margin-bottom:1.5rem}
.search-input{width:100%;padding:0.9rem 3rem 0.9rem 1.25rem;border:1px solid var(--border2);
  border-radius:6px;background:var(--bg2);font-family:'EB Garamond',serif;font-size:1.05rem;
  color:var(--text);outline:none;transition:border 0.2s}
.search-input:focus{border-color:var(--vio3);box-shadow:0 0 0 3px rgba(42,90,58,0.15)}
.search-input::placeholder{color:var(--light)}
.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  color:var(--vio3);font-size:1.2rem}
.search-hint{font-size:0.85rem;color:var(--muted);margin-bottom:1rem;font-style:italic}
.result-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.2rem 1.5rem;margin-bottom:0.75rem;cursor:pointer;transition:all 0.2s}
.result-card:hover{border-color:var(--vio3);box-shadow:0 4px 20px var(--shadow)}
.rc-name{font-family:'Cinzel',serif;font-size:1rem;color:var(--vio4);margin-bottom:0.4rem}
.rc-tag{display:inline-block;font-size:0.72rem;padding:0.15rem 0.5rem;border-radius:10px;
  margin:0.1rem;font-family:'Cinzel',serif;letter-spacing:0.03em}
.rc-tag.general{background:rgba(42,90,58,0.15);color:var(--vio4);border:1px solid rgba(42,90,58,0.3)}
.rc-tag.onco{background:rgba(90,90,80,0.15);color:var(--grn3);border:1px solid rgba(90,90,80,0.3)}
.rc-tag.neuro{background:rgba(80,80,90,0.15);color:var(--blu3);border:1px solid rgba(80,80,90,0.3)}
.rc-sindromes{font-size:0.88rem;color:var(--muted);margin-top:0.4rem;line-height:1.6}
.rc-modulos{margin-top:0.5rem}
.rc-modulos span{display:inline-block;background:rgba(30,27,75,0.5);border:1px solid var(--border2);
  font-size:0.78rem;padding:0.15rem 0.5rem;border-radius:3px;margin:0.1rem;color:var(--text)}

.result-detail{background:var(--bg3);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-bottom:1rem;display:none;box-shadow:0 4px 30px var(--shadow)}
.result-detail.open{display:block}
.rd-section{margin-bottom:1rem}
.rd-section h4{font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.1em;
  color:var(--gold2);margin-bottom:0.4rem;border-bottom:1px solid var(--border);padding-bottom:0.2rem}
.rd-section p{font-size:0.9rem;color:var(--text);line-height:1.7}

.no-results{text-align:center;padding:3rem;color:var(--muted);font-style:italic}

/* ── ORÁCULO ── */
.oracle-tabs{display:flex;gap:0.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
.oracle-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;
  padding:0.75rem 1.5rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.9rem;
  color:var(--muted);letter-spacing:0.05em;transition:all 0.2s}
.oracle-tab:hover{color:var(--vio4)}
.oracle-tab.active{color:var(--vio4);border-bottom-color:var(--vio3)}
.oracle-panel{display:none}
.oracle-panel.active{display:block}

/* Oracle Al Azar */
.coin-area{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:1.5rem;text-align:center;margin-bottom:1rem;
  box-shadow:inset 0 0 40px rgba(26,61,40,0.07)}
.hexagram-display{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;
  margin:1.5rem 0;min-height:130px}
.hex-line{display:flex;justify-content:center;align-items:center;gap:6px;position:relative}
.hex-line-label{{
  position:absolute;
  left:-8rem;
  width:7rem;
  text-align:right;
}font-size:0.72rem;color:var(--muted);
  font-family:'Cinzel',serif;letter-spacing:0.02em;white-space:nowrap}
.hex-line-num{position:absolute;right:-2rem;font-size:0.72rem;color:var(--muted)}
.yang-line{width:120px;height:8px;
  background:linear-gradient(90deg,var(--vio3),var(--blu3));
  border-radius:4px;box-shadow:0 0 8px rgba(50,100,65,0.5)}
.yin-line-left,.yin-line-right{width:50px;height:8px;
  background:linear-gradient(90deg,var(--grn2),var(--grn3));
  border-radius:4px;box-shadow:0 0 8px rgba(90,90,80,0.4)}
.yin-gap{width:20px}
.trigram-divider{width:140px;height:1px;background:var(--border2);margin:4px 0;opacity:0.6}

.step-indicator{display:flex;gap:0.4rem;justify-content:center;margin-bottom:1rem}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.step-dot.done{background:var(--vio3)}
.step-dot.current{background:var(--gold2);box-shadow:0 0 0 3px rgba(217,119,6,0.3)}

.throw-btn{background:linear-gradient(135deg,var(--vio2),var(--blu2));color:#fff;border:none;
  padding:0.75rem 2rem;font-family:'Cinzel',serif;font-size:0.95rem;letter-spacing:0.05em;
  cursor:pointer;border-radius:6px;transition:all 0.2s;
  box-shadow:0 4px 15px var(--shadow)}
.throw-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--shadow)}
.throw-btn:disabled{opacity:0.3;cursor:default;transform:none}
.btn-gold{background:none;border:1px solid var(--gold2);color:var(--gold2)}
.btn-gold:hover{background:rgba(217,119,6,0.15);border-color:var(--gold3)}

.oracle-result{background:var(--bg2);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-top:1rem;display:none;box-shadow:0 0 40px rgba(26,61,40,0.15)}
.oracle-result.visible{display:block}
.or-title{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--vio4);margin-bottom:1rem;text-align:center}
.chord-cell.playing{transform:scale(1.08);box-shadow:0 0 0 2px var(--vio3),0 0 18px var(--vio3);z-index:2;position:relative}
.play-progression-btn{display:inline-flex;align-items:center;gap:0.5rem;margin:0.6rem auto 0;padding:0.5rem 1.4rem;background:linear-gradient(135deg,var(--vio),var(--vio2));border:none;border-radius:5px;color:#fff;font-family:'Cinzel',serif;font-size:0.82rem;letter-spacing:0.06em;cursor:pointer;transition:opacity 0.2s,transform 0.15s}
.play-progression-btn:hover{opacity:0.9;transform:scale(1.02)}
.play-progression-btn:disabled{opacity:0.5;cursor:default;transform:none}
.progression-display{text-align:center;font-size:1.3rem;color:var(--text);
  font-family:'EB Garamond',Georgia,serif;letter-spacing:0.05em;margin:1rem 0;
  background:var(--bg3);padding:1rem;border-radius:6px;border:1px solid var(--border2);
  box-shadow:inset 0 0 20px rgba(26,61,40,0.1)}
.chord-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0.5rem;margin:1rem 0}
.chord-cell{text-align:center;padding:0.6rem 0.2rem;border-radius:4px;font-size:0.85rem}
.chord-yang{background:rgba(42,90,58,0.12);border:1px solid rgba(50,100,65,0.3)}
.chord-yin{background:rgba(90,90,80,0.10);border:1px solid rgba(110,110,100,0.25)}
.chord-name{font-weight:600;color:var(--text);font-family:'EB Garamond',Georgia,serif;font-size:1rem}
.chord-func{font-size:0.7rem;color:var(--muted);margin-top:0.2rem}

/* Oracle Momento Vital */
.mv-form{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:1.5rem;margin-bottom:1rem}
.mv-form h3{font-family:'Cinzel',serif;color:var(--vio4);margin-bottom:1rem;font-size:1rem;letter-spacing:0.05em}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1rem}
.form-group label{display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.3rem;
  font-family:'Cinzel',serif;letter-spacing:0.05em}
.form-group input,.form-group select{width:100%;padding:0.6rem 0.75rem;border:1px solid var(--border);
  border-radius:4px;background:var(--bg3);font-family:'EB Garamond',serif;
  font-size:1rem;color:var(--text);outline:none;
  -webkit-appearance:none;appearance:none}
.form-group input:focus,.form-group select:focus{border-color:var(--vio3);
  box-shadow:0 0 0 2px rgba(42,90,58,0.2)}
.form-group select option{background:var(--bg3);color:var(--text)}

.pillar-select{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;margin-top:0.75rem}
.pillar-btn{background:var(--bg3);border:1px solid var(--border);border-radius:4px;
  padding:0.5rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.75rem;
  letter-spacing:0.03em;color:var(--muted);transition:all 0.2s;text-align:center}
.pillar-btn:hover,.pillar-btn.active{background:var(--vio2);border-color:var(--vio3);color:#fff}

.mv-result{background:var(--bg2);border:1px solid var(--vio2);border-radius:6px;
  padding:1.5rem;margin-top:1rem;display:none;box-shadow:0 0 40px rgba(26,61,40,0.12)}
.mv-result.visible{display:block}

/* ── LIBRO ── */
.tomo-header{background:linear-gradient(135deg,var(--vio),var(--blu));color:#fff;
  padding:1rem 1.5rem;border-radius:6px 6px 0 0;margin-top:1.5rem}
.tomo-header h2{font-family:'Cinzel',serif;font-size:1rem;letter-spacing:0.08em}
.tomo-header p{font-size:0.85rem;opacity:0.8;margin-top:0.2rem}
.chapter-list{background:var(--bg2);border:1px solid var(--border);border-top:none;border-radius:0 0 6px 6px}
.chapter-item{padding:0.75rem 1.5rem;border-bottom:1px solid rgba(55,48,163,0.2);
  display:flex;align-items:baseline;gap:1rem}
.chapter-item:last-child{border-bottom:none}
.ch-num{font-family:'Cinzel',serif;font-size:0.75rem;color:var(--vio3);letter-spacing:0.08em;min-width:70px}
.ch-title{font-size:0.95rem;color:var(--text)}

/* ── 5 ELEMENTOS — COLORES SEMÁNTICOS ── */
.elem-madera{color:var(--madera)!important}
.elem-fuego{color:var(--fuego)!important}
.elem-tierra{color:var(--tierra)!important}
.elem-metal{color:var(--metal)!important}
.elem-agua{color:var(--agua)!important}
.bg-madera{background:rgba(22,163,74,0.12)!important;border-color:rgba(110,110,100,0.3)!important}
.bg-fuego{background:rgba(100,70,60,0.12)!important;border-color:rgba(100,70,60,0.3)!important}
.bg-tierra{background:rgba(217,119,6,0.12)!important;border-color:rgba(252,211,77,0.3)!important}
.bg-metal{background:rgba(148,163,184,0.10)!important;border-color:rgba(148,163,184,0.25)!important}
.bg-agua{background:rgba(80,80,90,0.12)!important;border-color:rgba(100,100,110,0.3)!important}

/* ── LECTOR ── */
#chapterContent h1,#chapterContent h2{font-family:'Cinzel',serif;color:var(--vio4);margin:1.5rem 0 0.75rem}
#chapterContent p:hover,#chapterContent h1:hover,#chapterContent h2:hover,#chapterContent h3:hover{background:rgba(42,90,58,0.07);border-radius:3px;cursor:pointer}
.tts-jump-flash{animation:ttsJumpFlash 0.6s ease-out}
@keyframes ttsJumpFlash{0%{background:rgba(42,90,58,0.35)}100%{background:transparent}}
/* ── TTS ACTIVE READING HIGHLIGHT ── */
.tts-reading{
  background:rgba(42,90,58,0.13)!important;
  border-left:3px solid var(--vio3)!important;
  padding-left:0.6rem!important;
  border-radius:4px!important;
  transition:background 0.25s,border-color 0.25s;
  scroll-margin-top:80px;
  scroll-margin-bottom:120px;
}
.tts-reading-fade{
  background:rgba(42,90,58,0.04)!important;
  border-left:3px solid rgba(50,100,65,0.2)!important;
  padding-left:0.6rem!important;
  border-radius:4px!important;
  transition:background 0.8s,border-color 0.8s;
}
#chapterContent h3{font-family:'Cinzel',serif;color:var(--blu3);margin:1.25rem 0 0.6rem;font-size:1.05rem}
#chapterContent h4{font-family:'Cinzel',serif;color:var(--grn3);margin:1rem 0 0.5rem;font-size:0.95rem}
#chapterContent p{margin-bottom:0.9rem;line-height:1.9}
#chapterContent strong{color:var(--vio4);font-weight:600}
#chapterContent em{color:var(--gold2)}
#chapterContent blockquote,#chapterContent [style*="border-left"]{
  border-left-color:var(--gold2)!important;color:var(--muted)!important}
#chapterContent table thead tr{background:linear-gradient(90deg,var(--vio),var(--blu))!important;color:#fff}
#chapterContent table tbody tr:nth-child(even){background:rgba(30,27,75,0.25)!important}
#chapterContent table{border-collapse:collapse}
#chapterContent td,#chapterContent th{border-color:var(--border)!important}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .hero-title{font-size:1.7rem}
  .nav-brand{display:none}
  .nav-inner{padding:0.3rem 0.25rem;justify-content:center}
  .nav-btn{font-size:0.65rem;padding:0.25rem 0.35rem}
  .nav-links{justify-content:center}
  .corr-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .chord-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── ANIMACIONES ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.section.active{animation:fadeIn 0.35s ease}
@keyframes coinFlip{0%{transform:rotateY(0)}50%{transform:rotateY(360deg)}100%{transform:rotateY(0)}}
.spinning{animation:coinFlip 0.4s ease}
@keyframes glow{0%,100%{box-shadow:0 0 10px var(--shadow)}50%{box-shadow:0 0 25px var(--shadow),0 0 50px rgba(50,100,65,0.2)}}
.oracle-result.visible{animation:glow 3s ease-in-out infinite}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--vio2)}

/* Highlight buscador */
mark{background:rgba(42,90,58,0.3);color:var(--vio4);border-radius:2px;padding:0 2px}

/* ── TRÍADAS INDEX MENU ── */
.triadas-index-panel{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1rem 1.2rem;margin-bottom:2rem}
.triadas-index-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:0}
.triadas-index-title{font-family:'Cinzel',serif;font-size:0.82rem;letter-spacing:0.1em;color:var(--gold2);display:flex;align-items:center;gap:0.5rem}
.triadas-index-toggle{color:var(--muted);font-size:0.8rem;transition:transform 0.2s;margin-left:0.5rem}
.triadas-index-body{margin-top:0.85rem}
.triadas-group{margin-bottom:0.9rem}
.triadas-group:last-child{margin-bottom:0}
.triadas-group-label{font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.1em;color:var(--muted);margin-bottom:0.35rem;text-transform:uppercase}
.triadas-chips{display:flex;flex-wrap:wrap;gap:0.35rem}
.triada-chip{display:inline-flex;align-items:center;gap:0.3rem;padding:0.28rem 0.7rem;border-radius:5px;font-size:0.78rem;font-family:'Cinzel',serif;cursor:pointer;border:1px solid transparent;transition:all 0.18s;white-space:nowrap;background:none}
.triada-chip:hover{transform:scale(1.05);box-shadow:0 2px 12px var(--chip-glow,rgba(42,90,58,0.35))}
.triada-chip .chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.triada-chip .chip-stats{font-size:0.62rem;opacity:0.55;margin-left:0.2rem}
/* ── TTS BAR ── */
.tts-bar{position:sticky;top:57px;z-index:50;display:flex;align-items:center;gap:0.6rem;
  flex-wrap:wrap;padding:0.6rem 1rem;background:var(--bg2);
  border-bottom:1px solid var(--border);margin-bottom:0}
.tts-title{font-family:'Cinzel',serif;font-size:0.72rem;color:var(--muted);
  letter-spacing:0.04em;flex:1;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tts-btn{background:none;border:1px solid var(--border);border-radius:4px;
  padding:0.3rem 0.75rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.78rem;
  color:var(--text);transition:all 0.18s;white-space:nowrap}
.tts-btn:hover{border-color:var(--vio3);color:var(--vio4)}
.tts-btn.playing{background:var(--vio);border-color:var(--vio3);color:#fff}
.tts-progress{flex:1;min-width:60px;max-width:180px;height:4px;
  background:var(--bg3);border-radius:2px;overflow:hidden}
.tts-bar-fill{height:100%;background:var(--vio3);width:0%;
  transition:width 0.4s;border-radius:2px}
.tts-speed{font-size:0.72rem;color:var(--muted);border:1px solid var(--border);
  border-radius:4px;padding:0.25rem 0.4rem;background:var(--bg3);cursor:pointer}
.tts-speed:hover{border-color:var(--vio3)}
/* ── TABLES EN LIBRO ── */
.libro-table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:0.88rem;
  display:block;overflow-x:auto}
.libro-table thead th{background:#5C21B6;color:#fff!important;padding:0.5rem 0.75rem;
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.04em;
  text-align:left;white-space:nowrap}
.libro-table thead th strong,.libro-table thead th em{color:#fff!important}
.libro-table td{padding:0.4rem 0.75rem;
  border-bottom:1px solid rgba(92,33,182,0.15);vertical-align:top;line-height:1.55}
.libro-table tr:nth-child(even) td{background:rgba(92,33,182,0.06)}
.libro-table tr:hover td{background:rgba(92,33,182,0.12)}
/* ── CHAPTER READING ── */
#chapterContent h1,#chapterContent h2,#chapterContent h3{font-family:'Cinzel',serif}
#chapterContent h1{font-size:1.4rem;color:var(--vio4);margin:1.5rem 0 0.75rem;line-height:1.3}
#chapterContent h2{font-size:1.1rem;color:var(--vio3);margin:1.25rem 0 0.5rem;
  border-bottom:1px solid rgba(92,33,182,0.25);padding-bottom:0.25rem}
#chapterContent h3{font-size:0.95rem;color:var(--gold2);margin:1rem 0 0.4rem}
#chapterContent p{line-height:1.9;margin-bottom:0.9rem;font-size:1rem}
#chapterContent blockquote{border-left:3px solid var(--vio3);
  padding:0.5rem 0 0.5rem 1.25rem;margin:1rem 0;color:var(--muted);
  font-style:italic;background:rgba(92,33,182,0.07);border-radius:0 4px 4px 0}
#chapterContent ul{margin:0.5rem 0 0.9rem 1rem;list-style:none}
#chapterContent li{padding:0.2rem 0 0.2rem 1.25rem;position:relative;line-height:1.7}
#chapterContent li::before{content:'◆';position:absolute;left:0;
  color:var(--vio3);font-size:0.65rem;top:0.45rem}


/* ── I CHING — 64 HEXAGRAMAS ── */
.hex-grid-64{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:0.7rem;margin:1.5rem 0}
.hex64-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:0.9rem 0.75rem;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.hex64-card:hover{border-color:var(--gold2);transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,119,6,0.2)}
.hex64-num{font-family:'Cinzel',serif;font-size:0.65rem;color:var(--muted);letter-spacing:0.08em;margin-bottom:0.3rem}
.hex64-lines{display:flex;flex-direction:column;gap:4px;margin:0.4rem 0;align-items:flex-start}
.hex64-yang{width:44px;height:5px;background:linear-gradient(90deg,var(--vio3),var(--blu3));border-radius:2px}
.hex64-yin-l,.hex64-yin-r{width:18px;height:5px;background:linear-gradient(90deg,var(--grn2),var(--grn3));border-radius:2px}
.hex64-name{font-family:'Cinzel',serif;font-size:0.78rem;color:var(--vio4);margin-bottom:0.1rem;letter-spacing:0.03em}
.hex64-sub{font-size:0.67rem;color:var(--muted);font-style:italic;margin-bottom:0.1rem;letter-spacing:0.01em;line-height:1.3}
.hex64-cn{font-size:0.85rem;color:var(--gold2)}
.hex64-pin{font-size:0.7rem;color:var(--muted);font-style:italic}
.hex64-kw{font-size:0.68rem;color:var(--light);margin-top:0.3rem;line-height:1.4}
.hex-modal-overlay{position:fixed;inset:0;background:rgba(40,20,0,0.75);z-index:2000;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity 0.2s;backdrop-filter:blur(8px);padding:1rem}
.hex-modal-overlay.open{opacity:1}
.hex-modal{background:var(--bg2);border:1px solid var(--gold2);border-radius:10px;
  max-width:620px;width:100%;padding:1.8rem 2rem;position:relative;
  box-shadow:0 0 60px rgba(217,119,6,0.25);max-height:90vh;overflow-y:auto}
.hm-close{position:absolute;top:0.5rem;right:0.8rem;background:none;border:none;
  color:var(--muted);font-size:1.6rem;cursor:pointer;width:36px;height:36px;
  border-radius:50%;transition:all 0.2s}
.hm-close:hover{background:rgba(217,119,6,0.2);color:#1C2E22}
.hm-header{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.2rem}
.hm-lines-big{display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.hm-yang{width:80px;height:10px;background:linear-gradient(90deg,var(--vio3),var(--blu3));border-radius:4px;
  box-shadow:0 0 8px rgba(50,100,65,0.5)}
.hm-yin-l,.hm-yin-r{width:33px;height:10px;background:linear-gradient(90deg,var(--grn2),var(--grn3));border-radius:4px}
.hm-divider-line{width:80px;height:1px;background:var(--border2);opacity:0.6;margin:2px 0}
.hm-meta{flex:1}
.hm-num{font-family:'Cinzel',serif;font-size:0.72rem;color:var(--muted);letter-spacing:0.1em;margin-bottom:0.2rem}
.hm-title{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold3);letter-spacing:0.04em;line-height:1.2}
.hm-cn{font-size:1.6rem;color:var(--gold2)}
.hm-pin{font-style:italic;color:var(--muted);font-size:0.9rem;margin-top:0.2rem}
.hm-sub{font-style:italic;color:var(--muted);font-size:0.88rem;margin-top:0.15rem;letter-spacing:0.01em}
.hm-trigs{font-size:0.82rem;color:var(--light);margin-top:0.3rem}
.hm-section{margin-top:1rem}
.hm-section h4{font-family:'Cinzel',serif;font-size:0.75rem;letter-spacing:0.1em;
  color:var(--gold3);margin-bottom:0.4rem;border-bottom:1px solid var(--border);padding-bottom:0.2rem}
.hm-section p{font-size:0.9rem;color:var(--text);line-height:1.75}
.hm-section p strong em,.hm-section p em strong{display:block;color:var(--gold3);font-style:italic;font-weight:600;
  margin-bottom:0.6rem;line-height:1.6;letter-spacing:0.01em}
.hm-kw-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.6rem}
.hm-kw{padding:0.2rem 0.55rem;border-radius:12px;font-size:0.72rem;font-family:'Cinzel',serif;
  background:rgba(217,119,6,0.1);border:1px solid rgba(217,119,6,0.3);color:var(--gold3);letter-spacing:0.04em}
.hex-filter-bar{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.25rem;align-items:center}
.hex-filter-btn{background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  padding:0.3rem 0.75rem;cursor:pointer;font-family:'Cinzel',serif;font-size:0.75rem;
  color:var(--muted);letter-spacing:0.04em;transition:all 0.18s}
.hex-filter-btn:hover,.hex-filter-btn.active{background:rgba(217,119,6,0.12);border-color:var(--gold2);color:var(--gold3)}
.hex-search-input{flex:1;min-width:160px;padding:0.45rem 0.85rem;border:1px solid var(--border2);
  border-radius:4px;background:var(--bg3);font-size:0.95rem;
  color:var(--text);outline:none;transition:border 0.2s}
.hex-search-input:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(217,119,6,0.15)}
.sc-note-pill{cursor:pointer;transition:all 0.15s}
.sc-note-pill:hover{transform:scale(1.15) translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.5);opacity:0.85}
.sc-note-pill:active{transform:scale(0.95)}
.chord-cell{cursor:pointer;transition:all 0.2s;user-select:none}
.chord-cell:hover{transform:scale(1.07);box-shadow:0 4px 20px rgba(50,100,65,0.4);z-index:2;position:relative}
.chord-cell:active{transform:scale(0.97)}


/* ─── Tríadas Clínicas section ─── */
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;padding:0.5rem 0}
.td-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow 0.2s}
.td-card:hover{box-shadow:0 4px 24px color-mix(in srgb,var(--td-color) 30%,transparent)}
.td-card-header{display:flex;align-items:center;gap:0.6rem;padding:0.75rem 1rem;background:var(--td-color);cursor:pointer;user-select:none;border-bottom:1px solid color-mix(in srgb,var(--td-color) 25%,transparent);transition:background 0.18s}
.td-card-header:hover{background:color-mix(in srgb,var(--td-color) 85%,#000)}
.td-card-emoji{font-size:1.15rem}
.td-card-nota{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;letter-spacing:0.06em;flex:1}
.td-card-play{font-size:0.82rem;opacity:0.8;transition:opacity 0.18s}
.td-card-header:hover .td-card-play{opacity:1}
.td-card-body{padding:0.5rem 0}
.td-row{display:flex;align-items:center;gap:0.55rem;padding:0.4rem 1rem;cursor:pointer;transition:background 0.15s;border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent)}
.td-row:last-child{border-bottom:none}
.td-row:hover,.td-row-hover{background:color-mix(in srgb,var(--td-color) 9%,transparent)}
.td-num{font-family:'Cinzel',serif;font-size:0.72rem;font-weight:700;color:var(--td-color);min-width:1.2rem;opacity:0.85}
.td-desc{flex:1;font-size:0.84rem;color:var(--text);line-height:1.35}
.td-arrow{font-size:0.72rem;color:var(--td-color);opacity:0.6}
/* ── FIX TIPOGRÁFICO: Cinzel es versalitas → Bb se ve BB, Eb se ve EB, etc.
   En modo inglés, los elementos que muestran notas musicales usan EB Garamond
   que sí distingue mayúsculas de minúsculas. ── */
:lang(en) .corr-note,
:lang(en) .trd-sig,
:lang(en) .tm-sig,
:lang(en) .dodeca-label .ln-note,
:lang(en) .organ-title,
:lang(en) .nota-clickable,
:lang(en) .quintas-svg text,
:lang(en) .td-num {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   v3 — PULIDO EDITORIAL (cambios conservadores, sin rediseño)
   ───────────────────────────────────────────────────────────── */

/* Cuerpo de lectura: contraste/temperatura más de "tratado académico" */
p,.description,.article,.body-copy{color:var(--reading-text)}
/* Excepciones: elementos que mantienen su color propio */
.nav-inner p,.nav-brand,.btn p,.badge p,
.hex-modal p,.oracle-result p,.fc-card p,
.emo-text,.emo-title,
.cn,.cn2,.fc-desc,.page-subtitle{color:inherit}

/* Texto secundario un poco más visible (sin perder jerarquía) */
.page-subtitle,.fc-desc{color:var(--muted)}

/* Rojo editorial — pequeños encabezados ("MAIN FUNCTION", "DESCRIPTION", etc.) */
.editorial-sub,
.organ-content > div > p:first-child[style*="Cinzel"],
.organ-content > div > p[style*="Cinzel"][style*="0.85rem"],
.organ-content > div > p[style*="Cinzel"][style*="0.8rem"]{
  color:var(--editorial-red) !important;
}
.ornament span{color:var(--editorial-red)}
.fc-title{color:var(--editorial-red)}
.feature-card:hover .fc-title{color:var(--vio)}

/* Modal I Ching — contraste corregido (punto más débil de la UI) */
.hex-modal{
  background:var(--oracle-card) !important;
  color:var(--oracle-text);
  border-color:var(--gold2) !important;
}
.hex-modal *:not(button):not(input):not(select):not(textarea){color:var(--oracle-text)}
.hex-modal h1,.hex-modal h2,.hex-modal h3,.hex-modal h4{color:#3A1A0A}
.hex-modal .punto-tag{color:var(--oracle-text) !important}

/* Paneles clínicos — sage/marfil editorial en vez de "Bootstrap" */
.emo-sana{
  background:var(--clinical-green) !important;
  border-color:var(--clinical-green-border) !important;
}
.emo-sana .emo-title{color:#3F5A2A !important}
.emo-sana .emo-text{color:#2E3A1E}
.emo-patho{
  background:var(--clinical-red-bg) !important;
  border-color:var(--clinical-red-border) !important;
}
.emo-patho .emo-title{color:var(--editorial-red) !important}
.emo-patho .emo-text{color:#3A1A12}

/* Botones, badges y tags — coherencia tipográfica editorial */
.badge{font-family:'Cinzel',serif;letter-spacing:0.04em}
.punto-tag{
  background:rgba(212,190,145,0.45) !important;
  color:var(--reading-text) !important;
  border-color:var(--gold2) !important;
}
.btn-gold{color:var(--gold) !important;border-color:var(--gold) !important}
.btn-gold:hover{background:rgba(154,104,0,0.12) !important;color:var(--gold) !important}

/* Tarjetas "acerca / scale" — alinear texto interno al cuerpo de lectura */
.acerca-card p,.acerca-features li,.scale-card p{color:var(--reading-text)}
.acerca-features li strong{color:var(--editorial-red)}