/* duoc.css — «Tú y tu prospecto, en paralelo» (#duo) con el lenguaje de la 26: los dos celulares de duo.js (opción C de opciones-duo-2.html).
 * Prospecto a la izquierda y tu WhatsApp con Gu soporte a la derecha; pantallas en grises, Gu con el borde cónico de los botones,
 * celulares inclinados uno hacia el otro frente a un anillo de luz. Carga después de duo.css y style.css. */
.duc-cab { text-align: center; max-width: 800px; margin: 0 auto 56px; }
.duc-cab h2 { max-width: none; text-wrap: balance; }
.duc-cab .desc { margin: 18px auto 0; max-width: 58ch; text-wrap: balance; }
/* ---------- pantallas en grises y Gu con el borde de los botones ---------- */
.duc { --conico: conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1));
  --du-fg: var(--fg); --du-muted: var(--muted); --du-line: var(--line); --du-accent: var(--b1); --du-accent-ink: var(--kc9c6f2); --du-ok: var(--kd0d3d8); --du-warn: var(--kd0d3d8); }
/* pestañas: texto sobre una línea, sin cajas; la del caso actual se llena con la luz */
.duc .du-tabs { gap: 0 28px; margin-bottom: 48px; border-bottom: 1px solid var(--line); max-width: none; }
.duc .du-tab { border: 0; border-radius: 0; background: none; padding: 0 0 14px; color: var(--dim); font-size: 14.5px; overflow: visible; }
.duc .du-tab:hover { color: var(--kc9ccd1); border: 0; }
.duc .du-tab[aria-selected="true"] { color: var(--fg); background: none; border: 0; }
.duc .du-prog { bottom: -1px; height: 1px; background: linear-gradient(90deg, rgb(var(--t1) / .25), var(--b1) 70%, var(--b2)); box-shadow: 0 0 8px rgb(var(--t1) / .8); }
/* la pantalla: gris carbón, sin el verde de WhatsApp */
.duc .du-wa { background: var(--k0b0c0e); background-image: none; }
.duc .du-wa .du-head, .duc .du-wa .du-status { background: var(--k111215); }
.duc .du-head { border-bottom-color: var(--line); }
.duc .du-chev { color: var(--muted); }
.duc .du-av { position: relative; background: var(--k141518); overflow: visible; }
.duc .du-av::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--conico); animation: giraBorde 6s linear infinite; z-index: 0; }
.duc .du-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--k141518); z-index: 0; }
.duc .du-av img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border-radius: 50%; filter: none; }
.duc .du-who small { color: var(--dim); }
.duc .du-on { background: var(--muted); }
.duc .du-log { justify-content: flex-start; }   /* como en la visita: los mensajes empiezan arriba */
.duc .du-wa .du-gu { background: var(--k17181b); }
/* lo que dice Gu (al prospecto) lleva el borde cónico, nunca relleno de color */
.duc .du-screen:not(.du-soporte) .du-m.du-gu:not(.du-mc):not(.du-ag):not(.du-typing) { border: 1px solid transparent; animation: giraBorde 8s linear infinite, du-pop .42s cubic-bezier(.22,1.2,.36,1) both;
  background: linear-gradient(var(--k0f1013), var(--k0f1013)) padding-box, var(--conico) border-box; }
.duc .du-wa .du-me { background: var(--k26272c); }
.duc .du-wa .du-me .du-t::after { color: var(--muted); }
.duc .du-t { color: var(--kffffff-38); }
.duc .du-sys, .duc .du-sys.ok { color: var(--dim); background: none; font-weight: 500; display: flex; align-items: center; gap: 8px; align-self: stretch; justify-content: center; }
.duc .du-sys::before, .duc .du-sys::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.duc .du-wa .du-comp { background: var(--k111215); border-top-color: var(--line); }
.duc .du-wa .du-ph { background: var(--k1b1c20); }
.duc .du-wa .du-send { background-color: var(--k2a2b31); }
.duc .du-c, .duc .du-wa .du-c { background: var(--k141518); box-shadow: 0 0 0 1px var(--line2); }
.duc .du-wa .du-lnk, .duc .du-lnk { color: var(--kd0d3d8); }
.duc .du-cita { background: var(--k17181b); box-shadow: inset 0 0 0 1px var(--line2); }
.duc .du-cal { background: var(--k23242a); }
.duc .du-clean, .duc .du-st.ok { color: var(--muted); }
.duc .du-chk { background-color: var(--k3a3c43); }
.duc .du-tb { color: var(--ke6e8eb); }
.duc .du-tb.on { background: var(--kffffff-1); }
.duc .du-ag { border-left: 0; box-shadow: inset 2px 0 0 var(--line2); }
.duc .du-de { color: var(--muted); font-weight: 600; }
.duc .du-pdf-ic { background: var(--k2a2b31); color: var(--fg); }
.duc .du-ico { background: var(--k23242a) !important; }
/* el celular del prospecto a la izquierda y el tuyo a la derecha; el pulso se voltea para seguir yendo de quien escribe a quien recibe */
.duc .du-col[data-side="R"] { order: -1; } .duc .du-col[data-side="L"] { order: 1; }
.duc .du-switch button[data-ver="R"] { order: -1; }
.duc .du-line { transform: scaleX(-1); }
/* el pulso entre celulares: un tramo de luz que cruza una línea fina */
.duc .du-line { height: 1px; background: var(--line2); }
.duc .du-line i { width: 70px; height: 1px; margin: 0 0 0 -35px; border-radius: 0; box-shadow: 0 0 8px rgb(var(--t1) / .9);
  background: linear-gradient(90deg, transparent, var(--b1) 30%, var(--b2) 50%, var(--b1) 70%, transparent); }
/* el pie: texto suelto con dos controles, sin caja */
.duc .du-caption { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; max-width: 720px; }
.duc .du-cap { font-weight: 500; color: var(--muted); }
.duc .du-ic { border: 0; color: var(--muted); } .duc .du-ic:hover { color: var(--fg); }
.duc .du-col figcaption b { font-family: var(--disp); font-size: 17px; letter-spacing: -.01em; }
.duc .du-col figcaption span { color: var(--dim); }
@media (max-width: 760px) {
  .duc .du-tabs { gap: 0 22px; margin: 0 -16px 24px; padding: 0 16px; }
  .duc .du-switch { gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .duc .du-switch button { flex: 1; border: 0; border-radius: 0; background: none; padding: 10px 4px 12px; color: var(--dim); }
  .duc .du-switch button[aria-pressed="true"] { color: var(--fg); background: none; box-shadow: 0 1px 0 rgb(var(--t1) / .9); }
  .duc .du-col figcaption b { display: none; }   /* las pestañas ya dicen de quién es */
  .duc .du-switch button i { top: 10px; right: 18%; width: 6px; height: 6px; background: var(--fg); }
}

/* ---------- inclinados uno hacia el otro, frente a un anillo de luz ---------- */
.duc .du-stage { perspective: 1600px; }
.duc .du-stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: 700px; height: 700px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 57%, rgb(var(--t1) / .0) 58%, rgb(var(--t1) / .5) 60.5%, rgb(var(--t2) / .75) 61.2%, rgb(var(--t1) / .35) 62.5%, transparent 68%);
  filter: blur(1.5px); opacity: .85; -webkit-mask: linear-gradient(#000 35%, transparent 80%); mask: linear-gradient(#000 35%, transparent 80%); animation: giraBorde 12s linear infinite; }
.duc .du-phones { position: relative; z-index: 1; }
.duc .du-col { perspective: 1200px; }   /* la perspectiva va en el padre directo del celular, si no el giro se ve plano */
.duc .du-col[data-side="R"] .du-phone { transform: rotateY(16deg); transform-origin: right center; }
.duc .du-col[data-side="L"] .du-phone { transform: rotateY(-16deg); transform-origin: left center; }
.duc .du-col.du-act[data-side="L"] .du-phone, .duc .du-col.du-act[data-side="R"] .du-phone { transform: rotateY(0) translateY(-6px); }
.duc .du-phone { transition: transform .9s cubic-bezier(.22, 1, .36, 1); background: linear-gradient(150deg, var(--k2c2d33), var(--k0d0e10) 40%, var(--k1d1e22)); box-shadow: inset 0 0 0 1px var(--k3c3d43), inset 0 0 0 5px var(--k070708), 0 60px 100px -40px var(--k000000-95); }
.duc .du-tabs { justify-content: center; border-bottom: 0; }
.duc .du-tab .du-prog { left: 50%; transform: translateX(-50%); }
@media (max-width: 760px) {
  .duc .du-col .du-phone, .duc .du-col.du-act .du-phone { transform: none !important; }
  .duc .du-stage::before { width: 360px; height: 360px; top: 52%; }
  .duc .du-tabs { justify-content: flex-start; }
  .duc .du-tab .du-prog { left: 0; transform: none; }
}