/* ==========================================================================
   Chatealo · Sección "Una experiencia conversacional" animada
   Escenario de 980×917 (tamaño a 1920) que js/experience-anim.js escala con --s.
   Tarjetas diseñadas en px nativos (PNG de landing-2) y reducidas a .7925.
   La tarjeta de Volumen reutiliza el HTML y las clases .vol-* del hero.
   ========================================================================== */

.xp-anim { overflow: visible; }

.xp-anim__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 980px;
  height: 917px;
  transform-origin: 0 0;
  transform: scale(var(--s, 1)) translate(calc(var(--view-x, 0) * -1px), calc(var(--view-y, 0) * -1px));
}

/* Fondo: cinta lavanda (se funde hacia la derecha con la de .experience::before) */
.xp-bg {
  position: absolute;
  inset: 0;
  background: url("../assets/img/ribbon-left.svg") 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.xp-card {
  position: absolute;
  transform-origin: 0 0;
  transform: scale(.7925);
}
.xp-card--tiempo { left: 360px; top: 95px; width: 523px; height: 523px; z-index: 1; }
.xp-card--conv { left: 259px; top: 315px; width: 535px; height: 524px; z-index: 2; }
.xp-card--vol { left: 519px; top: 441px; width: 522px; height: 523px; z-index: 3; }

.xp-card__in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 26px 60px rgba(40, 30, 90, .09);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #0b0d20;
  -webkit-font-smoothing: antialiased;
  will-change: transform;
}
.xp-card--vol .xp-card__in > .card { border-radius: 26px; box-shadow: none; }
/* Ajuste fino de la tarjeta del hero a la referencia de landing-2 */
.xp-card--vol .vol-title { top: 42px; font-size: 19.5px; }
.xp-card--vol .vol-live { font-size: 12.6px; }
.xp-card--vol .vol-label { font-size: 13.1px; }
.xp-card--vol .vol-big { margin-top: -1px; font-size: 36.7px; }
.xp-card--vol .vol-sub { margin-top: -2px; font-size: 14.7px; }
.xp-card--vol .vol-pill { padding: 0 13px 0 9px; font-size: 12.2px; }
.xp-card--vol .vol-box-title { font-size: 12px; }
.xp-card--vol .vol-axis { font-size: 9.5px; }
.xp-card--vol .vol-day { top: 477px; font-size: 10px; }
.xp-card--vol .vol-num { font-size: 23.6px; }
.xp-card--vol .vol-small { font-size: 11.3px; }

.xp-abs { position: absolute; white-space: nowrap; }

.xp-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
}
.xp-icon svg { width: 24px; height: 24px; }
.xp-icon--purple { background: linear-gradient(145deg, #9150f7, #6c26ea); box-shadow: 0 6px 14px rgba(124, 58, 237, .28); }
.xp-icon--purple svg { fill: #fff; }
.xp-icon--blue { background: linear-gradient(145deg, #2167ff, #0047f5); box-shadow: 0 6px 14px rgba(3, 77, 249, .28); }
.xp-icon--blue svg { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.xp-title { font-size: 19.2px; font-weight: 600; color: #0a0c20; letter-spacing: -.1px; }
.xp-label { font-size: 13.3px; color: #686e88; }
.xp-label--lg { font-size: 14.4px; }
.xp-subtitle { font-size: 12.9px; font-weight: 600; color: #20212e; }
.xp-big { font-weight: 700; color: #090b1f; font-variant-numeric: tabular-nums; }
.xp-big--time { font-size: 37.3px; letter-spacing: -.4px; }
.xp-big--conv { font-size: 44.5px; letter-spacing: -.6px; }

.xp-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  border-radius: 16px;
  font-size: 15.3px;
  font-weight: 500;
}
.xp-pill--green { background: #e8f7ee; color: #1bb96b; font-size: 14.8px; }
.xp-pill--sm { justify-content: flex-start; height: 29px; padding-left: 10px; font-size: 11.8px; gap: 7px; }
.xp-pill--purple { justify-content: flex-start; padding-left: 14px; gap: 7px; background: #f3effd; color: #3b1cc0; font-size: 14.2px; }
.xp-pill--soft {
  justify-content: flex-start;
  gap: 5px;
  height: 31px;
  padding-left: 9px;
  border: 1px solid #e6e9ec;
  background: #f8f9fa;
  font-size: 12.2px;
  font-weight: 400;
  color: #5f6f7a;
}
.xp-pill--soft b { margin-right: 3px; font-weight: 600; color: #22a052; }
.xp-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3b13c6; }
.xp-arrow { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.xp-arrow--orange { color: #f97316; }
.xp-bolt { width: 13px; height: 13px; flex: none; fill: #2fb350; }

/* Anillo de respuestas rápidas */
.xp-ring { overflow: visible; }
.xp-ring circle { fill: none; }
.xp-ring__track { stroke: #e2d4fb; stroke-width: 5.5; }
.xp-ring__bar {
  stroke: #7431ee;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 395.6 449.2;
  transform: rotate(-90deg);
  transform-origin: 80px 80px;
}
.xp-ring .xp-ring__start { fill: #7431ee; }
.xp-ring .xp-ring__knob { fill: #fff; stroke: #7431ee; stroke-width: 3; }
.xp-ring-num { text-align: center; font-size: 26.7px; font-weight: 700; color: #6e28e9; font-variant-numeric: tabular-nums; }
.xp-ring-label { text-align: center; font-size: 12.9px; color: #6c7189; }

/* Gráficos */
.xp-chart { overflow: visible; pointer-events: none; }
.xp-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.xp-line--dash { stroke-dasharray: 4 4; }
.xp-line--faint { opacity: .35; }
.xp-axis { font-size: 11.4px; color: #7e859e; }
.xp-axis--right { width: 50px; text-align: right; font-size: 9.6px; color: #898da3; }
.xp-day { top: 475px; transform: translateX(-50%); font-size: 12.6px; color: #747995; }
.xp-chartbox { border-radius: 14px; background: linear-gradient(180deg, #f6f8fe, #f9fafe); }

/* Embudo */
.xp-funnel path { stroke-width: 12; stroke-linejoin: round; }
.xp-flabel { width: 100px; text-align: center; font-size: 13.8px; font-weight: 500; color: #154aec; }
.xp-flabel--on { font-weight: 600; color: #fff; }
.xp-fnum { width: 80px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.xp-tooltip {
  width: 46px;
  height: 28px;
  border-radius: 7px;
  background: #2563fb;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(37, 99, 251, .25);
}
.xp-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #2563fb;
}

/* --------------------------------------------------------------------------
   Lista de la derecha: tilde que se dibuja
   -------------------------------------------------------------------------- */
.checklist--anim li::before { display: none; }
.checklist__check { flex: none; width: 1.9rem; height: 1.9rem; overflow: visible; }
.checklist__check circle,
.checklist__check path { fill: none; stroke: #6366d1; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

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