/* ── portadas/emc.css — escena del caso Eligiendo Mi Camino ──
   Una sola idea: el mapa del coach. «Tu camino en 8 pasos» con el
   «Estás aquí» en el paso 3, que es el que el caso usa para explicar la
   apuesta pedagógica. Retrata producto, así que lleva la paleta real de
   Orientación Vocacional (crema y naranja), copiada y acotada aquí: este
   archivo es público y no depende de nada bajo /casos/.

   Lienzo de 44 × 28 em. Los 22 em de arriba (cabecera del caso) contienen
   la escena completa: título, avance y los ocho pasos. Los 6 em de abajo
   solo se ven en la miniatura: el panel de datos país del mismo home.
   Nivel 1 de texto (se lee en la miniatura): el título y el porcentaje.
   Todo lo demás es nivel 2: textura a 352px, legible a 992px. */
.pt-emc{
  --e-mesa:#FDF8F1;--e-card:#fff;--e-bd:#F0E6D6;
  --e-tx:#1F1608;--e-tx2:#5A4A33;--e-tx3:#A08A66;
  --e-pista:#F3E8D2;--e-acc:#F08C00;--e-acc-tx:#fff;--e-acc-sub:#FFF8EC;
  --e-chip:#FDEBC8;--e-chip-tx:#B45309;
  --e-ok:#1F8A45;--e-ok-tx:#fff;--e-ok-bd:#B3D9BC;--e-ok-sub:#F7FBF8;
  --e-num:#F5EFE3;--e-num-tx:#8A7350;
  --e-uni:#7C3AED;--e-tec:#2563EB;
  --e-ln:max(1px,.07em);
  background:var(--e-mesa);color:var(--e-tx);
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.2;
}
/* dark: la misma piel cálido-oscura que usan las demos del coach */
[data-theme="dark"] .pt-emc{
  --e-mesa:#161210;--e-card:#221C16;--e-bd:#2E2620;
  --e-tx:#F5EFE3;--e-tx2:#C9BCA8;--e-tx3:#8A7B64;
  --e-pista:#2E2620;--e-acc:#F5B95C;--e-acc-tx:#2E1F08;--e-acc-sub:#2A2118;
  --e-chip:#3E2F16;--e-chip-tx:#F5B95C;
  --e-ok:#1F8A45;--e-ok-tx:#fff;--e-ok-bd:#1F5B37;--e-ok-sub:#17211A;
  --e-num:#2E2620;--e-num-tx:#B8A88C;
  --e-uni:#C4A5F5;--e-tec:#8BB2FF;
}
.pt-emc *{box-sizing:border-box;margin:0;padding:0}
.pt-emc b,.pt-emc i{font-style:normal;font-weight:inherit}

/* cabecera: título y avance (0 – 6.4 em) */
.pt-emc .e-top{
  position:absolute;left:2em;right:2em;top:1.7em;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1em;
}
.pt-emc .e-tt b{display:block;font-size:1.9em;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.pt-emc .e-tt i{display:block;margin-top:.55em;font-size:.78em;color:var(--e-tx3)}
.pt-emc .e-pct{font-size:1.9em;font-weight:800;line-height:1.05;color:var(--e-acc);font-variant-numeric:tabular-nums}
.pt-emc .e-bar{
  position:absolute;left:2em;right:2em;top:5.75em;height:.55em;
  border-radius:.3em;background:var(--e-pista);overflow:hidden;
}
.pt-emc .e-bar i{display:block;width:25%;height:100%;border-radius:inherit;background:var(--e-acc);transform-origin:left center}

/* el mapa: ocho pasos en 4 × 2 (7.2 – 20.9 em) */
.pt-emc .e-grid{
  position:absolute;left:2em;right:2em;top:7.2em;height:13.7em;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:.9em;
}
.pt-emc .e-s{
  position:relative;padding:.75em .65em;border-radius:.8em;
  background:var(--e-card);border:var(--e-ln) solid var(--e-bd);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;
  column-gap:.5em;row-gap:.5em;align-items:center;
}
.pt-emc .e-n{
  width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;
  background:var(--e-num);color:var(--e-num-tx);
}
.pt-emc .e-n b{font-size:.8em;font-weight:800;line-height:1}
.pt-emc .e-ses{font-size:.6em;color:var(--e-tx3);text-align:right;white-space:nowrap}
/* el nombre se ancla abajo: los ocho comparten línea de base por fila y
   ninguna card queda con aire muerto al pie */
.pt-emc .e-nom{grid-column:1 / -1;align-self:end;font-size:.78em;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--e-tx)}
.pt-emc .e-s[data-st="done"]{border-color:var(--e-ok-bd);background:var(--e-ok-sub)}
.pt-emc .e-s[data-st="done"] .e-n{background:var(--e-ok);color:var(--e-ok-tx)}
.pt-emc .e-s[data-st="cur"]{border-color:var(--e-acc);border-width:max(1.5px,.11em);background:var(--e-acc-sub)}
.pt-emc .e-s[data-st="cur"] .e-n{background:var(--e-acc);color:var(--e-acc-tx)}
/* lo que aún no toca se apaga con color sólido, no con opacidad */
.pt-emc .e-s[data-st="fut"] .e-nom{color:var(--e-tx3)}
.pt-emc .e-aqui{
  position:absolute;top:-.62em;left:.55em;padding:.28em .8em;border-radius:99em;
  background:var(--e-chip);color:var(--e-chip-tx);
  font-size:.55em;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}

/* panel de datos país (22.2 – 26.6 em): solo en la miniatura */
.pt-emc .e-dato{
  position:absolute;left:2em;right:2em;top:22.2em;height:4.4em;
  padding:.75em .9em;border-radius:.8em;
  background:var(--e-card);border:var(--e-ln) solid var(--e-bd);
  display:flex;flex-direction:column;justify-content:space-between;
}
.pt-emc .e-dt{display:flex;justify-content:space-between;gap:1em;font-size:.78em;font-weight:700}
.pt-emc .e-dt i{color:var(--e-tx3);font-weight:400}
.pt-emc .e-seg{display:flex;gap:.2em;height:.9em}
.pt-emc .e-seg i{display:block;height:100%;border-radius:.2em;background:var(--e-pista)}
.pt-emc .e-seg .u{width:21%;background:var(--e-uni)}
.pt-emc .e-seg .t{width:12%;background:var(--e-tec)}
.pt-emc .e-seg .r{flex:1}

/* ── motion: el año avanza una vez ──
   Estado base = escena completa. .is-act re-dibuja el avance: la barra se
   llena, los pasos hechos se sellan en orden y el «Estás aquí» cae sobre
   el paso 3. Solo transform y opacidad; termina a los 700 ms. */
.portada.is-act .pt-emc .e-bar i{animation:pt-emc-llena var(--t-entrada) var(--e-entrada) backwards}
.portada.is-act .pt-emc .e-s:not([data-st="fut"]) .e-n{animation:pt-emc-sello var(--t-estado) var(--e-entrada) backwards}
.portada.is-act .pt-emc .e-s:nth-child(1) .e-n{animation-delay:.12s}
.portada.is-act .pt-emc .e-s:nth-child(2) .e-n{animation-delay:.18s}
.portada.is-act .pt-emc .e-s:nth-child(3) .e-n{animation-delay:.24s}
.portada.is-act .pt-emc .e-aqui{animation:pt-emc-cae var(--t-entrada) var(--e-entrada) .25s backwards}
@keyframes pt-emc-llena{from{transform:scaleX(0)}}
@keyframes pt-emc-sello{from{opacity:0;transform:scale(.4)}}
@keyframes pt-emc-cae{from{opacity:0;transform:translateY(-.6em)}}