/* Callsy X — portada: conversación de ejemplo, comprobante y demo en vivo con Yuli (incluye "Pasar a humano").
   Carga después de sitio.css: aquí solo va lo de la portada que sitio.css no trae, o lo que se ajusta para ella. */

/* ---- Copia de la portada: la frase de confianza lleva también lo de la demo por WhatsApp (va encima de los botones,
   así la línea animada no tiene ningún texto entre el panel y "Pedir una demo") ---- */
.hero__confianza{max-width:62ch}

/* ---- El camino: si en un ancho no hay ruta que pase sin tocar texto, no se dibuja (firma.js) ---- */
.camino.is-sin-ruta{visibility:hidden}

/* ---- Cuerpo del panel: el flujo arriba y el chat abajo; en escritorio, lado a lado ---- */
.panel__cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
@media (min-width:960px){
  .panel__cuerpo{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;align-items:stretch}
  .panel--hero .flujo--hero{height:auto;min-height:380px}
  .flujo--hero [data-cable="out"]{display:none}   /* el chat queda al lado, no debajo: no hay cable de salida */
}

/* ---- La ventana del chat: alto fijo (no estira la portada) y se desplaza sola mientras corre la conversación ---- */
.chat--hero{grid-template-columns:minmax(0,1fr);padding-top:0;gap:12px;min-width:0;align-content:start}
.chat__log{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;overflow-y:auto;overscroll-behavior:contain;
  height:60vh;height:60svh;min-height:340px;max-height:600px;padding:12px 10px 14px;border-radius:var(--r-md);
  background:rgba(0,0,0,.24);border:1px solid var(--line);scrollbar-width:thin;scrollbar-color:rgba(94,227,207,.35) transparent}
@media (min-width:960px){.chat__log{height:430px;min-height:0;padding:14px}}
.chat__log:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chat__log .burbuja{max-width:86%;overflow-wrap:anywhere}
.chat__dia{justify-self:center;margin:0 0 4px;padding:3px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:.7rem;color:var(--muted);letter-spacing:.02em}
/* Mensajes que la conversación aún no muestra: fuera de la vista, pero el lector de pantalla sí los lee (firma.js) */
.chat__log .is-por-ver{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;
  overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}

/* El comprobante: la captura dentro de la burbuja del cliente, de ~160 px y redondeada */
.burbuja--imagen{margin:0;padding:4px;width:160px;max-width:62%;line-height:0}
.burbuja--imagen img{width:100%;height:auto;border-radius:12px;background:#fff}

/* Los resultados al final de la conversación */
.chat__log .estados{margin-top:4px}

/* "escribiendo…" entre respuestas */
.chat__escribiendo{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:.78rem;color:var(--muted)}
.burbuja--cliente.chat__escribiendo{justify-self:start}
.puntos{display:inline-flex;align-items:center;gap:3px}
.puntos i{display:block;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.35;animation:puntos 1.1s ease-in-out infinite}
.puntos i:nth-child(2){animation-delay:.15s}
.puntos i:nth-child(3){animation-delay:.3s}
@keyframes puntos{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.sin-movimiento .puntos i{animation:none;opacity:.75}

/* ---- Mensajes de la demo en vivo ---- */
.burbuja__texto{white-space:pre-line}
.burbuja__quien{display:block;margin-bottom:2px;font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--brand)}
.burbuja--cliente .burbuja__quien{color:var(--muted)}
/* La persona de la tienda (el visitante con "Pasar a humano" encendido) escribe del lado del negocio, en ámbar */
.burbuja--tienda{justify-self:end;background:rgba(245,196,81,.1);border:1px solid rgba(245,196,81,.38);color:var(--ink);border-bottom-right-radius:6px}
.burbuja--tienda .burbuja__quien{color:var(--warn)}
/* Notas del sistema: cambios de modo, avisos y errores amables */
.chat__sistema{justify-self:center;max-width:94%;margin:4px 0;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);
  color:var(--ink);font-size:.8rem;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.chat__sistema--humano{background:rgba(245,196,81,.08);border-color:rgba(245,196,81,.35);color:#F6E3AE}
.chat__sistema a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:4px 2px;margin:-4px 0}
.chat__sep{justify-self:stretch;display:flex;align-items:center;gap:10px;margin:12px 0 2px;color:var(--brand);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.chat__sep::before,.chat__sep::after{content:"";flex:1;height:1px;background:var(--line-strong)}

/* ---- El campo para escribirle a Yuli ---- */
.demo{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-height:96px;align-content:start}
.demo [hidden]{display:none!important}
.demo__form{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.demo__form[aria-busy="true"] .demo__enviar{opacity:.6}
.demo__label{font-size:.86rem;font-weight:600;color:var(--ink)}
.demo__fila{display:flex;gap:8px}
.demo__campo{flex:1 1 0;width:100%;min-width:0;min-height:48px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:rgba(255,255,255,.04);
  color:var(--ink);font:400 1rem/1.2 var(--font-body);transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.demo__campo::placeholder{color:#7D8D8A}
.demo__campo:hover{border-color:rgba(94,227,207,.35)}
.demo__campo:focus{outline:none;border-color:var(--brand);background:rgba(94,227,207,.06)}
.demo__campo:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.demo__enviar{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 18px;border-radius:var(--r-pill);
  border:1px solid rgba(94,227,207,.55);background:linear-gradient(180deg,rgba(94,227,207,.18),rgba(94,227,207,.04)),var(--cta);color:var(--ink);
  font:600 .95rem/1 var(--font-body);cursor:pointer;transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.demo__enviar svg{width:17px;height:17px}
.demo__enviar:hover{border-color:var(--brand);box-shadow:0 0 22px -6px rgba(94,227,207,.7)}
.demo__ayuda{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;font-size:.76rem;color:var(--muted)}
.demo__reiniciar{min-height:44px;padding:0 4px;margin-right:-4px;background:none;border:0;color:var(--brand);font:500 .8rem/1 var(--font-body);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.demo__reiniciar:hover{color:var(--mint)}
.demo__aviso{margin:0;padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.86rem;line-height:1.5;color:var(--muted)}
.demo__aviso a{display:inline-block;padding:6px 2px;margin:-6px 0}
/* Con "Pasar a humano" el campo es de la persona de la tienda: se marca en ámbar */
.chat--hero.is-humano .demo__campo{border-color:rgba(245,196,81,.45)}
.chat--hero.is-humano .demo__campo:focus{border-color:var(--warn);background:rgba(245,196,81,.06)}
.chat--hero.is-humano .demo__label{color:#F6E3AE}

/* ---- "Pasar a humano": control real (interruptor accesible) ---- */
.switch--demo{min-height:44px;padding-right:4px}
.switch--demo input:focus-visible + .switch__pista{outline:2px solid var(--brand);outline-offset:3px}
.switch--demo input:disabled + .switch__pista{opacity:.6}
.switch--demo:has(input:disabled){cursor:default}
.switch--demo input:checked + .switch__pista{background:var(--warn)}
.switch--demo input:checked ~ .switch__t{color:var(--ink)}
.chip--humano{color:var(--warn);border-color:rgba(245,196,81,.4);background:rgba(245,196,81,.08)}

/* La barra fija del celular se hace a un lado mientras el campo de la demo está a la vista (demo.js) */
html.demo-a-la-vista .barra-movil{transform:translateY(160%);visibility:hidden;pointer-events:none;transition:transform .6s var(--ease),visibility 0s linear .6s}

@media (max-width:699px){
  .chat__log{padding:10px 8px 12px}
  .chat__log .burbuja{max-width:90%}
  .demo__enviar{padding:0 14px}
}
@media (max-width:359px){.demo__enviar{padding:0 12px;font-size:.9rem}}

/* ---- Menos movimiento ---- */
@media (prefers-reduced-motion:reduce){
  .puntos i{animation:none;opacity:.75}
  .chat__log{scroll-behavior:auto}
}