/* ==========================================================================
   Chatealo · Animaciones de las cards "¿Te pasa esto en tu empresa?"
   Cada demo es un escenario de 596px de ancho (ancho de la card a 1920)
   que js/pain-anim.js escala al ancho real con --s.
   ========================================================================== */

.pain-demo {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--navy, #001a3f);
}

.pain-demo__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 596px;
  height: 640px;
  transform-origin: 0 0;
  transform: scale(var(--s, 1));
}

.pain-demo img { max-width: none; }

/* --------------------------------------------------------------------------
   Card 1 · Control: scroll y deslizamiento entre interfaces
   Escala de las piezas exportadas de Corel: 0.42
   -------------------------------------------------------------------------- */
.pain-demo--control .pain-demo__stage {
  background: linear-gradient(180deg, #695b89 0, #7a6e97 8px, #6d668e 24px, #57557d 47px, #3d4369 70px, #213256 93px, #072248 116px, #00193e 139px);
}

/* Panel claro (card1-fondo: 2081×1418, zona opaca desde 66,65) */
.pain-demo--control .pain-demo__panel {
  position: absolute;
  left: 72.28px;
  top: 2.7px;
  width: 874px;
}

/* Ventana de scroll: coincide con la zona opaca del panel */
.pain-demo--control .pain-demo__viewport {
  position: absolute;
  left: 100px;
  top: 30px;
  width: 819px;
  height: 541px;
  overflow: hidden;
  border-radius: 19.5px;
}

.pain-demo__track {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Interfaces (948px de ancho, zona opaca desde 44,44): tarjeta de 361px, separación de 29px */
.pain-demo--control .pain-demo__screen {
  position: absolute;
  top: 19.52px;
  width: 398.16px;
}
.pain-demo--control .pain-demo__screen:nth-child(1) { left: 18.52px; }
.pain-demo--control .pain-demo__screen:nth-child(2) { left: 408.52px; }

/* --------------------------------------------------------------------------
   Card 2 · Leads: notificaciones que llegan, suman mensajes y se enfrían
   Ocupa toda la card (el texto va encima). Coordenadas en px de la
   referencia de Corel (1350 = ancho de la card); .leads la escala a 596.
   Tipografía Inter (declarada en hero-anim.css).
   -------------------------------------------------------------------------- */
.pain-demo--leads {
  position: absolute;
  inset: 0;
  background: #101f3f;
}
.pain-card--dark .pain-card__text { position: relative; z-index: 1; }

.leads {
  position: absolute;
  left: 0;
  top: 0;
  width: 1350px;
  height: 1350px;
  transform-origin: 0 0;
  transform: scale(.441481);
  background: linear-gradient(180deg, #6f698e 0, #101f3f 460px);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lead {
  position: absolute;
  left: 0;
  top: 0;
  width: 1078px;
  height: 294px;
  will-change: transform, opacity;
}

.lead > * { position: absolute; }
/* Dos fondos: contador circular (1 dígito) y ovalado (2 dígitos); el JS alterna la opacidad */
.lead__bg { left: 0; top: 0; width: 1078px; }

/* Destello rojo al llegar un mensaje nuevo (sobre el brillo de la burbuja) */
.lead__flash {
  left: 874px;
  top: 87px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239, 51, 58, .55), rgba(239, 51, 58, 0));
  opacity: 0;
}

.lead__avatar { left: 35px; top: 57px; width: 180px; height: 180px; }
.lead__dot { left: 173px; top: 182px; width: 49px; height: 49px; }

.lead__name,
.lead__msg,
.lead__time,
.lead__count { line-height: 1; white-space: nowrap; }

.lead__name { left: 264px; top: 83px; font-size: 48.3px; font-weight: 600; color: #fefefe; }
.lead__msg {
  left: 264px;
  top: 170.5px;
  max-width: 640px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 45.6px;
  font-weight: 400;
  color: #fefefe;
}
.lead__wave { left: 277px; top: 170px; width: 469px; height: 62px; overflow: visible; }
.lead__wave line { stroke: #a855f7; stroke-width: 4px; stroke-linecap: round; }
.lead__time {
  left: 907px; /* en la referencia las horas están alineadas a la izquierda */
  top: 98px;
  font-size: 37.3px;
  font-weight: 600;
  color: #96989a;
}
.lead__count {
  left: 0;
  top: 0;
  font-size: 34.5px;
  font-weight: 700;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Card 3 · Anuncios: los chats de publicidad se diluyen en WhatsApp
   Reutiliza el celular y la pantalla de WhatsApp del hero (clases .wa-*,
   .island de hero-anim.css). El celular (320×674) va a escala 0.9647.
   -------------------------------------------------------------------------- */
.pain-demo--ads .pain-demo__stage {
  background: linear-gradient(180deg, #695a88 1px, #776d95 10px, #656187 28px, #4f5077 47px, #353f65 65px, #1c2e53 84px, #042045 102px, #00193f 121px);
}

.ads-phone {
  position: absolute;
  left: 143.5px;
  top: 38.6px;
  width: 320px;
  height: 674px;
  transform-origin: 0 0;
  transform: scale(.9647);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

.ads-phone__buzz { position: absolute; inset: 0; }

.ads-phone__frame {
  position: absolute;
  left: -73.2px;
  top: -14.6px;
  width: 466.8px;
  height: 700.2px;
  pointer-events: none;
}

.ads-phone__screen {
  position: absolute;
  left: 12.5px;
  top: 12.5px;
  width: 295px;
  height: 649px;
  overflow: hidden;
  border-radius: 45.5px;
  background: #fff;
}

/* Coordenadas de la captura de WhatsApp (308×678) */
.ads-phone__ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 308px;
  height: 678px;
  transform-origin: 0 0;
  transform: scale(.958);
}

.pain-demo--ads .wa-row { top: 0; will-change: transform; }
.pain-demo--ads .wa-av--photo { background-size: cover; background-position: center; }
.pain-demo--ads .wa-name { display: flex; align-items: center; gap: 5px; }
.pain-demo--ads .wa-count { width: auto; min-width: 19px; padding: 0 5px; border-radius: 10px; }

/* Etiqueta de origen del chat (anuncio) */
.ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 15px;
  padding: 0 5px 0 3px;
  border-radius: 8px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.ad-tag svg { width: 10px; height: 10px; flex: none; }
.ad-tag--ig { background: #fdecf4; color: #c1317c; }
.ad-tag--fb { background: #e8f1fe; color: #1466d6; }
.ad-tag--google { background: #eef1f5; color: #4d5562; }

/* Aviso de notificación del sistema */
.ads-notif {
  position: absolute;
  left: 8px;
  top: 40px;
  z-index: 5;
  width: 292px;
  height: 62px;
  border-radius: 20px;
  background: #f6f6f8;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  visibility: hidden;
}
.ads-notif__icon {
  position: absolute;
  left: 11px;
  top: 13px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #25d366;
  display: grid;
  place-items: center;
}
.ads-notif__icon svg { width: 22px; height: 22px; }
.ads-notif__body { position: absolute; left: 57px; right: 12px; top: 13px; bottom: 0; }
.ads-notif__one,
.ads-notif__many,
.ads-notif__title,
.ads-notif__text { position: absolute; left: 0; right: 0; }
.ads-notif__one,
.ads-notif__many { top: 0; bottom: 0; }
.ads-notif__title { top: 0; right: 30px; font-size: 12.5px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-notif__title small { font-size: 10.5px; font-weight: 500; color: #7a7f88; }
.ads-notif__text { top: 19px; font-size: 11.5px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-notif__time { position: absolute; right: 12px; top: 12px; font-size: 10px; color: #8a8f98; }
.ads-notif__many { opacity: 0; }

/* --------------------------------------------------------------------------
   Cursor y marca de presión (compartidos)
   -------------------------------------------------------------------------- */
.pain-demo__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 22px;
  height: 26px;
  margin: -1.5px 0 0 -2px; /* la punta de la flecha queda en (0,0) */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  transform-origin: 2px 1.5px;
  will-change: transform;
}

/* Sin animación activa (cargando, sin GSAP o "reducir movimiento") no hay cursor */
.pain-demo:not(.is-animated) .pain-demo__cursor,
.pain-demo:not(.is-animated) .pain-demo__press { display: none; }

.pain-demo__press {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(124, 58, 237, .45);
  border-radius: 50%;
  background: rgba(124, 58, 237, .16);
  opacity: 0;
  pointer-events: none;
}