/* ============================================================
   HOME MVP (doc 09 · E3) · v4 — COMPOSICIÓN EDITORIAL
   (7 jul · Rodrigo: "placas donde corresponde, directo en el
   cielo donde corresponde — premium y editorial")
   Capas: CIELO (atmósfera + aura) → TIPOGRAFÍA que respira
   (saludo · índice de prácticas con riel de oro) → UN OBJETO
   (la placa ceremonial del proceso · 04 §5.8).
   NAVY FIJO (--ent-*) · CSS clásico (sin `inset`) · animar solo
   transform/opacity · prefers-reduced-motion respetado.
   ============================================================ */
#app{
  min-height:100dvh; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 92% 58% at 50% 14%, rgba(23,40,62,.65) 0%, transparent 62%),
    linear-gradient(180deg, var(--ent-navy) 0%, #050B14 100%);
  background-color:#050B14; /* base sólida — attachment:fixed retirado: Chrome Android
     pintaba una banda deslavada al hacer scroll (bug real en celular · 7 jul) */
  color:var(--ent-cream);
}
/* aura de marca tras el saludo · respira al pulso somático (7.5s) */
#app::before{
  content:""; position:absolute; pointer-events:none;
  top:-150px; left:50%; width:600px; height:460px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(var(--ent-gold-rgb),.1) 0%, rgba(var(--ent-gold-rgb),.03) 45%, transparent 70%);
  animation:hmAura 7.5s ease-in-out infinite;
}
@keyframes hmAura{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ #app::before{ animation:none; } }

.hm{
  position:relative; z-index:1;
  width:100%; max-width:440px; margin:0 auto;
  /* lateral 26→16→12 (8 jul · Rodrigo: cero palabras/líneas huérfanas) */
  padding:calc(env(safe-area-inset-top) + 16px) 12px calc(env(safe-area-inset-bottom) + 30px);
  display:flex; flex-direction:column;
}

/* ── Cromo mínimo ──────────────────────────────────────────── */
.hm-top{
  display:flex; align-items:center; justify-content:space-between;
  min-height:44px; margin-bottom:28px;
}
.hm-brand{
  font-family:var(--font-serif); font-size:14.5px; letter-spacing:.03em;
  color:rgba(var(--ent-ink-rgb),.72);
}
.hm-out{
  background:transparent; border:0; cursor:pointer; padding:12px 0 12px 14px;
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(var(--ent-ink-rgb),.38); transition:color .2s;
}
.hm-out:active{ color:rgba(var(--ent-ink-rgb),.7); }

/* ── Saludo · directo en el cielo, con aire ────────────────── */
.hm-fecha{
  font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.8); margin-bottom:13px;
}
.hm-hola{
  font-family:var(--font-serif); font-weight:400; font-size:var(--fs-hero);
  line-height:1.1; letter-spacing:-.015em; color:var(--ent-cream);
  text-wrap:balance; margin-bottom:10px;
  text-shadow:0 0 38px rgba(var(--ent-gold-rgb),.16);
}
.hm-lema{
  font-family:var(--font-serif); font-style:italic; font-size:15px;
  line-height:1.55; color:var(--ent-slate); margin-bottom:36px;
}
/* Botón directo al nombre en Perfil · solo en el saludo del demo (14 ago · Rodrigo) */
.hm-name-cta{
  display:inline-flex; align-items:center; gap:6px; align-self:center;
  margin-top:-22px; margin-bottom:36px;
  font-family:var(--font-sans); font-size:12.5px; font-weight:600;
  letter-spacing:.02em; color:var(--ent-gold-bright); text-decoration:none;
  padding:9px 16px; border-radius:2px;
  border:1px solid rgba(201,169,104,.42);
  background:linear-gradient(180deg, rgba(201,169,104,.13), rgba(201,169,104,.04));
  box-shadow:0 2px 8px -5px rgba(201,169,104,.5);
  transition:border-color .2s ease, background .2s ease;
}
.hm-name-cta span{ display:inline-block; transition:transform .2s ease; }
.hm-name-cta:hover{ border-color:rgba(201,169,104,.8); background:linear-gradient(180deg, rgba(201,169,104,.22), rgba(201,169,104,.08)); }
.hm-name-cta:hover span{ transform:translateX(3px); }

/* ── El proceso · LA PLACA (el único objeto físico) ────────── */
.hm-cargando{
  font-family:var(--font-sans); font-size:var(--fs-caption);
  color:rgba(var(--ent-ink-rgb),.4); padding:16px 0;
}
.hm-cta{
  display:block; position:relative; text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.22); border-radius:0;
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.16),   /* filo de luz superior */
    0 30px 70px -36px rgba(0,0,0,.78);             /* asienta la bandeja */
  padding:24px 20px 22px;
  transition:transform .15s ease;
}
.hm-cta:active{ transform:translateY(1px); }
/* hilo interior · el marco tenue de la casa */
.hm-cta::after{
  content:""; position:absolute; top:9px; left:9px;
  width:calc(100% - 18px); height:calc(100% - 18px);
  border:1px solid rgba(var(--ent-gold-rgb),.09); pointer-events:none;
}
.hm-cta-eyebrow{
  display:block; font-family:var(--font-sans); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  color:var(--ent-gold); margin-bottom:12px;
}
.hm-cta-title{
  display:block; font-family:var(--font-serif); font-size:21px; line-height:1.32;
  color:var(--ent-cream); text-wrap:balance; margin-bottom:9px;
}
.hm-cta-title em{ font-style:italic; color:var(--ent-gold-bright); }
.hm-cta-sub{
  display:block; font-family:var(--font-sans); font-size:13.5px; line-height:1.65;
  color:rgba(var(--ent-ink-rgb),.55); margin-bottom:20px;
  text-wrap:balance; /* saltos cuidados · cero huérfanas (roadmap §6) */
}
.hm-cta-go{
  display:block; text-align:center; position:relative; z-index:1;
  font-family:var(--font-sans); font-size:12.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ent-deep);
  background:linear-gradient(180deg, var(--ent-gold-bright) 0%, var(--ent-gold) 62%, #B7945A 100%);
  box-shadow:0 8px 26px rgba(var(--ent-gold-rgb),.22);
  padding:15px 20px; border-radius:0;
}

/* registrada → placa serena (mismo material, voz más baja) */
.hm-estado-ok{
  display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.18);
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.12),
    0 24px 54px -32px rgba(0,0,0,.7);
  padding:18px 18px;
}
.hm-estado-dot{
  width:9px; height:9px; border-radius:50%; flex:none; margin-top:7px;
  background:var(--ent-gold-bright);
  animation:hmDot 5.5s ease-in-out infinite;
}
@keyframes hmDot{
  0%,100%{ box-shadow:0 0 6px rgba(var(--ent-gold-rgb),.5); }
  50%{ box-shadow:0 0 16px rgba(var(--ent-gold-rgb),.95); }
}
@media (prefers-reduced-motion:reduce){ .hm-estado-dot{ animation:none; } }
/* prolijidad (8 jul): el glifo vivo empuja desde la izquierda —
   el bloque de texto se alinea a la izquierda, ordenado, y la
   fecha tiene su propia línea (el "· 7 de julio" suelto murió) */
.hm-estado-ok{ text-align:left; }
.hm-estado-body{ flex:1; }
.hm-estado-t{
  font-family:var(--font-serif); font-size:15.5px; color:var(--ent-cream);
  line-height:1.45; margin-bottom:3px;
}
.hm-estado-f{
  font-family:var(--font-sans); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.65); margin-bottom:7px;
}
.hm-estado-f::first-letter{ text-transform:uppercase; }
.hm-estado-s{
  font-family:var(--font-sans); font-size:13px;
  color:rgba(var(--ent-ink-rgb),.45); line-height:1.6;
}

/* ── TU DÍA · el estado de hoy (¿ya volviste al centro?) ─────
   (8 jul · reemplaza "la práctica de hoy" — dato de experiencia
   real: práctica de hoy hecha o pendiente + racha viva) */
#hm-hoy{ margin-top:26px; }
.hm-hoy-card{
  display:block; text-decoration:none; cursor:pointer;
  /* v18 (13 jul · Rodrigo): material navy del Estado somático — el home
     alterna navy / lavado de oro / navy para que cada carta respire */
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.18); border-radius:0;
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.12),
    0 24px 54px -32px rgba(0,0,0,.7);
  padding:20px 20px 19px;
  transition:transform .15s ease, border-color .2s ease;
}
.hm-hoy-card:hover{ border-color:rgba(var(--ent-gold-rgb),.34); }
.hm-hoy-card.hecho{ cursor:default; }
/* la estadística protagonista de la carta · centrada como el resto
   de la carta (8 jul · prolijidad: una sola alineación por pieza) */
.hm-dia-fila{ display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:7px; }
.hm-dia-num{
  font-family:var(--font-serif); font-weight:400; font-size:34px; line-height:1;
  color:var(--ent-gold-bright); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(var(--ent-gold-rgb),.3);
}
.hm-dia-unit{
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--ent-ink-rgb),.5);
}
.hm-hoy-card:active{ transform:translateY(1px); background:rgba(var(--ent-gold-rgb),.08); }
.hm-hoy-desc{
  display:block; font-family:var(--font-sans); font-size:13px; line-height:1.6;
  color:rgba(var(--ent-ink-rgb),.5); margin-bottom:14px;
  text-wrap:balance;
}
.hm-hoy-go{
  display:inline-block;
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ent-gold-bright);
  border-bottom:1px solid rgba(var(--ent-gold-rgb),.45);
  padding-bottom:4px;
}

/* ── FRASE DEL DÍA · tipografía en el cielo ─────────────────── */
#hm-frase{ margin-top:36px; }
.hm-frase{
  padding:22px 4px;
  border-top:1px solid rgba(var(--ent-gold-rgb),.16);
}
.hm-frase-t{
  font-family:var(--font-serif); font-style:italic; font-size:16px;
  line-height:1.7; color:rgba(var(--ent-ink-rgb),.82);
  text-wrap:balance; margin-bottom:12px;
}
.hm-frase-t::before{ content:'\00AB'; color:var(--ent-gold); font-style:normal; margin-right:4px; }
.hm-frase-t::after{ content:'\00BB'; color:var(--ent-gold); font-style:normal; margin-left:4px; }
.hm-frase-a{
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.65);
}

/* ── Pie · sereno, en el cielo ─────────────────────────────── */
.hm-meta{
  margin-top:40px; padding-top:22px;
  border-top:1px solid rgba(var(--ent-gold-rgb),.16);
  display:flex; flex-direction:column; gap:2px;
}
/* ── El medidor de NC · placa con nivel + barra + neurona
   (rescatado del monolito · 8 jul — "era muy pro") ─────────── */
.hm-nc-card{
  display:flex; align-items:stretch; text-align:left;
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.18);
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.12),
    0 24px 54px -32px rgba(0,0,0,.7);
  padding:24px 0 20px 22px;
}
/* MEDIDO (8 jul): en el ancho real (~200px de columna de texto en
   celulares de 360-412px) NADA puede partirse — el número va solo,
   el label en nowrap con tracking que cabe, y el nivel vive al
   centro del rango (su posición en el tramo · sin competir). */
.hm-nc-main{ flex:1; min-width:0; padding-right:16px; }
.hm-nc-num{
  font-family:var(--font-serif); font-size:34px; line-height:1;
  color:var(--ent-cream); letter-spacing:-.012em;
  font-variant-numeric:tabular-nums;
  margin-bottom:7px;
}
.hm-nc-lbl{
  font-family:var(--font-sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; white-space:nowrap;
  color:rgba(var(--ent-gold-rgb),.75); margin-bottom:17px;
}
.hm-nc-nivel{
  font-family:var(--font-sans); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ent-gold-bright);
}
.hm-nc-bar{
  height:4px; background:rgba(var(--ent-ink-rgb),.12);
  border-radius:2px; overflow:hidden; margin-bottom:9px;
}
.hm-nc-fill{
  height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg, var(--ent-gold), var(--ent-gold-bright));
  transition:width .8s cubic-bezier(.16,1,.3,1);
}
.hm-nc-rango{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:var(--font-sans); font-size:10px; letter-spacing:.1em;
  color:rgba(var(--ent-ink-rgb),.38); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hm-nc-neuron{
  flex:none; width:96px; display:flex; align-items:center; justify-content:center;
  border-left:1px solid rgba(var(--ent-ink-rgb),.09);
}
.hm-nc-neuron svg{ width:90px; height:90px; display:block; }
@media (prefers-reduced-motion:reduce){
  .hm-nc-fill{ transition:none; }
}
@media(min-width:768px){
  .hm{ max-width:560px; padding-top:48px; }
  .hm-hola{ font-size:42px; }
  .hm-cta{ padding:30px 30px 28px; }
}

/* ── DEMO · Inicio: preview del proceso en 3 pasos (11 jul) ── */
.hm-demo{ background:linear-gradient(180deg,#091627,#060E1B); border:1px solid rgba(201,169,104,.2); box-shadow:inset 0 1px 0 rgba(201,169,104,.14), 0 22px 50px -30px rgba(0,0,0,.75); padding:20px 20px 18px; }
.hm-demo-eyebrow{ display:block; font-family:'DM Sans',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgba(201,169,104,.72); margin-bottom:9px; }
.hm-demo-title{ display:block; font-family:'Libre Baskerville',serif; font-size:18px; color:#F4ECD9; line-height:1.25; margin-bottom:14px; }
.hm-demo-title em{ font-style:italic; color:#E8CF94; }
.hm-demo-step{ display:flex; align-items:flex-start; gap:13px; padding:9px 0; }
.hm-demo-n{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1px solid rgba(201,169,104,.4); background:rgba(201,169,104,.06); display:flex; align-items:center; justify-content:center; font-family:'Libre Baskerville',serif; font-size:13px; color:#E8CF94; }
.hm-demo-b{ flex:1; min-width:0; padding-top:1px; text-align:left; }
.hm-demo-b b{ display:block; font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:700; color:#F4ECD9; margin-bottom:2px; }
.hm-demo-b span{ font-family:'DM Sans',sans-serif; font-size:12px; line-height:1.5; color:rgba(255,255,255,.5); }
.hm-demo-note{ display:block; margin-top:13px; padding-top:13px; border-top:1px solid rgba(255,255,255,.08); font-family:'DM Sans',sans-serif; font-size:11.5px; line-height:1.55; color:rgba(201,169,104,.7); text-align:center; }

/* ═══ BRIEF PRE-SESIÓN (13 jul · v14) · placa plegable sobria:
   la clienta deja por escrito qué quiere trabajar en su próxima
   sesión con Rodrigo (Tarea 11 del monolito, sin agenda aún). ═══ */
.hm-ps{
  background:linear-gradient(180deg, rgba(var(--ent-gold-rgb),.06), rgba(var(--ent-gold-rgb),.02));
  border:1px solid rgba(var(--ent-gold-rgb),.28);
  box-shadow:inset 0 1px 0 rgba(var(--ent-gold-rgb),.1);
  margin-top:18px;
}
.hm-ps-head{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  background:none; border:none; padding:15px 16px;
}
.hm-ps-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.hm-ps-eyebrow{
  font-family:var(--font-sans); font-size:8.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--ent-gold);
}
.hm-ps-title{ font-family:var(--font-serif); font-style:italic; font-size:14px; line-height:1.45; color:var(--ent-cream); }
.hm-ps-saved-hint{ font-family:var(--font-sans); font-size:10px; letter-spacing:.06em; color:rgba(var(--ent-gold-rgb),.8); }
.hm-ps-chev{
  flex:0 0 auto; font-size:20px; color:rgba(var(--ent-gold-rgb),.6); line-height:1;
  transition:transform .25s;
}
.hm-ps.abierto .hm-ps-chev{ transform:rotate(90deg); }
.hm-ps-body{ padding:0 16px 16px; }
.hm-ps-prompt{
  font-family:var(--font-sans); font-size:12px; color:rgba(var(--ent-ink-rgb),.6); margin:2px 0 10px;
}
.hm-ps-qs{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:7px; }
.hm-ps-qs li{
  font-family:var(--font-serif); font-style:italic; font-size:12.5px; line-height:1.5;
  color:rgba(var(--ent-ink-rgb),.72); padding-left:14px; position:relative;
}
.hm-ps-qs li::before{ content:"—"; position:absolute; left:0; color:var(--ent-gold); }
.hm-ps-ta{
  width:100%; min-height:84px; background:rgba(5,11,20,.35); border:1px solid rgba(var(--ent-gold-rgb),.3);
  outline:none; resize:none; padding:11px 12px; font-family:var(--font-serif); font-style:italic;
  font-size:13.5px; line-height:1.65; color:var(--ent-cream); margin-bottom:11px;
}
.hm-ps-ta::placeholder{ color:rgba(var(--ent-ink-rgb),.4); }
.hm-ps-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hm-ps-save{
  font-family:var(--font-sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ent-cream); cursor:pointer;
  background:linear-gradient(180deg, #1C2C42, #0A131F);
  border:1px solid rgba(var(--ent-gold-rgb),.55); padding:11px 18px;
}
/* Estado CONFIRMADO tras enviar la pre-sesión (13 ago) */
.hm-ps-done-note{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.04em;
  color:var(--ent-gold-bright); margin:0 0 13px;
}
.hm-ps-done-label{
  display:block; font-family:var(--font-sans); font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:rgba(var(--ent-gold-rgb),.7); margin-bottom:7px;
}
.hm-ps-done-txt{
  background:rgba(5,11,20,.28); border-left:2px solid rgba(var(--ent-gold-rgb),.5);
  padding:10px 14px; font-family:var(--font-serif); font-style:italic; font-size:13.5px;
  line-height:1.65; color:var(--ent-cream); white-space:pre-wrap; word-wrap:break-word;
}
.hm-ps-edit{
  display:inline-block; margin-top:13px; background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-sans); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:rgba(var(--ent-gold-rgb),.85);
  text-decoration:underline; text-underline-offset:3px;
}
.hm-ps-edit:hover{ color:var(--ent-gold-bright); }

/* ═══ JOURNALING · transversal, siempre presente (13 jul · v17) ═══
   MISMA gramática que las cartas del home (hm-hoy / hm-cta):
   eyebrow 10/700 → título serif 21 → línea sans 13 → acceso
   subrayado. Centrada, una sola alineación por pieza. */
.hm-jr{
  display:block; text-decoration:none; cursor:pointer; text-align:center;
  margin-top:26px;
  background:rgba(var(--ent-gold-rgb),.05);
  border:1px solid rgba(var(--ent-gold-rgb),.22); border-radius:0;
  padding:20px 20px 19px;
  transition:transform .15s ease, background-color .2s ease;
}
.hm-jr:hover{ background-color:rgba(var(--ent-gold-rgb),.08); }
.hm-jr:active{ transform:translateY(1px); }
.hm-jr-eyebrow{
  display:block; font-family:var(--font-sans); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  color:var(--ent-gold); margin-bottom:12px;
}
.hm-jr-title{
  display:block; font-family:var(--font-serif); font-size:21px; line-height:1.32;
  color:var(--ent-cream); text-wrap:balance; margin-bottom:9px;
}
.hm-jr-title em{ font-style:italic; color:var(--ent-gold-bright); }
.hm-jr-desc{
  display:block; font-family:var(--font-sans); font-size:13px; line-height:1.6;
  color:rgba(var(--ent-ink-rgb),.5); margin-bottom:14px;
  text-wrap:balance;
}
.hm-jr-go{
  display:inline-block;
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ent-gold-bright);
  border-bottom:1px solid rgba(var(--ent-gold-rgb),.45);
  padding-bottom:4px;
}

/* ═══ PRÁCTICAS DEMO · bloque solo-demo (14 jul · Rodrigo · aire + 2 materiales) ═══ */
.hm-dsep{ display:flex; align-items:center; gap:14px; margin:40px 0 0; }
.hm-dsep::before, .hm-dsep::after{ content:''; flex:1; height:1px; }
.hm-dsep::before{ background:linear-gradient(90deg, transparent, rgba(var(--ent-gold-rgb),.32)); }
.hm-dsep::after{ background:linear-gradient(90deg, rgba(var(--ent-gold-rgb),.32), transparent); }
.hm-dsep span{ flex:none; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ent-gold); }
.hm-dintro{ text-align:center; font-family:var(--font-sans); font-size:12.5px; line-height:1.5; color:rgba(var(--ent-ink-rgb),.5); margin:13px 0 4px; }
.hm-dintro em{ font-style:italic; color:var(--ent-gold-bright); }
/* dos materiales que rompen la monotonía · mismo peso, sin luminosidad extra */
#hm-demo-practicas .hm-jr{ margin-top:20px; padding:24px 22px 22px; transition:border-color .25s ease; }
.hm-jr-navy{ background:linear-gradient(180deg, #091627, #060E1B); border-color:rgba(var(--ent-gold-rgb),.2); }
/* estado "sin evaluación" (cliente antiguo · 4 ago): misma tarjeta navy, pero
   estática (sin hover ni cursor de enlace). Centrada y balanceada por hm-jr. */
.hm-estado-libre{ cursor:default; margin-top:0; }
.hm-estado-libre:hover{ background-color:transparent; border-color:rgba(var(--ent-gold-rgb),.2); }
.hm-jr-warm{
  background:
    linear-gradient(180deg, rgba(var(--ent-gold-rgb),.05), rgba(var(--ent-gold-rgb),.015)),
    linear-gradient(180deg, #060E1A, #04090F);
  border-color:rgba(var(--ent-gold-rgb),.28);
}
.hm-jr-navy:hover, .hm-jr-warm:hover{ border-color:rgba(var(--ent-gold-rgb),.5); }

/* ── MODO RETO · 17 jul (solo demo por ahora) ────────────────────────
   El reto NO agrega un card: reemplaza el contenido del card de
   Coherencia 7' que ya existe, así el dashboard no crece. Reutiliza la
   gramática de hm-jr (eyebrow → título serif → cuerpo → acceso). */
/* con el reto andando el card deja de ser <a> (tiene botones dentro) */
.hm-reto{ display:block; text-align:center; cursor:default; }
/* tira del reto · hermana del card, pegada por debajo. Va FUERA del <a>
   para no anidar un botón dentro de un enlace, y así el card sin iniciar
   sigue siendo clickeable entero como siempre. */
.hm-reto-strip{
  margin-top:-1px; padding:15px 20px 16px; text-align:center;
  border:1px solid rgba(var(--ent-gold-rgb),.2);
  border-top-color:rgba(var(--ent-gold-rgb),.16);
  background:rgba(var(--ent-gold-rgb),.03);
}
.hm-reto-strip p{
  font-family:var(--font-sans); font-size:12px; line-height:1.6;
  color:rgba(var(--ent-ink-rgb),.5); margin:0 0 11px; text-wrap:balance;
}
.hm-reto-btn{
  font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  color:#0B1623; border:1px solid transparent; border-radius:0; padding:11px 20px;
  background:linear-gradient(180deg, #E8CF94 0%, #C9A968 62%, #B7945A 100%);
  transition:opacity .2s;
}
.hm-reto-btn:active{ opacity:.85; }
.hm-reto-btn.ghost{
  background:none; color:var(--ent-gold-bright); font-weight:600;
  border-color:rgba(var(--ent-gold-rgb),.4);
}
.hm-reto-btn.ghost:hover{ border-color:rgba(var(--ent-gold-rgb),.75); }
/* los puntos · anillo vacío → moneda acuñada (misma paleta que las
   medallas: el reto y la vitrina se leen como el mismo sistema).
   Rejilla de 7 para 7 y 21 (filas = semanas) y de 5 para 15, así los
   tres niveles caen en rectángulos limpios y nunca sobra un punto solo. */
.hm-reto-dots{ display:grid; justify-content:center; gap:9px; margin:15px 0 14px; }
.hm-reto-dots[data-cols="7"]{ grid-template-columns:repeat(7, 22px); }
.hm-reto-dots[data-cols="5"]{ grid-template-columns:repeat(5, 22px); }
.hm-reto-dot{
  width:22px; height:22px; border-radius:50%; background:none;
  border:1px solid rgba(var(--ent-gold-rgb),.28);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hm-reto-dot.on{
  border-color:rgba(var(--ent-gold-rgb),.85);
  background:radial-gradient(circle at 38% 30%, #FBEFD0, #E7CE97 45%, #C9A968 75%, #9A7838);
  box-shadow:0 3px 8px -3px rgba(var(--ent-gold-rgb),.7), inset 0 1.5px 2px rgba(255,255,255,.55);
}
.hm-reto-dot.hoy{ border-color:rgba(var(--ent-gold-rgb),.7); box-shadow:0 0 0 3px rgba(var(--ent-gold-rgb),.07); }
.hm-reto-estado{
  font-family:var(--font-sans); font-size:12.5px; line-height:1.6;
  color:rgba(var(--ent-ink-rgb),.5); margin:0 0 14px; text-wrap:balance;
}
/* premio de NC al cumplir un nivel del reto (19 jul) */
.hm-reto-nc{
  font-family:var(--font-sans); font-size:15px; font-weight:600; letter-spacing:.04em;
  color:var(--ent-gold-bright); margin:-8px 0 14px; text-align:center;
}
.hm-reto-nota{
  font-family:var(--font-sans); font-size:11px; line-height:1.5;
  color:rgba(var(--ent-gold-rgb),.65); margin:-6px 0 13px;
}
.hm-reto-acc{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:2px; }
/* card standalone del reto de la app real (18 jul) · sin iniciar */
.hm-reto-intro .hm-jr-desc{ margin-bottom:16px; }
.hm-reto-intro .hm-reto-btn{ margin-top:2px; }
/* margin-top 26 = mismo espacio que el separador de estadísticas de abajo (26) → nota CENTRADA */
.hm-dexplore{ text-align:center; font-family:var(--font-sans); font-size:12px; line-height:1.6; color:rgba(var(--ent-gold-rgb),.7); margin:26px 8px 0; }
.hm-dexplore b{ color:var(--ent-gold-bright); font-weight:600; }
/* divisor VISIBLE y centrado que separa de la Frase (demo) — corto, dorado, con
   aire balanceado arriba/abajo (antes era invisible y pegado a la frase · un vacío) */
/* #hm-frase aporta 36px arriba → 36px abajo = raya CENTRADA (mismo espacio ambos lados) */
.hm-dline{ width:44px; height:1px; margin:0 auto 36px; background:rgba(var(--ent-gold-rgb),.5); }
/* AIRE entre el separador de estadísticas y la card de constancia (14 jul · Rodrigo) */
.hm-dsep + .hm-hoy-card{ margin-top:22px; }
/* el separador NO lleva margen propio: la sección #hm-hoy ya aporta 26px arriba.
   Así el espacio DEBAJO de la nota "Recorre el resto" = 26px (solo #hm-hoy) = los 26px
   de ARRIBA de la nota → queda CENTRADA (antes eran 26+26=52 abajo → descentrada). */
#hm-hoy .hm-dsep{ margin-top:0; }
/* CERO PALABRAS HUÉRFANAS en el dashboard (04 §5.7b · 14 jul) — completa las que faltaban */
.hm-lema, .hm-estado-f, .hm-estado-s, .hm-demo-title, .hm-demo-b span, .hm-demo-note,
.hm-dintro, .hm-dexplore, .hm-ps-title, .hm-ps-prompt, .hm-invita-title, .hm-invita-desc{ text-wrap:balance; }

/* ═══ INVITACIÓN a conversar · demo, tras el gate de valor (14 jul · Rodrigo) ═══
   Placa navy premium con marco interior de oro (lenguaje de placa de la casa) +
   CTA dorado a WhatsApp. Sobrio, consultivo, sin presión (anti-MLM). */
.hm-invita{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg, #0E1B2C, #0A1320);
  border:1px solid rgba(var(--ent-gold-rgb),.34);
  box-shadow:inset 0 1px 0 rgba(var(--ent-gold-rgb),.16), 0 22px 50px -30px rgba(0,0,0,.75);
  padding:26px 22px 24px;
}
.hm-invita::before{ content:''; position:absolute; left:7px; top:7px; right:7px; bottom:7px; border:1px solid rgba(var(--ent-gold-rgb),.12); pointer-events:none; }
.hm-invita > *{ position:relative; z-index:1; }
.hm-invita-eyebrow{ display:block; font-family:var(--font-sans); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; color:var(--ent-gold); margin-bottom:12px; }
.hm-invita-title{ font-family:var(--font-serif); font-size:21px; line-height:1.3; color:var(--ent-cream); margin:0 0 10px; }
.hm-invita-title em{ font-style:italic; color:var(--ent-gold-bright); }
.hm-invita-desc{ font-family:var(--font-sans); font-size:13px; line-height:1.6; color:rgba(var(--ent-ink-rgb),.62); margin:0 auto 18px; max-width:300px; }
.hm-invita-btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:14px 24px; font-family:var(--font-sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ent-deep);
  background:linear-gradient(180deg, var(--ent-gold-bright) 0%, var(--ent-gold) 62%, #B7945A 100%);
  box-shadow:0 8px 22px rgba(var(--ent-gold-rgb),.24);
}
.hm-invita-btn span{ font-size:14px; }

/* ── CARTA "TU SEMANA" (10 ago · rediseño "Progreso Vivo") ─────────────
   Constancia por SEMANA (3 prácticas) en vez de racha por día. Replica
   .hm-hoy-card; la racha vive al pie como récord. Tokens de tokens.css. */
.hm-sem-card{
  background:linear-gradient(180deg,#091627,#060E1B);
  border:1px solid rgba(201,169,104,.18);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(201,169,104,.12), 0 24px 54px -32px rgba(0,0,0,.7);
  padding:20px 20px 19px;
  text-align:center;
}
.hm-sem-card.cumplida{ border-color:rgba(201,169,104,.42); }
.hm-sem-card.regreso{ border-color:rgba(201,169,104,.16); }
.hm-sem-eyebrow{
  display:block; font-family:var(--font-sans);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:700; color:var(--ent-gold); margin-bottom:12px;
}
.hm-sem-fila{ display:flex; align-items:baseline; justify-content:center; gap:9px; margin-bottom:13px; }
.hm-sem-num{
  font-family:var(--font-serif); font-weight:400; font-size:34px; line-height:1;
  color:var(--ent-gold-bright); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(201,169,104,.3);
}
.hm-sem-num.at{ color:rgba(232,207,148,.42); text-shadow:none; }
.hm-sem-unit{
  font-family:var(--font-sans); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.5);
}
/* fichas de la semana (10 ago · rediseño · fichas marfil tipo dominó que se
   acuñan en oro al cumplir · reemplazan los aros finos, que se veían débiles) */
.hm-sem-dots{ display:flex; justify-content:center; gap:8px; margin-bottom:15px; }
.hm-sem-dot{
  width:19px; height:29px; border-radius:6px; box-sizing:border-box;
  background:linear-gradient(180deg, rgba(244,236,217,.15), rgba(244,236,217,.05));
  border:1px solid rgba(201,169,104,.34);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
}
.hm-sem-dot.on{
  border-color:rgba(201,169,104,.9);
  background:linear-gradient(180deg,#FBEFD0,#E7CE97 42%,#C9A968 74%,#9A7838);
  box-shadow:0 4px 9px -3px rgba(201,169,104,.65), inset 0 1.5px 2px rgba(255,255,255,.6);
}
.hm-sem-dot.extra{
  border-color:rgba(201,169,104,.9);
  background:linear-gradient(180deg,#FFFDF6,#F2E2B6 45%,#C9A968 80%);
  box-shadow:0 4px 9px -3px rgba(201,169,104,.5), inset 0 1.5px 2px rgba(255,255,255,.65);
}
.hm-sem-dot.hoy{
  border-color:rgba(201,169,104,.72);
  box-shadow:0 0 0 3px rgba(201,169,104,.09), inset 0 1px 1px rgba(255,255,255,.12);
}
.hm-sem-dot.hint{
  border:1px dashed rgba(201,169,104,.3);
  background:linear-gradient(180deg, rgba(244,236,217,.06), rgba(244,236,217,.02));
}
.hm-sem-body{
  margin:0 auto; max-width:300px; font-family:var(--font-sans);
  font-size:13px; line-height:1.6; color:rgba(255,255,255,.5); text-wrap:balance;
}
.hm-sem-acc{ display:flex; flex-direction:column; gap:9px; margin-top:15px; }
.hm-sem-cta{
  display:inline-block; text-decoration:none; font-family:var(--font-sans);
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#0B1623; background:linear-gradient(180deg,#E8CF94 0%,#C9A968 62%,#B7945A 100%);
  padding:11px 20px; border-radius:var(--radius);
}
.hm-sem-pie{
  display:flex; align-items:center; justify-content:center; gap:14px;
  border-top:1px solid rgba(201,169,104,.14); margin-top:17px; padding-top:13px;
}
.hm-sem-rec{ font-family:var(--font-sans); font-size:11px; color:rgba(255,255,255,.5); }
.hm-sem-rec b{ color:var(--ent-gold-bright); font-weight:600; font-variant-numeric:tabular-nums; }
.hm-sem-sep{ width:1px; height:11px; background:rgba(201,169,104,.22); }

/* ── AVATAR EVOLUTIVO · 8 etapas (10 ago · rediseño "Progreso Vivo") ───
   La tarjeta NC pasa a panel del avatar: etapa · neurona que crece · nombre ·
   descripción · progreso a la siguiente · racha. Reusa .hm-nc-bar/.hm-nc-fill. */
.hm-av-card{
  background:linear-gradient(180deg,#0A131F,#070F19);
  border:1px solid rgba(201,169,104,.18);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(201,169,104,.1), 0 24px 54px -32px rgba(0,0,0,.7);
  padding:22px 20px 20px; text-align:center;
}
.hm-av-eyebrow{
  display:block; font-family:var(--font-sans); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; font-weight:700; color:var(--ent-gold); margin-bottom:10px;
}
.hm-av-neuron{ width:132px; height:132px; margin:2px auto 8px; }
.hm-av-neuron svg{ width:100%; height:100%; display:block; overflow:visible; }
.hm-av-name{
  font-family:var(--font-serif); font-weight:400; font-size:26px; line-height:1.1;
  color:var(--ent-gold-bright); margin:0 0 8px;
}
.hm-av-desc{
  font-family:var(--font-sans); font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.55); margin:0 auto 15px; max-width:300px; text-wrap:balance;
}
.hm-av-rango{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-sans); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(232,207,148,.7); margin-top:7px;
}
.hm-av-rango span{ font-variant-numeric:tabular-nums; }
.hm-av-racha{
  font-family:var(--font-sans); font-size:11.5px; line-height:1.5;
  color:rgba(255,255,255,.5); margin:14px 0 0; text-wrap:balance;
}
.hm-av-total{ font-family:var(--font-sans); font-size:11px; color:rgba(255,255,255,.45); margin:11px 0 0; }
.hm-av-total b{ color:var(--ent-gold-bright); font-weight:600; font-variant-numeric:tabular-nums; }

/* neurona · elementos por etapa (los activa renderNC con clases has-*) */
.nv-t2, .nv-t3, .nv-t4, .nv-myelin, .nv-sats, .nv-field, .nv-signals{ opacity:0; transition:opacity .6s ease; }
.hm-av-neuron.has-d2 .nv-t2{ opacity:1; animation:navBranch 4.6s ease-in-out infinite; }
.hm-av-neuron.has-d3 .nv-t3{ opacity:1; animation:navBranch 4.6s ease-in-out .9s infinite; }
.hm-av-neuron.has-d4 .nv-t4{ opacity:1; animation:navBranch 4.6s ease-in-out 1.7s infinite; }
/* las dendritas respiran (aparecen/atenúan suave) · vida en reposo, sin señales */
@keyframes navBranch{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.hm-av-neuron.has-myelin .nv-myelin{ opacity:1; }
.hm-av-neuron.has-sats .nv-sats{ opacity:1; }
.hm-av-neuron.has-field .nv-field{ opacity:1; }
.hm-av-neuron.has-sig.mov .nv-signals{ opacity:1; }   /* señales SOLO con racha viva */

/* núcleo siempre vivo · pulso con brillo (más evidente · 15 ago) */
.nv-core{ transform-box:fill-box; transform-origin:center; animation:navCore 4.2s ease-in-out infinite; }
/* el anillo del núcleo ahora EMANA como un latido (ping · vida en toda etapa, incl. Chispa) */
.nv-core-ring{ transform-box:fill-box; transform-origin:center; animation:navPing 2.9s ease-out infinite; }
@keyframes navCore{
  0%,100%{ transform:scale(.88); filter:drop-shadow(0 0 3px rgba(255,246,226,.4)); }
  50%{ transform:scale(1.16); filter:drop-shadow(0 0 12px rgba(232,207,148,.95)); }
}
@keyframes navPing{ 0%{ transform:scale(.7); stroke-opacity:.6; } 100%{ transform:scale(2.7); stroke-opacity:0; } }
/* segundo latido, desfasado, sobre el mismo núcleo (usa el core como emisor) */
.nv-core{ will-change:transform, filter; }

/* campo exterior (Bosque) · respira */
.nv-field{ transform-box:fill-box; transform-origin:center; }
.hm-av-neuron.has-field .nv-field{ animation:navBreath 6s ease-in-out infinite; }
@keyframes navBreath{ 0%,100%{ transform:scale(.92); opacity:.6; } 50%{ transform:scale(1.05); opacity:1; } }

/* mielina (Corriente+) · bloques que avanzan = conducción saltatoria */
.hm-av-neuron.has-myelin .nv-myelin path{ animation:navMyelin 2.2s linear infinite; }
@keyframes navMyelin{ to{ stroke-dashoffset:-18; } }

/* satélites (Sinapsis+) · anillos que se expanden al recibir el pulso */
.nv-ring{ fill:none; stroke:#E8CF94; stroke-width:1; stroke-opacity:.6; opacity:0; transform-box:fill-box; transform-origin:center; }
.hm-av-neuron.has-sats .nv-ring{ animation:navRing 2.6s ease-out infinite; }
.hm-av-neuron.has-sats .nv-sat:nth-child(2) .nv-ring{ animation-delay:.7s; }
.hm-av-neuron.has-sats .nv-sat:nth-child(3) .nv-ring{ animation-delay:1.3s; }
.hm-av-neuron.has-sats .nv-sat:nth-child(4) .nv-ring{ animation-delay:1.9s; }
@keyframes navRing{ 0%{ opacity:.55; transform:scale(.5); } 100%{ opacity:0; transform:scale(1.5); } }

@media (prefers-reduced-motion:reduce){
  .hm-av-neuron *{ animation:none !important; }
  .hm-av-neuron .nv-signals{ opacity:0 !important; }   /* forma quieta, sin señales viajando */
}

/* Botón "Ver mi proceso →" en la tarjeta del avatar (15 ago) */
.hm-av-mp{
  display:inline-block; margin-top:15px; text-decoration:none;
  font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ent-gold-bright); background:rgba(var(--ent-gold-rgb),.08);
  border:1px solid rgba(var(--ent-gold-rgb),.4); border-radius:2px; padding:10px 18px;
  transition:background .2s, border-color .2s;
}
.hm-av-mp:hover{ background:rgba(var(--ent-gold-rgb),.16); border-color:var(--ent-gold); }