/* ── portadas/prof.css — la escena del caso 03, Suite Profesores ──
   Una sola idea: el producto vive dentro de la pantalla de otro. El LMS
   (rail, navegación del curso, breadcrumb) rodea por dos lados un marco
   que no controlo, y adentro está el home rediseñado. El marco y su
   medida van en sol: es la voz del portafolio señalando la restricción.

   Lienzo de 44 × 28 em (ver .portada en base.css). Los contenedores no
   declaran font-size: todo lo que mide cajas está en em del lienzo. Solo
   las hojas de texto (span) cambian de tamaño.
   Nivel 1 (se lee en la miniatura): el saludo y la medida.
   Nivel 2 (textura en la miniatura, legible en la portada): el resto.

   Todas las clases llevan prefijo pp-: la escena convive con el CSS de las
   demos del caso y con las otras portadas en la home, y un nombre genérico
   (.mk, .on) lo pisa cualquiera.

   Archivo público: no depende de nada bajo /casos/. Los tokens de uDocz
   (producto profesores) están copiados aquí, acotados a .pt-prof. */

.pt-prof{
  /* cromo del LMS: la misma familia de neutros fríos del caso */
  --l-bg:#E2E8F0; --l-rail:#334155; --l-ico:rgba(255,255,255,.38);
  --l-line:#CBD5E1; --l-text:#64748B; --l-on:#334155;
  /* uds-v2, producto profesores (brand = blue-900, accent = blue-500) */
  --p-page:#F8FAFC; --p-surf:#FFFFFF; --p-subtle:#F1F5F9; --p-border:#E2E8F0;
  --p-text:#0F172A; --p-text-2:#475569; --p-text-3:#94A3B8;
  --p-brand:#10003F; --p-on-brand:#FFFFFF; --p-brand-subtle:#F1F6FF;
  --p-accent-subtle:#F1F6FF; --p-accent-text:#0322C9;
  --p-sans:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --p-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  background:var(--l-bg);color:var(--p-text);
  font-family:var(--p-sans);line-height:1.2;
  white-space:nowrap;user-select:none;
}
[data-theme="dark"] .pt-prof{
  --l-bg:#1E293B; --l-rail:#334155; --l-ico:rgba(255,255,255,.3);
  --l-line:#334155; --l-text:#94A3B8; --l-on:#E2E8F0;
  --p-page:#0B0F19; --p-surf:#131826; --p-subtle:#1B2233; --p-border:#2A3349;
  --p-text:#F1F5F9; --p-text-2:#CBD5E1; --p-text-3:#94A3B8;
  --p-brand:#8BB2FF; --p-on-brand:#10003F; --p-brand-subtle:rgba(88,144,255,.12);
  --p-accent-subtle:rgba(88,144,255,.12); --p-accent-text:#8BB2FF;
}
.pt-prof span,.pt-prof b{display:block}

/* ── el LMS: no es mío, no se mueve ── */
.pt-prof .pp-rail{
  position:absolute;left:0;top:0;bottom:0;width:2.4em;background:var(--l-rail);
  display:flex;flex-direction:column;align-items:center;gap:1em;padding-top:.9em;
}
.pt-prof .pp-rail i{width:.95em;height:.95em;border-radius:.2em;background:var(--l-ico)}
.pt-prof .pp-nav{
  position:absolute;left:2.4em;top:0;bottom:0;width:7.2em;
  border-right:.06em solid var(--l-line);
  padding:.85em .8em;display:flex;flex-direction:column;gap:.8em;
}
.pt-prof .pp-nav-c span{font-size:.5em;letter-spacing:.08em;text-transform:uppercase;color:var(--l-text)}
.pt-prof .pp-nav-i{position:relative}
.pt-prof .pp-nav-i span{font-size:.62em;color:var(--l-text)}
.pt-prof .pp-nav-i.pp-on span{color:var(--l-on);font-weight:600}
.pt-prof .pp-nav-i.pp-on::before{
  content:"";position:absolute;left:-.8em;top:-.2em;bottom:-.2em;width:.24em;background:var(--sol);
}
.pt-prof .pp-crumb{
  position:absolute;left:9.6em;right:0;top:0;height:2.4em;
  border-bottom:.06em solid var(--l-line);
  display:flex;align-items:center;gap:.5em;padding:0 .8em;
}
.pt-prof .pp-crumb span{font-size:.58em;color:var(--l-text)}
.pt-prof .pp-crumb span.pp-on{color:var(--l-on);font-weight:600}

/* ── el marco: lo único que me toca. Sale del lienzo por abajo ── */
.pt-prof .pp-marco{
  position:absolute;left:10.4em;top:3.2em;width:32.8em;height:27em;
  background:var(--p-page);border:.12em dashed var(--sol);overflow:hidden;
}
/* la medida cuelga del borde superior del marco, sobre la franja del
   breadcrumb: señala el marco sin tapar nada del producto */
.pt-prof .pp-medida{position:absolute;right:1.9em;top:1.45em;z-index:2;transform-origin:100% 100%}
.pt-prof .pp-medida span{
  font-family:var(--mono);font-size:1.4em;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  background:var(--sol);color:var(--sol-tinta);padding:.22em .45em;
}

/* ── el producto adentro ── */
.pt-prof .pp-top{
  height:2.2em;background:var(--p-surf);border-bottom:.06em solid var(--p-border);
  display:flex;align-items:center;gap:1.1em;padding:0 1.4em;
}
.pt-prof .pp-top span{font-size:.58em;color:var(--p-text-2)}
.pt-prof .pp-top span.pp-on{color:var(--p-text);font-weight:600}
.pt-prof .pp-top span.pp-mk{font-family:var(--p-display);font-size:.74em;font-weight:700;color:var(--p-text);margin-right:.5em}
.pt-prof .pp-top i{margin-left:auto;width:1.1em;height:1.1em;border-radius:50%;background:var(--p-brand-subtle);border:.06em solid var(--p-border)}

.pt-prof .pp-body{padding:1em 1.4em 0}
.pt-prof .pp-hola span{
  font-family:var(--p-display);font-size:1.9em;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:var(--p-text);
}
.pt-prof .pp-ctx{margin-top:.25em;display:flex;gap:.3em}
.pt-prof .pp-ctx span{font-size:.68em;color:var(--p-text-2)}
.pt-prof .pp-ctx span.pp-c{color:var(--p-text);font-weight:600}

.pt-prof .pp-hero{
  margin-top:.8em;padding:.7em;border-radius:.55em;
  background:var(--p-surf);border:.06em solid var(--p-border);
}
.pt-prof .pp-in{display:flex;gap:.6em}
.pt-prof .pp-ph{
  flex:1;height:2.2em;border-radius:.45em;background:var(--p-subtle);
  display:flex;align-items:center;padding:0 .8em;
}
.pt-prof .pp-ph span{font-size:.74em;color:var(--p-text-3)}
.pt-prof .pp-go{
  height:2.2em;border-radius:.45em;background:var(--p-brand);
  display:flex;align-items:center;padding:0 1em;
}
.pt-prof .pp-go span{font-size:.68em;font-weight:600;color:var(--p-on-brand)}
.pt-prof .pp-chips{margin-top:.6em;display:flex;gap:.45em}
.pt-prof .pp-chips div{
  height:1.3em;border-radius:1em;border:.06em solid var(--p-border);
  display:flex;align-items:center;padding:0 .6em;
}
.pt-prof .pp-chips span{font-size:.56em;color:var(--p-text-2)}

.pt-prof .pp-av{margin-top:.7em;display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.pt-prof .pp-av div{
  padding:.5em .7em;border-radius:.45em;
  background:var(--p-surf);border:.06em solid var(--p-border);
}
.pt-prof .pp-av .pp-k{font-size:.46em;letter-spacing:.06em;text-transform:uppercase;color:var(--p-text-3)}
.pt-prof .pp-av .pp-v{font-size:.66em;color:var(--p-text);margin-top:.3em}

/* las nueve del home de hoy, tres con su Beta */
.pt-prof .pp-grid{margin-top:.7em;display:grid;grid-template-columns:repeat(3,1fr);gap:.55em}
.pt-prof .pp-card{
  height:2.4em;min-width:0;border-radius:.45em;
  background:var(--p-surf);border:.06em solid var(--p-border);
  display:flex;align-items:center;gap:.4em;padding:0 .5em;
}
.pt-prof .pp-card i{flex:0 0 .9em;height:.9em;border-radius:.28em;background:var(--p-brand-subtle)}
.pt-prof .pp-card span{font-size:.56em;color:var(--p-text)}
.pt-prof .pp-card span.pp-beta{
  font-size:.42em;font-weight:500;line-height:1;margin-left:-.2em;
  padding:.3em .6em;border-radius:2em;
  background:var(--p-accent-subtle);color:var(--p-accent-text);
}

/* ── el gesto: el producto se asienta dentro del marco y el marco se mide.
   El LMS no participa. Estado base = escena completa; .is-act la re-dibuja
   una vez. Último fotograma a los 850ms. ── */
.portada.is-act .pt-prof .pp-e{
  animation:pt-prof-entra var(--t-entrada) var(--e-entrada) calc(var(--i)*50ms) backwards;
}
.portada.is-act .pt-prof .pp-medida{
  animation:pt-prof-sella var(--t-estado) var(--e-entrada) .6s backwards;
}
@keyframes pt-prof-entra{from{opacity:0;transform:translateY(.6em)}}
@keyframes pt-prof-sella{from{opacity:0;transform:scale(.7)}}