/* ── portada b2c — uDocz para estudiantes ──
   Una sola idea: en Doc, el modo no es un ajuste escondido, es un turno.
   "Aprender un tema" entra al hilo como mensaje del estudiante y la
   respuesta es una lección armada, con su temario a la vista.

   Retrata producto: tokens reales de uDocz (producto premium, indigo),
   copiados y acotados aquí. La portada es pública y no puede depender de
   nada bajo /casos/. Doc sigue el tema del sitio, como en la demo 03 del
   caso; por eso existe el bloque dark.

   Lienzo de 44 × 28 em. La cabecera del caso muestra los 22 de arriba:
   barra, turno, respuesta y lección. El composer vive debajo y solo se ve
   en la miniatura. Nivel 1 (1.5em) se lee en ambos tamaños; nivel 2
   (0.72 a 0.85em) es textura en la miniatura y texto en la cabecera. */
.pt-b2c{
  --b-page:#F8FAFC;--b-def:#FFFFFF;--b-sub:#F1F5F9;--b-line:#E2E8F0;
  --b-tx:#0F172A;--b-tx2:#475569;--b-tx3:#94A3B8;
  --b-brand:#740AFF;--b-on:#FFFFFF;--b-soft:#E8D6FF;--b-strong:#370691;
  background:var(--b-page);color:var(--b-tx);
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.2;text-align:left;
}
[data-theme="dark"] .pt-b2c{
  --b-page:#0B0F19;--b-def:#131826;--b-sub:#1B2233;--b-line:#2A3349;
  --b-tx:#F1F5F9;--b-tx2:#CBD5E1;--b-tx3:#94A3B8;
  --b-brand:#AE70FF;--b-on:#250466;--b-soft:#211B3A;--b-strong:#AE70FF;
}
.pt-b2c *{box-sizing:border-box}
.pt-b2c svg{display:block}
.pt-b2c .d{font-family:'Montserrat','Rubik',-apple-system,BlinkMacSystemFont,sans-serif}

/* barra: quién habla */
.pt-b2c .bar{
  position:absolute;left:0;right:0;top:0;height:3.4em;padding:0 2em;
  display:flex;align-items:center;gap:.7em;
  background:var(--b-def);border-bottom:.06em solid var(--b-line);
}
.pt-b2c .mk{
  width:2em;height:2em;border-radius:.55em;flex:0 0 auto;
  display:grid;place-items:center;background:var(--b-brand);color:var(--b-on);
}
.pt-b2c .mk svg{width:1.2em;height:1.2em}
.pt-b2c .nm{font-size:1.5em;font-weight:700;letter-spacing:-.02em}
.pt-b2c .rol{font-size:.8em;color:var(--b-tx2);margin-top:.35em}
.pt-b2c .nuevo{
  margin-left:auto;font-size:.76em;font-weight:500;color:var(--b-tx2);
  border:.08em solid var(--b-line);border-radius:99em;padding:.5em 1.1em;
}

/* el turno: el modo elegido, dicho por el estudiante */
.pt-b2c .yo{
  position:absolute;right:2em;top:4.3em;height:3.1em;padding:0 1.25em 0 1em;
  display:flex;align-items:center;gap:.6em;
  background:var(--b-soft);color:var(--b-strong);
  border-radius:1.1em 1.1em .35em 1.1em;
}
.pt-b2c .yo svg{width:1.55em;height:1.55em;flex:0 0 auto}
.pt-b2c .yo b{font-size:1.5em;font-weight:600;letter-spacing:-.015em;white-space:nowrap}

/* la respuesta: prosa sin globo, como en el producto */
/* la caja se posiciona en em del lienzo; la fuente más chica va en el
   texto de adentro, para que top y left no se encojan con ella */
.pt-b2c .doc{
  position:absolute;left:2em;top:8.1em;width:27.2em;
  color:var(--b-tx2);
}
.pt-b2c .doc>span{display:block;font-size:.85em;line-height:1.5}
.pt-b2c .doc b{color:var(--b-tx);font-weight:600}

/* la lección: la card que Doc entrega, con el temario armado */
.pt-b2c .lec{
  position:absolute;left:2em;right:2em;top:11.2em;height:9.4em;
  display:flex;background:var(--b-def);
  border:.06em solid var(--b-line);border-radius:1em;
}
.pt-b2c .lec-a{
  flex:0 0 16.2em;padding:1em 1.1em;display:flex;flex-direction:column;
  border-right:.06em solid var(--b-line);
}
.pt-b2c .lec-ey{font-size:.58em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--b-strong)}
.pt-b2c .lec-t{font-size:1.5em;font-weight:700;letter-spacing:-.025em;margin-top:.3em;white-space:nowrap}
.pt-b2c .lec-s{font-size:.72em;color:var(--b-tx2);margin-top:.5em}
.pt-b2c .lec-go{
  margin-top:auto;align-self:flex-start;
  font-size:.8em;font-weight:600;color:var(--b-on);background:var(--b-brand);
  border-radius:99em;padding:.62em 1.3em;
}
.pt-b2c .lec-b{
  flex:1;min-width:0;padding:.85em 1.2em;
  display:flex;flex-direction:column;justify-content:space-between;
}
.pt-b2c .paso{display:flex;align-items:center;gap:.7em;min-width:0}
.pt-b2c .paso i{
  flex:0 0 auto;width:1.05em;height:1.05em;border-radius:50%;
  display:grid;place-items:center;font-style:normal;
  background:var(--b-sub);color:var(--b-tx2);
}
.pt-b2c .paso i span{font-size:.58em;font-weight:600}
.pt-b2c .paso em{
  font-style:normal;font-size:.74em;color:var(--b-tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pt-b2c .paso u{
  margin-left:auto;flex:0 0 auto;text-decoration:none;
  font-size:.56em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--b-tx3);
}
/* el primer paso es donde se empieza: lleva la marca */
.pt-b2c .paso.es-1 i{background:var(--b-brand);color:var(--b-on)}
.pt-b2c .paso.es-1 em{color:var(--b-tx);font-weight:500}

/* composer: solo existe en la miniatura (queda bajo el corte de la cabecera) */
.pt-b2c .comp{
  position:absolute;left:2em;right:2em;top:22.3em;height:3.7em;padding:0 .6em 0 1.2em;
  display:flex;align-items:center;
  background:var(--b-def);border:.06em solid var(--b-line);border-radius:1em;
}
.pt-b2c .comp span{font-size:.8em;color:var(--b-tx3)}
.pt-b2c .comp i{
  margin-left:auto;width:2.3em;height:2.3em;border-radius:50%;
  display:grid;place-items:center;background:var(--b-brand);color:var(--b-on);
}
.pt-b2c .comp i svg{width:1.15em;height:1.15em}

/* ── el gesto: el modo sube al hilo como turno y la lección se arma ──
   Estado base = escena completa. .is-act la re-dibuja una vez: sube el
   turno, responde Doc, llega la card y el temario se arma paso a paso.
   Termina a los 0,85s. Solo transform y opacidad. */
@keyframes pt-b2c-sube{from{opacity:0;transform:translateY(1.4em)}}
@keyframes pt-b2c-entra{from{opacity:0;transform:translateY(.6em)}}
@keyframes pt-b2c-paso{from{opacity:0;transform:translateX(-.6em)}}
.portada.is-act .pt-b2c .yo{animation:pt-b2c-sube var(--t-entrada) var(--e-entrada) backwards}
.portada.is-act .pt-b2c .doc{animation:pt-b2c-entra var(--t-entrada) var(--e-entrada) .14s backwards}
.portada.is-act .pt-b2c .lec{animation:pt-b2c-entra var(--t-entrada) var(--e-entrada) .2s backwards}
.portada.is-act .pt-b2c .paso{animation:pt-b2c-paso var(--t-estado) var(--e-entrada) backwards}
.portada.is-act .pt-b2c .paso:nth-child(1){animation-delay:.35s}
.portada.is-act .pt-b2c .paso:nth-child(2){animation-delay:.4s}
.portada.is-act .pt-b2c .paso:nth-child(3){animation-delay:.45s}
.portada.is-act .pt-b2c .paso:nth-child(4){animation-delay:.5s}
.portada.is-act .pt-b2c .paso:nth-child(5){animation-delay:.55s}
.portada.is-act .pt-b2c .paso:nth-child(6){animation-delay:.6s}