/* ═══════════════════════════════════════════════════════════════════════════
   PRONTO · TELÉFONO BLANCO DEL DEMO          capa aditiva · r59 · 2026-08-29
   ───────────────────────────────────────────────────────────────────────────
   El dueño pidió tres cosas para «Watch ProntoVoice in Action»: fuera el video
   de fondo, fondo oscuro liso, y la MISMA conversación de voz y chat metida en
   un teléfono blanco con el estilo de Pronto Chat.

   Esta hoja NO reescribe el demo. El motor de index.html sigue siendo el mismo
   y sigue escribiendo en #demoConv; aquí solo se le pone alrededor un chasis y
   se le cambia la ropa a las burbujas. Todo cuelga de `html.pdp-on`, que pone
   el JS: si el JS no carga, el demo se queda exactamente como estaba.
   ═══════════════════════════════════════════════════════════════════════════ */

html.pdp-on{
  --pdp-ink:#1c1917;        /* texto y burbuja del cliente */
  --pdp-cream:#fff7ed;      /* burbuja de la IA */
  --pdp-or:#f97316;
  --pdp-or-d:#ea580c;
  --pdp-line:#ececea;
  --pdp-w:296px;            /* ancho del cristal */
}

/* ── 1 · Fuera el telón de video. Lo inyectaba el módulo del cine3d; se
      desactivó en su origen, y esta regla es el cinturón por si vuelve. ── */
html.pdp-on #demo-section .cine-bg-demo,
html.pdp-on #demo-section > video{display:none!important}

/* ── 2 · La columna izquierda deja de ser una ventanita y pasa a centrar
      un teléfono. El fondo oscuro de la sección ya estaba en index.html. ── */
html.pdp-on .demo-phone{
  background:none;border:0;border-radius:0;backdrop-filter:none;
  overflow:visible;display:flex;justify-content:center;min-width:0}

/* la barra de semáforo del mockup viejo no pinta nada dentro de un teléfono */
html.pdp-on .demo-phone .d-bar{display:none}

/* ── 3 · El chasis ───────────────────────────────────────────────────────
   Borde naranja (el titanio de la referencia) → bisel negro → cristal. ── */
/* La sombra era de 70px de desenfoque sobre una caja de 318×611 y el cristal
   lleva dentro cosas animadas. En un teléfono cansado eso se repinta sin
   parar. Se recorta el desenfoque y se aísla el chasis con `contain`, para
   que lo que pase dentro no obligue a recalcular la página entera (r61). */
html.pdp-on .pdp-frame{
  position:relative;
  width:calc(var(--pdp-w) + 22px);max-width:100%;
  padding:3px;border-radius:52px;
  contain:layout paint;
  background:linear-gradient(150deg,#fdba74,#f97316 32%,#c2410c 68%,#fb923c);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
html.pdp-on .pdp-bezel{
  position:relative;border-radius:49px;padding:8px;
  background:linear-gradient(160deg,#18181b,#09090b 55%,#18181b)}
html.pdp-on .pdp-screen{
  position:relative;border-radius:42px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;min-height:0}

/* botones laterales, puro decorado */
html.pdp-on .pdp-frame::before,
html.pdp-on .pdp-frame::after{
  content:"";position:absolute;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#fb923c,#c2410c);opacity:.95}
html.pdp-on .pdp-frame::before{left:-2px;top:120px;height:52px}
html.pdp-on .pdp-frame::after{right:-2px;top:104px;height:78px}

/* isla dinámica */
html.pdp-on .pdp-island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:84px;height:23px;border-radius:999px;background:#09090b;z-index:4}

/* ── 4 · Barra de estado ── */
html.pdp-on .pdp-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 20px 5px;font-size:11px;font-weight:700;color:var(--pdp-ink);
  letter-spacing:.01em}
html.pdp-on .pdp-sig{display:flex;align-items:flex-end;gap:1.6px}
html.pdp-on .pdp-sig i{width:2.6px;border-radius:1px;background:var(--pdp-ink);display:block}
html.pdp-on .pdp-right{display:flex;align-items:center;gap:5px}
html.pdp-on .pdp-batt{
  width:16px;height:8.5px;border:1.2px solid var(--pdp-ink);border-radius:2.4px;
  padding:1px;display:block;position:relative}
html.pdp-on .pdp-batt b{display:block;height:100%;width:72%;background:var(--pdp-ink);border-radius:1px}
html.pdp-on .pdp-batt::after{
  content:"";position:absolute;right:-2.6px;top:50%;transform:translateY(-50%);
  width:1.4px;height:3.4px;border-radius:0 1px 1px 0;background:var(--pdp-ink)}

/* ── 5 · Cabecera de la app ── */
html.pdp-on .pdp-head{
  display:flex;align-items:center;gap:11px;padding:8px 18px 13px;
  border-bottom:1px solid var(--pdp-line)}
html.pdp-on .pdp-app{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;
  background:linear-gradient(140deg,var(--pdp-or),var(--pdp-or-d));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -6px rgba(249,115,22,.7)}
html.pdp-on .pdp-app svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
html.pdp-on .pdp-htxt{min-width:0;flex:1}
html.pdp-on .pdp-hname{font-size:15px;font-weight:800;color:var(--pdp-ink);letter-spacing:-.01em;line-height:1.25}
html.pdp-on .pdp-hsub{font-size:11.5px;font-weight:600;color:var(--pdp-or);display:flex;align-items:center;gap:5px}
html.pdp-on .pdp-hsub i{
  width:6px;height:6px;border-radius:50%;background:#10b981;flex:0 0 6px;
  animation:pdpBlink 1.5s ease infinite}
html.pdp-on .pdp-av{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:#e7e5e4;display:flex;align-items:center;justify-content:center}
html.pdp-on .pdp-av svg{width:19px;height:19px;stroke:#a8a29e;fill:none;stroke-width:1.9}

/* ── 6 · Contexto de la conversación ── */
html.pdp-on .pdp-ctx{padding:12px 18px 10px}
html.pdp-on .pdp-ctx-t{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:11.5px;color:#78716c;margin-bottom:7px}
html.pdp-on .pdp-ctx-t b{font-size:12px;font-weight:800;color:var(--pdp-or)}
html.pdp-on .pdp-ctx-bar{height:4px;border-radius:999px;background:#f1efed;overflow:hidden}
/* r68 · La barra de contexto animaba WIDTH, y eso obliga al navegador a
   recalcular el diseño en cada cuadro de la animación — 1,1 s de trabajo
   de diseño cada vez que entra una burbuja, dentro de un teléfono que ya
   está repintando la conversación. Ahora crece con transform:scaleX, que
   se compone en la tarjeta gráfica y no toca el diseño. El elemento ocupa
   el ancho entero y se escala desde la izquierda. */
html.pdp-on .pdp-ctx-bar i{
  display:block;height:100%;width:100%;border-radius:999px;
  transform:scaleX(0);transform-origin:left center;will-change:transform;
  background:linear-gradient(90deg,var(--pdp-or),var(--pdp-or-d));
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}

/* ── 7 · El hilo ── */
/* El que hace scroll es .pdp-scroll, NO #demoConv. Importa: los puntitos de
   «está escribiendo» son hermanos de #demoConv (si vivieran dentro, el
   clearDemo() del motor los borraría al repetir), y así fluyen pegados al
   último mensaje y bajan con él. */
/* `flex:none` a propósito: dentro de una columna flex sin altura impuesta,
   un `flex:1` crece hasta el contenido y la altura se ignora. El hilo del
   demo mide 1.100px, así que el teléfono se estiraba hasta el infinito. */
html.pdp-on .pdp-scroll{
  flex:none;min-height:0;height:372px;overflow-y:auto;position:relative;
  padding:14px 16px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.pdp-on .pdp-scroll::-webkit-scrollbar{display:none}
html.pdp-on .demo-conv{
  padding:0;min-height:0;height:auto;gap:2px;overflow:visible}

/* la etiqueta de quién habla, discreta */
html.pdp-on .d-bub-w{gap:2px;margin-bottom:9px}
html.pdp-on .d-lbl{font-size:8.5px;letter-spacing:.1em;font-weight:800}
html.pdp-on .d-lbl-ai{color:var(--pdp-or);text-align:left}
html.pdp-on .d-lbl-usr{color:#c4c0bb;text-align:right}

/* Como en la referencia: el CLIENTE oscuro a la derecha, Pronto crema a la
   izquierda. Se invierten los lados respecto al mockup viejo a propósito. */
html.pdp-on .d-bub{
  max-width:84%;padding:10px 13px;border-radius:16px;font-size:12.5px;
  line-height:1.55;border:0}
html.pdp-on .d-bub.usr{
  background:var(--pdp-ink);color:#fff;align-self:flex-end;
  border-bottom-right-radius:5px;border-bottom-left-radius:16px}
html.pdp-on .d-bub.ai{
  background:var(--pdp-cream);color:var(--pdp-ink);align-self:flex-start;
  border-bottom-left-radius:5px;border-bottom-right-radius:16px}

/* la hora, debajo de cada burbuja, como en la referencia */
html.pdp-on .pdp-time{
  font-size:9.5px;color:#b8b4b0;font-weight:600;margin-top:3px;
  opacity:0;transition:opacity .4s .15s}
html.pdp-on .pdp-time.show{opacity:1}
html.pdp-on .pdp-time.r{text-align:right}

/* puntitos de «está escribiendo» */
html.pdp-on .pdp-typing{
  align-self:flex-start;display:none;align-items:center;gap:4px;
  background:var(--pdp-cream);border-radius:16px;padding:10px 13px;margin-bottom:9px}
html.pdp-on .pdp-typing.on{display:flex}
html.pdp-on .pdp-typing i{
  width:5px;height:5px;border-radius:50%;background:#d4a27a;display:block;
  animation:pdpDot 1.1s infinite}
html.pdp-on .pdp-typing i:nth-child(2){animation-delay:.16s}
html.pdp-on .pdp-typing i:nth-child(3){animation-delay:.32s}

/* ── 8 · La llamada entrante, sobre cristal blanco ──────────────────────
   El motor solo le quita/pone `.show`, y con `opacity:0` el anillo seguía
   ocupando 233px de hueco vacío arriba del hilo. Aquí se va del flujo. ── */
html.pdp-on .d-ring{display:none}
html.pdp-on .d-ring.show{display:flex;padding:56px 0 36px;gap:14px}
html.pdp-on .ring-lbl{color:var(--pdp-ink)}
html.pdp-on .ring-sub{color:#a8a29e}

/* ── 9 · La tarjeta de «reservado» → «listo para el siguiente paso» ── */
html.pdp-on .d-booked{
  background:#fff;border:1.5px solid var(--pdp-or);border-radius:16px;
  padding:12px 13px;gap:11px;margin:4px 0 9px;
  box-shadow:0 10px 24px -16px rgba(249,115,22,.85)}
html.pdp-on .d-booked svg{
  width:30px;height:30px;flex:0 0 30px;padding:6px;border-radius:9px;
  background:linear-gradient(140deg,var(--pdp-or),var(--pdp-or-d));
  color:#fff;stroke:#fff;stroke-width:3}
html.pdp-on .d-bkd-t{color:var(--pdp-ink);font-size:12.5px;font-weight:800}
html.pdp-on .d-bkd-s{color:#8a8580;font-size:10.5px}

/* ── 10 · Barra de escritura. Es DECORADO: no hay input, no se puede
      teclear y no recibe foco. Un campo que no escribe sería una mentira. ── */
html.pdp-on .pdp-input{
  display:flex;align-items:center;gap:9px;padding:10px 14px 8px;
  border-top:1px solid var(--pdp-line);pointer-events:none;user-select:none}
html.pdp-on .pdp-field{
  flex:1;min-width:0;height:38px;border-radius:999px;border:1px solid var(--pdp-line);
  background:#faf9f8;display:flex;align-items:center;padding:0 15px;
  font-size:12.5px;color:#b8b4b0}
html.pdp-on .pdp-send{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:linear-gradient(140deg,var(--pdp-or),var(--pdp-or-d));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(249,115,22,.8)}
html.pdp-on .pdp-send svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4}

/* ── 11 · Barra de inicio ── */
html.pdp-on .pdp-home{
  height:5px;width:112px;border-radius:999px;background:#3f3f46;
  margin:9px auto 6px}

/* ── 12 · Animaciones ── */
@keyframes pdpBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pdpDot{0%,60%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── 13 · Quieto cuando se pide quieto ── */
@media(prefers-reduced-motion:reduce){
  html.pdp-on .pdp-hsub i,
  html.pdp-on .pdp-typing i{animation:none}
  html.pdp-on .pdp-ctx-bar i{transition:none}
}

/* ── 14 · Teléfono ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  html.pdp-on{--pdp-w:276px}
  html.pdp-on .pdp-scroll{height:340px}
}
@media(max-width:360px){
  html.pdp-on{--pdp-w:248px}
  html.pdp-on .pdp-scroll{height:308px}
}