/* ==========================================================================
   Chatealo · Animación de la sección "Tus vendedores responden con contexto"
   Escenario de 1160×1464 px: la mitad izquierda de la sección a 1920, con las
   piezas exportadas de Corel a tamaño real. js/context-anim.js lo escala al
   ancho del contenedor con --s. --view-x / --view-y / --view-w recortan la
   parte visible en tablet y mobile (ver styles.css).
   ========================================================================== */

.ctx-anim { overflow: hidden; }

.ctx-anim__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1160px;
  height: 1464px;
  transform-origin: 0 0;
  transform: scale(var(--s, 1)) translate(calc(var(--view-x, 0) * -1px), calc(var(--view-y, 0) * -1px));
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  color: #111b21;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.ctx-anim img { max-width: none; }

/* --------------------------------------------------------------------------
   Interfaces de contexto (ya traen el fundido inferior)
   -------------------------------------------------------------------------- */
/* .ctx-card mueve (GSAP); .ctx-card__art escala las piezas con --k.
   Posiciones: grupo compacto (tarjetas + celular = ~850 px de alto) centrado con el texto */
.ctx-card {
  position: absolute;
  transform-origin: 50% 40%;
  will-change: transform;
  --k: .72;
}
.ctx-card__in { position: absolute; inset: 0; will-change: transform, opacity; } /* capa de la entrada (fade in up / down) */
.ctx-card__art { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k)); }
.ctx-card__art > img { display: block; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .16)); }
.ctx-card--perfil { left: 149px; top: 237px; width: calc(540px * var(--k)); height: calc(709px * var(--k)); z-index: 1; }
.ctx-card--integraciones { left: 470px; top: 322px; width: calc(568px * var(--k)); height: calc(709px * var(--k)); z-index: 2; }

/* Resaltado del dato que usa el vendedor */
.ctx-hl {
  position: absolute;
  border: 3px solid #25e089;
  border-radius: 14px;
  background: rgba(37, 224, 137, .07);
  box-shadow: 0 0 0 6px rgba(37, 224, 137, .2);
  opacity: 0;
  pointer-events: none;
}
.ctx-hl--ring { border-width: 3px; border-radius: 12px; background: none; }

/* Zona que dispara la entrada (tarjetas + celular) */
.ctx-anim__zone { position: absolute; left: 140px; top: 230px; width: 760px; height: 860px; pointer-events: none; }

/* Antes de armar la entrada no se muestra nada (evita un parpadeo) */
.ctx-anim.has-intro:not(.is-animated) .ctx-card__in,
.ctx-anim.has-intro:not(.is-animated) .phone-scene { visibility: hidden; }

/* --------------------------------------------------------------------------
   Celular 3D: reutiliza .phone-scene / .phone3d / .ph-* / .glare /
   .screen-light / .swirl de hero-anim.css (cuerpo de 320×674 del hero),
   escalado a este celular: 373×559 → k = 373 / 466.8 = .79906
   -------------------------------------------------------------------------- */
.ctx-phone {
  position: absolute;
  left: 326px;
  top: 537px;
  z-index: 5;
  width: 373px;
  height: 559px;
}
.ctx-phone__body {
  position: absolute;
  left: 58.49px;
  top: 11.67px;
  width: 320px;
  height: 674px;
  transform-origin: 0 0;
  transform: scale(.79906);
}
.ctx-phone__rig { position: absolute; inset: 0; }
.ctx-phone .ph-face > img.frame { filter: drop-shadow(0 38px 56px rgba(0, 0, 0, .32)); }

.ctx-phone__glow {
  position: absolute;
  left: 186px;
  top: 280px;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 211, 102, .24), rgba(37, 211, 102, .08) 55%, rgba(37, 211, 102, 0));
  opacity: 0;
  pointer-events: none;
}

/* Pantalla (coordenadas del cuerpo del hero) */
.ctx-phone__screen {
  position: absolute;
  left: 5.64px;
  top: 5.42px;
  z-index: 1;
  width: 309.1px;
  height: 662px;
  overflow: hidden;
  border-radius: 52.6px;
  background: #000;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* mantiene el recorte redondeado en 3D */
  isolation: isolate;
}
.ctx-phone__ui { position: absolute; inset: 0; transform-origin: 50% 45%; }
.ctx-phone .glare { z-index: 2; }

/* --------------------------------------------------------------------------
   Pantalla de chat: diseñada a 390×835 (px lógicos de celular), escala .7926
   -------------------------------------------------------------------------- */
.ctx-chat {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 835px;
  transform-origin: 0 0;
  transform: scale(.79258);
  background: #efeae2;
}

.ctx-chat__status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
  background: #f6f5f3;
  color: #111;
}
.ctx-chat__clock { position: absolute; left: 36px; top: 18px; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.ctx-chat__island { position: absolute; left: 50%; top: 11px; width: 118px; height: 34px; margin-left: -59px; border-radius: 17px; background: #000; }
.ctx-chat__signal { position: absolute; right: 26px; top: 21px; display: flex; gap: 5px; align-items: center; }
.ctx-chat__signal svg { display: block; fill: currentColor; }

.ctx-chat__head {
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 12px;
  border-bottom: 1px solid #dedcd8;
  background: #f6f5f3;
}
.ctx-chat__back { width: 12px; height: 20px; fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-right: 4px; }
.ctx-chat__avatar { width: 40px; height: 40px; border-radius: 50%; }
.ctx-chat__who { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ctx-chat__who strong { font-size: 17px; font-weight: 600; }
.ctx-chat__who span { font-size: 13px; color: #667781; }
.ctx-chat__icon { width: 24px; height: 24px; margin-left: 14px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ctx-chat__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 116px;
  bottom: 92px;
  overflow: hidden;
}
.ctx-chat__list {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
}

.ctx-day {
  align-self: center;
  margin-bottom: 2px;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: #54656f;
  font-size: 12.5px;
  font-weight: 500;
}

.ctx-msg { display: flex; margin-top: 8px; }
.ctx-msg--in { justify-content: flex-start; }
.ctx-msg--out { justify-content: flex-end; }

.ctx-bubble {
  position: relative;
  max-width: 290px;
  padding: 7px 10px 6px;
  border-radius: 14px;
  font-size: 16.5px;
  line-height: 1.3;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.ctx-msg--in .ctx-bubble { background: #fff; border-top-left-radius: 4px; transform-origin: 0 100%; }
.ctx-msg--out .ctx-bubble { background: #d9fdd3; border-top-right-radius: 4px; transform-origin: 100% 100%; }

.ctx-bubble time {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 8px 0 -2px 9px;
  font-size: 11.5px;
  line-height: 1;
  color: #667781;
}
.ctx-ticks { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: #53bdeb; }

/* Tarjeta de producto compartida */
.ctx-bubble--product {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 3px 10px;
  width: 270px;
  padding: 6px 9px 6px 6px;
}
.ctx-bubble--product img { width: 72px; height: 72px; border-radius: 9px; object-fit: cover; background: #f5f5f5; }
.ctx-bubble--product div { display: flex; flex-direction: column; gap: 2px; }
.ctx-bubble--product strong { font-size: 15px; font-weight: 600; }
.ctx-bubble--product span { font-size: 12.5px; line-height: 1.3; color: #54656f; }
.ctx-bubble--product b { margin-top: 3px; font-size: 16px; font-weight: 700; }
.ctx-bubble--product time { grid-column: 1 / -1; justify-self: end; float: none; margin: 0 1px 0 0; }

/* "Escribiendo…" de la clienta */
.ctx-typing { height: 0; margin-top: 0; opacity: 0; overflow: hidden; }
.ctx-typing .ctx-bubble { display: flex; gap: 4px; padding: 12px 13px; }
.ctx-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8696a0; animation: ctx-dot 1s ease-in-out infinite; }
.ctx-typing i:nth-child(2) { animation-delay: .15s; }
.ctx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ctx-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Contexto que usa el vendedor (flota sobre el campo de escritura) */
.ctx-chip {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 9px;
  border: 1px solid #abefc6;
  border-radius: 16px;
  background: #ecfdf3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  color: #067647;
  font-size: 13.5px;
  white-space: nowrap;
  opacity: 0;
}
.ctx-chip svg { width: 13px; height: 13px; fill: #12b76a; }
.ctx-chip strong { font-weight: 600; }
.ctx-chip strong::after { content: "·"; margin-left: 6px; font-weight: 400; color: #47cd89; }

/* --------------------------------------------------------------------------
   Campo de escritura del vendedor
   -------------------------------------------------------------------------- */
.ctx-chat__composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  border-top: 1px solid #dedcd8;
  background: #f6f5f3;
}
.ctx-chat__plus { position: absolute; left: 12px; top: 16px; width: 28px; height: 28px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; }
.ctx-input {
  position: absolute;
  left: 48px;
  right: 58px;
  top: 10px;
  height: 40px;
  border: 1px solid #e3e1dd;
  border-radius: 20px;
  background: #fff;
}
.ctx-input__ph,
.ctx-input__field {
  position: absolute;
  left: 14px;
  right: 12px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 16.5px;
  white-space: nowrap;
}
.ctx-input__ph { color: #8696a0; }
/* Mientras escribe muestra el final del texto, como un input real */
.ctx-input__field { justify-content: flex-end; overflow: hidden; }
.ctx-input__field:has(.ctx-input__text:empty) { justify-content: flex-start; }
.ctx-input__text { flex: none; }
.ctx-input__caret { flex: none; width: 2px; height: 20px; margin-left: 1px; background: #25d366; opacity: 0; }
.is-animated .ctx-input__caret { animation: ctx-caret 1s steps(1) infinite; }
@keyframes ctx-caret { 50% { visibility: hidden; } }

.ctx-send {
  position: absolute;
  right: 12px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
}
.ctx-send svg { width: 19px; height: 19px; margin-left: 2px; fill: #fff; }
.ctx-chat__home { position: absolute; left: 50%; bottom: 9px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #111; }