/* ════════════════════════════════════════════════════
   Autoconocimiento · lo propio de esta herramienta
   La carcasa (tokens, cabecera, botones, paneles, pie)
   vive en /assets/css/nucleo.css y se comparte.
   ════════════════════════════════════════════════════ */

/* ══════ EL RECORRIDO ES UN AMANECER ══════
   Las cuatro etapas van de la noche a la claridad, como la paleta:
   identidad en rojo, prioridades en fuego, acción en crema y
   propósito en blanco. Cada página lleva su hora en --etapa. */
body[data-fase="quien-eres"]       {--etapa:var(--g1)}
body[data-fase="cuatro-preguntas"] {--etapa:var(--g2)}
body[data-fase="mapa-suenos"]      {--etapa:var(--g3)}
body[data-fase="ikigai"]           {--etapa:var(--white)}
body[data-fase="mapa-suenos"] .eyebrow::before,
body[data-fase="ikigai"] .eyebrow::before{box-shadow:inset 0 0 0 1.5px var(--black)}

/* La franja del amanecer bajo la cabecera, con grano */
.hero{position:relative}
.hero::before{
  content:'';position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--grano),var(--grad-h);background-size:180px,100% 100%;
}

/* ══════ RECORRIDO (tarjetas de fase) ══════ */
.recorrido{position:relative;border-top:var(--borde)}
.fase{
  position:relative;display:flex;align-items:flex-start;gap:1.6rem;width:100%;text-align:left;
  padding:2rem .4rem;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),padding-left .4s var(--ease);
}
a.fase:hover{background:var(--hover-warm);padding-left:1rem}

/* El número es la hora del amanecer de cada etapa */
.fase-n{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;
  font-family:var(--mono);font-size:12px;font-weight:500;
  background:var(--black);color:var(--white);border:1.5px solid var(--black);
}
.fase:nth-child(1) .fase-n{background:var(--g1);border-color:var(--g1);color:var(--white)}
.fase:nth-child(2) .fase-n{background:var(--g2);border-color:var(--g2);color:var(--white)}
.fase:nth-child(3) .fase-n{background:var(--g3);border-color:var(--black);color:var(--black)}
.fase:nth-child(4) .fase-n{background:var(--white);border-color:var(--black);color:var(--black)}

.fase-c{flex:1;min-width:0;padding-top:.15rem}
.fase-h{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.fase-t{font-family:var(--f-display);font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.fase-s{font-family:var(--f-serif);font-style:italic;font-size:1.05rem;color:var(--grey)}
.fase-d{font-size:15px;line-height:1.6;color:var(--grey);max-width:62ch;margin-top:.6rem}
.fase-m{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.fase-a{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);font-size:16px;color:var(--black);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
a.fase:hover .fase-a{background:var(--orange);border-color:var(--orange);color:var(--white);transform:translateX(3px)}
@media(max-width:700px){
  .fase{gap:1rem;padding:1.5rem .2rem}
  .fase-n{width:36px;height:36px;font-size:11px}
  .fase-a{display:none}
}

/* ══════ LISTA DE PERFILES ══════ */
.pfl{border-top:var(--borde)}
.pfl-i{
  position:relative;display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  padding:1.2rem .4rem;border-bottom:1px solid var(--line);transition:background .25s var(--ease),padding-left .35s var(--ease);
}
.pfl-i:hover{background:var(--hover-warm);padding-left:.9rem}
.pfl-i.on{box-shadow:inset 3px 0 0 var(--orange)}
.pfl-av{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:14px;font-weight:800}
.pfl-c{flex:1;min-width:0}
.pfl-n{font-family:var(--f-display);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;display:block;overflow:hidden;text-overflow:ellipsis}
.pfl-m{font-family:var(--mono);font-size:11px;color:var(--grey);display:block;margin-top:.25rem}
.pfl-a{display:flex;gap:.4rem;flex-shrink:0}

/* ══════ PIEZAS DE LOS EJERCICIOS ══════
   La hoja, el cronómetro, la navegación entre pasos y la lectura final
   son las mismas en todas las etapas. */

/* Durante la sesión desaparece todo lo que distrae */
body.enfoque .hero,
body.enfoque .ctrl,
body.enfoque .ftr,
body.enfoque #avisoHueco,
body.enfoque .inst{display:none}
body.enfoque main{padding-top:5vh}

/* ── Navegación entre pasos ── */
.pasos-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:3vh}
.nav-b{
  display:inline-flex;align-items:center;height:34px;padding:0 .95rem;border-radius:999px;border:1.5px solid var(--line);
  font-family:var(--f-display);font-size:.84rem;font-weight:600;letter-spacing:-.01em;color:var(--black);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.nav-b:hover:not(:disabled){border-color:var(--black);background:var(--black);color:var(--white)}
.nav-b:disabled{opacity:.35;cursor:not-allowed}
.puntos{display:flex;gap:6px;flex:1;flex-wrap:wrap;align-items:center}
.punto{
  display:block;width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--grey-dark);background:none;
  transition:background .25s,border-color .25s,transform .3s var(--ease);
}
button.punto:hover{border-color:var(--black);transform:scale(1.25)}
.punto.lleno{background:var(--black);border-color:var(--black)}
.punto.on{background:var(--orange);border-color:var(--orange);transform:scale(1.35)}

.paso-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.paso-n{font-family:var(--mono);font-size:12px;color:var(--grey)}
.paso-n::before{content:'— ';color:var(--orange)}

/* ── Qué tachar ── */
.quita{border:var(--borde);border-left:3px solid var(--orange);background:var(--white);padding:1.1rem 1.3rem;margin-top:1.8rem;max-width:62ch}
.quita-l{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:.5rem}
.quita p{font-size:15px;line-height:1.55;color:var(--black)}

/* ── Hoja de escritura ──
   Una hoja en blanco con borde de marca. El foco se pinta en naranja. */
.hoja{position:relative;margin-top:2.2rem}
.hoja-et{
  position:absolute;top:-.6rem;right:1rem;z-index:1;background:var(--white);padding:0 .5rem;
  font-family:var(--mono);font-size:10.5px;color:var(--grey);
}
.hoja-et.est{left:1rem;right:auto}
.hoja textarea,#area,.ik-campo textarea{
  width:100%;min-height:240px;resize:vertical;background:var(--white);border:var(--borde);padding:1.5rem;
  font-family:var(--f-text);font-size:17px;line-height:1.7;color:var(--black);outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.hoja textarea:focus,#area:focus,.ik-campo textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,102,0,.14)}
.hoja textarea::placeholder,#area::placeholder,.ik-campo textarea::placeholder{color:var(--grey);font-family:var(--f-serif);font-style:italic}

/* ── Campos de lista ── */
.campos{position:relative;border:var(--borde);padding:1.2rem 1.3rem 1rem;margin-top:2.2rem;max-width:580px}
.campo-f{display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--line)}
.campo-f:last-of-type{border-bottom:none}
.campo-f:focus-within{border-bottom-color:var(--orange)}
.campo-n{font-family:var(--mono);font-size:11px;color:var(--accent-ink);flex-shrink:0;width:22px}
.campo-i{flex:1;min-width:0;border:none;outline:none;background:none;padding:.85rem 0;font-size:16px}
.campo-i::placeholder{color:var(--grey);font-family:var(--f-serif);font-style:italic}
.campo-x{font-size:17px;color:var(--grey);width:28px;flex-shrink:0;transition:color .2s}
.campo-x:hover{color:var(--danger)}
.campo-add{margin-top:.9rem;font-family:var(--f-display);font-size:.88rem;font-weight:600;color:var(--black);transition:color .2s}
.campo-add:hover{color:var(--accent-ink)}

/* ── Cronómetro: orientativo, nunca bloquea ── */
.crono{display:flex;align-items:center;gap:1.2rem;margin-top:1rem}
.crono-b{flex:1;height:4px;border-radius:999px;background:var(--paper);position:relative;overflow:hidden}
.crono-b i{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--grad-h);transition:width 1s linear;display:block}
.crono-t{font-family:var(--mono);font-size:13px;color:var(--grey);min-width:3.4rem;text-align:right;font-variant-numeric:tabular-nums}
.crono-t.fin{color:var(--accent-ink);font-weight:500}
.crono-nota{font-size:13px;line-height:1.55;color:var(--grey);max-width:60ch;margin-top:.7rem}

/* ── Avisos dentro de la hoja ── */
.alerta{margin-top:1rem;padding:.9rem 1.2rem;border:1.5px solid var(--orange);background:var(--hover-warm);font-size:14px;line-height:1.55;color:var(--black);max-width:60ch}
.alerta b{color:var(--accent-ink);font-weight:700}

/* ── Sugerencias ── */
.sugs{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.1rem;max-width:64ch}
.sugs-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.sugs-l{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.sugs-x{font-family:var(--f-display);font-size:.84rem;font-weight:600;color:var(--grey);transition:color .2s}
.sugs-x:hover{color:var(--accent-ink)}
.sugs ul{list-style:none}
.sugs li{position:relative;padding:.5rem 0 .5rem 1.4rem;font-size:15px;line-height:1.55;color:var(--grey)}
.sugs li::before{content:'—';position:absolute;left:0;color:var(--orange)}

.pie{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:2.2rem;flex-wrap:wrap}
.cuenta{font-family:var(--mono);font-size:11.5px;color:var(--grey)}

/* ── Lectura de una versión ── */
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(1.2rem,2.4vw,2rem);margin-top:1.6rem}
.card{border-top:var(--borde);padding-top:1rem}
.card h4{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-bottom:.6rem}
.card p{font-size:15px;line-height:1.7;white-space:pre-wrap}
.card p.vacia{color:var(--grey);font-family:var(--f-serif);font-style:italic}

/* Lo que sale al cruzar las hojas: papel y señal naranja */
.hallazgo{border-left:3px solid var(--orange);background:var(--paper);padding:1.4rem 1.6rem;margin-bottom:.9rem;max-width:72ch}
.hallazgo h4{font-family:var(--f-display);font-size:1.1rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:.5rem}
.hallazgo p{font-size:15px;line-height:1.6;color:var(--grey)}
.hallazgo b{font-weight:700;color:var(--black)}

/* El cierre: la voz humana, en Lora sobre papel crema */
.cierre{border:var(--borde);border-left:3px solid var(--orange);background:var(--cream-note);padding:1.6rem 1.8rem;margin-top:3rem;max-width:64ch}
.cierre h4{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.9rem}
.cierre p{font-family:var(--f-serif);font-style:italic;font-size:1.15rem;line-height:1.5;color:var(--black);margin-bottom:1rem}
.cierre p:last-child{margin-bottom:0}
.cierre b{font-weight:500;color:var(--black)}

/* ── Selectores en pastilla (modos, filtros, ajustes) ── */
.modos{display:flex;gap:.3rem;flex-wrap:wrap}
.cfg-o{display:flex;gap:.35rem;flex-wrap:wrap;flex:1}
.modo,.sopt,.cfg-b{
  display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .9rem;border-radius:999px;
  border:1.5px solid var(--line);font-family:var(--f-display);font-size:.84rem;font-weight:600;letter-spacing:-.01em;
  color:var(--grey);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.modo:hover,.sopt:hover,.cfg-b:hover{border-color:var(--black);color:var(--black)}
.modo.on,.sopt.on,.cfg-b.on{background:var(--black);color:var(--white);border-color:var(--black)}
.sopt em{font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.65}

@media(max-width:700px){
  .pasos-nav{gap:.6rem}
  .nav-b{height:32px;padding:0 .75rem;font-size:.8rem}
  .hoja textarea,#area{padding:1.1rem;min-height:200px;font-size:16px}
}

/* ══════ PORTADA DE CADA EJERCICIO ══════
   El estudio a la izquierda; a la derecha, la hora de la etapa en grande
   sobre su color del amanecer: noche, fuego, mañana, claridad. */
.ej-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:0;min-height:min(78svh,760px)}
.ej-hero-t{padding:clamp(48px,9vh,110px) var(--pad-x) clamp(36px,6vh,64px);display:flex;flex-direction:column;justify-content:center}
.ej-hero h1{max-width:18ch;font-size:clamp(2.2rem,4.6vw,4.2rem)}
.ej-ruta{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-bottom:2rem;font-family:var(--mono);font-size:12px;color:var(--grey)}
.ej-ruta a{transition:color .2s}
.ej-ruta a:hover{color:var(--black)}
.ej-ruta i{font-style:normal;color:var(--orange)}
.ej-ruta b{font-weight:500;color:var(--black)}
.ej-ruta .ext{margin-left:.15rem}
.ej-datos{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin-top:2.4rem;border-top:var(--borde)}
.ej-datos > span{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1.6rem .2rem 0;font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.ej-datos > span + span{padding-left:1.6rem;border-left:1px solid var(--line)}
.ej-datos i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:0;color:var(--grey)}
.ej-datos b{display:flex;align-items:center;min-height:24px}

/* El panel de la hora */
.ej-hora{
  position:relative;overflow:hidden;isolation:isolate;border-left:var(--borde);
  padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;color:var(--dia);
}
.ej-hora::before{content:'';position:absolute;inset:0;z-index:-1;background-image:var(--grano);background-size:180px;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.ej-hero.h-1 .ej-hora{background:radial-gradient(120% 80% at 50% 118%,var(--g1) 0%,#4A1010 42%,var(--noche) 78%)}
.ej-hero.h-2 .ej-hora{background:radial-gradient(130% 90% at 50% 112%,var(--g3) 0%,var(--g2) 32%,var(--g1) 72%,var(--noche) 115%)}
.ej-hero.h-3 .ej-hora{background:linear-gradient(180deg,var(--g2) 0%,#FFB04D 38%,var(--g3) 82%);color:var(--noche)}
.ej-hero.h-4 .ej-hora{background:radial-gradient(110% 80% at 50% 105%,var(--g3) 0%,#FFF8DD 45%,var(--dia) 80%);color:var(--noche)}
.ej-hora-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--mono);font-size:12px}
.ej-cod{padding:.25rem .55rem;border:1.5px solid currentColor;border-radius:3px}
.ej-momento{font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.ej-num{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.08em;line-height:.74;font-variant-numeric:tabular-nums;
  font-size:clamp(8rem,17vw,15rem);margin-top:auto;padding-top:2rem;margin-left:-.05em;
}
.ej-sub{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.035em;line-height:1;margin-top:.6rem;filter:url(#spray)}
.ej-sub i{font-style:inherit;color:var(--orange)}
.ej-hero.h-2 .ej-sub i{color:var(--g3)}
.ej-pasos{list-style:none;margin-top:1.6rem;border-top:1.5px solid currentColor}
.ej-pasos li{display:flex;gap:.8rem;padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:-.01em}
.ej-pasos li span{font-family:var(--mono);font-weight:400;font-size:11px;opacity:.7;padding-top:.15rem}
.ej-mas{align-self:flex-start;margin-top:1.2rem;height:38px;display:inline-flex;align-items:center;padding:0 1rem;border-radius:999px;border:1.5px solid currentColor;font-family:var(--f-display);font-weight:600;font-size:.86rem;transition:background .3s var(--ease),color .3s var(--ease)}
.ej-hero.h-1 .ej-mas:hover,.ej-hero.h-2 .ej-mas:hover{background:var(--dia);color:var(--noche)}
.ej-hero.h-3 .ej-mas:hover,.ej-hero.h-4 .ej-mas:hover{background:var(--noche);color:var(--dia)}

@media(max-width:900px){
  .ej-hero{grid-template-columns:1fr;min-height:0}
  .ej-hora{border-left:none;border-top:var(--borde);min-height:0}
  .ej-num{font-size:clamp(6rem,30vw,9rem);padding-top:1.4rem}
  .ej-pasos,.ej-mas{display:none}
  .ej-datos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ej-datos > span{padding-right:.8rem;font-size:.92rem}
  .ej-datos > span + span{padding-left:.8rem}
}

/* ══════ ANTERIOR Y SIGUIENTE ══════ */
.ej-sig{display:grid;grid-template-columns:1fr 1fr;border-top:var(--borde)}
.ej-sig-a{
  display:flex;flex-direction:column;gap:.5rem;padding:clamp(28px,5vh,56px) var(--pad-x);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.ej-sig-a + .ej-sig-a{border-left:var(--borde)}
.ej-sig-s{text-align:right;align-items:flex-end}
.ej-sig-d{font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.ej-sig-n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.05em;line-height:1}
.ej-sig-m{font-family:var(--mono);font-size:12px;color:var(--grey)}
.ej-sig-a:hover{background:var(--c,var(--black));color:var(--cx,var(--white))}
.ej-sig-a:hover .ej-sig-d,.ej-sig-a:hover .ej-sig-m{color:inherit;opacity:.8}
.ej-sig-cat:hover{background:var(--black);color:var(--white)}
body.enfoque .ej-sig{display:none}
@media(max-width:640px){.ej-sig{grid-template-columns:1fr}.ej-sig-a + .ej-sig-a{border-left:none;border-top:var(--borde)}}

/* ══════ TUS VERSIONES ══════
   Una tarjeta por versión: estado, nombre, fecha y lo que lleva. Lo que
   se puede hacer, a la derecha; renombrar y borrar, dentro de «⋯». */
.vl{margin-top:clamp(32px,5vh,56px)}
.vl-cab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:var(--borde);padding-bottom:.6rem}
.vl-cab .slabel{margin:0}
.vl-n{font-family:var(--mono);font-size:11.5px;color:var(--grey)}
.vl-lista{list-style:none;display:grid;gap:.6rem;margin-top:.9rem}
.vl-v{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;border:var(--borde);background:var(--white);transition:background .2s}
.vl-v:hover{background:var(--hover-warm)}
.vl-v.curso{border-style:dashed}
.vl-est{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--noche);color:var(--dia);font-size:15px;
}
.vl-v.curso .vl-est{background:conic-gradient(var(--orange) 0 50%,var(--paper) 50% 100%);box-shadow:inset 0 0 0 1.5px var(--noche)}
.vl-c{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:.2rem}
.vl-c b{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;line-height:1.15}
.vl-c em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--grey);display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem}
.vl-tag{font-style:normal;font-family:var(--f-display);font-weight:700;font-size:.72rem;padding:.08rem .5rem;border-radius:999px;border:1.5px solid var(--orange);color:var(--accent-ink)}
.vl-tag.ok{border-color:var(--black);color:var(--black)}
.vl-a{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.vl-b{height:38px !important;padding:0 1rem !important;font-size:.86rem !important}
.vl-ia{
  display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 .8rem;border-radius:999px;border:1.5px solid var(--line);
  font-family:var(--f-display);font-weight:600;font-size:.84rem;transition:border-color .2s;
}
.vl-ia:hover{border-color:var(--black)}
.vl-ia svg{width:15px;height:15px;fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vl-mas{position:relative}
.vl-mas summary{
  list-style:none;cursor:pointer;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;transition:border-color .2s;
}
.vl-mas summary::-webkit-details-marker{display:none}
.vl-mas summary:hover,.vl-mas[open] summary{border-color:var(--black)}
.vl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:200px;background:var(--white);border:var(--borde);box-shadow:5px 5px 0 var(--black);display:flex;flex-direction:column}
.vl-menu button{text-align:left;padding:.7rem .9rem;font-family:var(--f-display);font-weight:600;font-size:.9rem;transition:background .2s}
.vl-menu button:hover{background:var(--hover-warm)}
.vl-menu button + button{border-top:1px solid var(--line)}
.vl-menu .dgr{color:var(--danger)}
.vl-nota{margin-top:.9rem;font-size:13.5px;color:var(--grey)}
.vl-nota a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){
  .vl-v{flex-wrap:wrap;gap:.7rem}
  .vl-est{width:30px;height:30px;font-size:13px}
  .vl-c{flex:1 1 calc(100% - 46px)}
  .vl-a{width:100%;justify-content:flex-end}
}

/* Las reglas, plegables */
.reglas{margin-top:clamp(32px,5vh,56px);border-top:var(--borde)}
.reglas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:.9rem 0}
.reglas summary::-webkit-details-marker{display:none}
.reglas summary .slabel{margin:0}
.reglas summary i{font-style:normal;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.reglas[open] summary i{transform:rotate(45deg)}

/* ══════ ESCRIBIR EN MÓVIL ══════
   La hoja tiene que verse nada más entrar: la lista de pasos se esconde
   (los puntos y «Hoja 1 de 14» ya dicen dónde estás). */
@media(max-width:900px){
  .muro{display:none}
  .ses{display:block}
  .pasos-nav{position:sticky;top:var(--hdr-h);z-index:20;background:var(--white);padding-top:.7rem;margin-top:-.7rem}
  .puntos{gap:5px}
  .punto{width:8px;height:8px}
}

/* Ikigai en móvil: el diagrama se queda arriba, pequeño, mientras escribes */
@media(max-width:1000px){
  .ik-diagrama{position:sticky !important;top:var(--hdr-h);z-index:15;background:var(--white);max-width:none !important;margin:0 calc(-1 * var(--pad-x)) !important;padding:.4rem var(--pad-x);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem}
  .ik-diagrama svg{width:118px !important;flex-shrink:0}
  .ik-diagrama .ik-frase{margin-top:0;flex:1;font-size:.92rem;padding:.6rem .8rem;max-height:110px;overflow:auto}
}

/* ══════ CABECERA COMPACTA ══════
   Si ya has empezado el ejercicio, la portada se encoge para llegar antes a
   lo tuyo. «Ver la introducción» la vuelve a abrir. */
.ej-hero.compacta{min-height:0}
.ej-hero.compacta .ej-hero-t{padding-top:clamp(28px,4vh,44px);padding-bottom:clamp(24px,3vh,36px)}
.ej-hero.compacta h1{font-size:clamp(2rem,3.6vw,3rem)}
.ej-hero.compacta h1 span,.ej-hero.compacta .ej-hero-t > p,.ej-hero.compacta .ej-pasos,.ej-hero.compacta .ej-mas{display:none}
.ej-hero.compacta .ej-datos{margin-top:1.4rem}
.ej-hero.compacta .ej-num{font-size:clamp(5rem,9vw,7.5rem);padding-top:1rem}
.ej-hero.compacta .ej-sub{font-size:clamp(1.4rem,2.4vw,2rem)}
.ej-intro{
  align-self:flex-start;margin-top:1rem;font-family:var(--f-display);font-weight:600;font-size:.86rem;
  color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;
}