/* ==========================================================================
   Chatealo · Animación hero (celular 3D + elementos que se abren)
   Escenario de 1920×1080 que se escala para ocupar el contenedor.
   Origen: videos/animacion-hero (rutas adaptadas a la maqueta, sin la página demo).
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/Inter-Bold.ttf") format("truetype"); }

.hero-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* valores por defecto del navegador: la animación se maquetó sin estilos heredados */
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

.hero-anim .stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transform: scale(var(--s, 1));
  perspective: 2200px;
  perspective-origin: 1000px 540px; /* centro del celular */
}

/* Contenedor que gira en Y siguiendo al cursor (después de la entrada) */
.hero-anim .scene {
  position: absolute;
  inset: 0;
  transform-origin: 1000px 540px;
}

/* Modo 3D: se activa al terminar la entrada, con el giro en 0 */
.hero-anim.is-3d .scene,
.hero-anim.is-3d .el,
.hero-anim.is-3d .phone-rig,
.hero-anim.is-3d .phone-scene { transform-style: preserve-3d; }
.hero-anim.is-3d .phone-scene { perspective: none; }

/* Oculto hasta que GSAP arma el estado inicial (evita parpadeo) */
.hero-anim:not(.is-ready) .stage { visibility: hidden; }

/* --------------------------------------------------------------------------
   Elementos posicionados (coordenadas de la composición 1920×1080)
   -------------------------------------------------------------------------- */
.el {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  z-index: var(--z, 1);
}

.el .orbit,
.el .depth,
.el .float { position: absolute; inset: 0; }

/* Órbita (js): las piezas salen del escenario para rodear el texto del hero */
.hero-anim.has-orbit { overflow: visible; }
.hero-anim.is-3d .orbit { transform-style: preserve-3d; }
.el img.fill { display: block; width: 100%; height: 100%; }

/* Contenido diseñado en px nativos de cada pieza y escalado a su tamaño final */
.native {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--nw) * 1px);
  height: calc(var(--nh) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--k));
}

.band {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Celular 3D
   -------------------------------------------------------------------------- */
.phone-el { z-index: 20; }

.phone-glow {
  position: absolute;
  left: 1000px;
  top: 527px;
  width: 820px;
  height: 820px;
  margin: -410px 0 0 -410px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 211, 102, .22), rgba(37, 211, 102, .08) 55%, rgba(37, 211, 102, 0));
  pointer-events: none;
  z-index: 0;
}

.phone-shadow {
  position: absolute;
  left: 50%;
  top: calc(100% + 44px);
  width: 300px;
  height: 46px;
  margin-left: -150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, .30), rgba(15, 23, 42, .12) 55%, rgba(15, 23, 42, 0));
  filter: blur(6px);
  z-index: 0;
}

/* Estela de luz: canvas de 1000×1100 centrado en el celular (320×674) */
.swirl {
  position: absolute;
  left: -340px;
  top: -213px;
  width: 1000px;
  height: 1100px;
  pointer-events: none;
}
.swirl-back  { z-index: 0; }
.swirl-front { z-index: 2; }

.phone-scene {
  position: absolute;
  inset: 0;
  perspective: 2200px; /* igual a la del escenario: el paso a 3D no se nota */
  z-index: 1;
}

.phone3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.ph-face,
.ph-side,
.ph-slice {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ph-face { inset: 0; }
.ph-front { transform: translateZ(16.4px); }
.ph-back  { transform: rotateY(180deg) translateZ(16.4px); }

.ph-face > img.frame {
  position: absolute;
  left: -73.2px;
  top: -14.6px;
  width: 466.8px;
  height: 700.2px;
  max-width: none;
  pointer-events: none;
}

/* Cantos: sólo el tramo recto; las esquinas las cubren las capas internas */
.ph-side {
  top: 58px;
  left: calc(50% - 16.4px);
  width: 32.8px;
  height: calc(100% - 116px);
  overflow: hidden;
}
.ph-side img { display: block; width: 100%; height: 674px; margin-top: -58px; }
.ph-left  { transform: rotateY(-90deg) translateZ(160px); }
.ph-right { transform: rotateY(90deg) translateZ(160px); }

/* Capas internas: dan volumen a las esquinas redondeadas durante el giro */
.ph-slice {
  inset: 1px;
  border-radius: 57px;
  background: #0b0b0c;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform: translateZ(var(--dz));
}

.screen {
  position: absolute;
  left: 12.5px;
  top: 12.5px;
  width: 295px;
  height: 649px;
  border-radius: 45.5px;
  overflow: hidden;
  background: #000;
  /* Evita que overflow+radius pierda el recorte dentro del contexto 3D */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

.screen-ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 308px;
  height: 678px;
  transform-origin: 50% 45%;
  background: #fff;
}

.screen-ui > .ui-inner {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: scale(.958);
}

/* Haz de luz que recorre la pantalla al encenderse */
.screen-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .5) 47%, rgba(236, 255, 245, .18) 52%, rgba(255, 255, 255, 0) 62%);
  background-size: 100% 320%;
  background-position: 0 100%;
  pointer-events: none;
  opacity: 0;
}

.island {
  position: absolute;
  left: 50%;
  top: 19.5px;
  width: 93px;
  height: 25px;
  margin-left: -46.5px;
  border-radius: 13px;
  background: #000;
  z-index: 3;
}
.island::after {
  content: '';
  position: absolute;
  right: 9px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3350, #0a0c14 70%);
}

.glare {
  position: absolute;
  inset: 0;
  border-radius: 58px;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .05) 53%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%;
  background-position: 140% 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Pantalla WhatsApp (coordenadas de captura: 308×678)
   -------------------------------------------------------------------------- */
.wa { position: absolute; inset: 0; color: #111b21; }
.wa-header {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 117px;
  background: #025b49;
  color: #fff;
}
.wa-time { position: absolute; left: 28px; top: 12px; font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.wa-status { position: absolute; right: 20px; top: 13px; display: flex; gap: 5px; align-items: center; }
.wa-status svg { display: block; fill: #fff; }
.wa-title { position: absolute; left: 18px; top: 47px; font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.wa-icons { position: absolute; top: 48px; left: 0; right: 0; height: 22px; }
.wa-icons svg { position: absolute; top: 0; width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-tabs { position: absolute; left: 0; right: 0; top: 88px; height: 20px; font-size: 12.5px; }
.wa-tab { position: absolute; top: 0; transform: translateX(-50%); color: rgba(255, 255, 255, .88); font-weight: 500; white-space: nowrap; }
.wa-tab.is-active { transform: none; font-weight: 600; color: #fff; }
.wa-count {
  position: absolute; left: 43.5px; top: -1.5px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #1fd18a; color: #024c3c;
  font-size: 9.5px; font-weight: 700; line-height: 19px; text-align: center;
}
.wa-underline { position: absolute; left: 10px; top: 113px; width: 94px; height: 3px; border-radius: 3px 3px 0 0; background: #25d366; transform-origin: 0 50%; }

.wa-list { position: absolute; left: 0; right: 0; top: 117px; bottom: 0; }
.wa-row { position: absolute; left: 0; right: 0; height: 61px; }
.wa-av {
  position: absolute; left: 10.5px; top: 5.5px;
  width: 50px; height: 50px; border-radius: 50%;
  background-image: url('../assets/hero-anim/wa-captura.jpg');
  background-size: 2000px 1125px;
}
.wa-name { position: absolute; left: 78px; top: 11px; font-size: 13.5px; font-weight: 600; letter-spacing: -.15px; white-space: nowrap; }
.wa-msg { position: absolute; left: 78px; top: 30px; right: 40px; font-size: 11.5px; color: #667781; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.wa-msg svg { flex: none; }
.wa-hour { position: absolute; right: 14px; top: 12px; font-size: 10.5px; color: #667781; }
.wa-badge {
  position: absolute; right: 15px; top: 31px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #1fc15f; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 21px; text-align: center;
}
.wa-row::after { content: ''; position: absolute; left: 66px; right: 0; bottom: 0; height: 1px; background: #eef1f2; }
.wa-row:last-child::after { display: none; }
.wa-fab {
  position: absolute; left: 236px; top: 604px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #0db754;
  box-shadow: 0 6px 14px rgba(13, 183, 84, .35);
  display: grid; place-items: center;
}
.wa-home { position: absolute; left: 100.5px; top: 666px; width: 107px; height: 5px; border-radius: 3px; background: #111; }

/* --------------------------------------------------------------------------
   Grupo "Dashboard" (recortes circulares de la misma imagen)
   -------------------------------------------------------------------------- */
.grupo-base,
.grupo-av,
.grupo-pill {
  position: absolute;
  inset: 0;
  background: url('../assets/hero-anim/dashboard-grupo.png') 0 0 / 391px 337px no-repeat;
}

/* --------------------------------------------------------------------------
   Tarjeta Volumen (522×523)
   -------------------------------------------------------------------------- */
.card {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: hidden;
}
.vol { border-radius: 30px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .06); }
.vol .abs { position: absolute; white-space: nowrap; }
.vol-icon { left: 35px; top: 33px; width: 42px; height: 42px; border-radius: 10px; background: #18d08c; display: grid; place-items: center; }
.vol-title { left: 95px; top: 41px; font-size: 20px; font-weight: 600; color: #1f2430; letter-spacing: -.3px; }
.vol-live { left: 403px; top: 38px; height: 31px; padding: 0 15px 0 17px; border-radius: 16px; background: #e9f8ee; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: #15803d; }
.vol-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #0cd586; }
.vol-live .pulse { position: absolute; inset: 0; border-radius: 50%; background: #0cd586; opacity: 0; }
.vol-label { font-size: 14.5px; color: #475467; }
.vol-big { font-size: 40px; font-weight: 700; color: #0f172a; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.vol-sub { font-size: 15px; color: #475467; }
.vol-pill { height: 29px; padding: 0 13px; border-radius: 15px; background: #edf9f1; display: flex; align-items: center; gap: 9px; font-size: 13px; color: #344054; }
.vol-pill b { color: #16a34a; font-weight: 600; }
.vol-box { border-radius: 16px; background: #fbfcfc; box-shadow: 0 0 0 1px rgba(15, 23, 42, .035); }
.vol-box-title { font-size: 13.5px; font-weight: 600; color: #1f2937; }
.vol-axis { font-size: 10.5px; color: #667085; text-align: right; width: 24px; }
.vol-bar { width: 15px; bottom: 58px; border-radius: 3px 3px 1px 1px; background: linear-gradient(#3ecb8a, #57d59b); transform-origin: 50% 100%; }
.vol-day { font-size: 10.5px; color: #667085; transform: translateX(-50%); top: 480px; }
.vol-num { font-size: 26px; font-weight: 700; color: #0f172a; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.vol-small { font-size: 12.5px; color: #475467; }

/* --------------------------------------------------------------------------
   Lead Score (364×252)
   -------------------------------------------------------------------------- */
.ls {
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(92, 64, 160, .75), rgba(92, 64, 160, 0) 55%),
    radial-gradient(90% 90% at 100% 100%, rgba(80, 50, 90, .35), rgba(80, 50, 90, 0) 60%),
    #2f3139;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 40px rgba(20, 16, 40, .18);
}
.ls-title { position: absolute; left: 52px; top: 30px; font-size: 15px; font-weight: 600; }
.ls-ring, .ls-track {
  position: absolute; left: 27px; top: 75px; width: 140px; height: 140px; border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px));
}
.ls-track { background: #565f6e; }
.ls-ring {
  --p: 85;
  background: conic-gradient(from 0deg, #7a4cf2, #4a62f0 30%, #2f5eeb 55%, #5048ee 72%, #6a44ec 85%, #6a44ec 100%);
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px)),
    conic-gradient(#000 calc(var(--p) * 1%), transparent 0);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px)) intersect,
    conic-gradient(#000 calc(var(--p) * 1%), transparent 0);
}
.ls-score { position: absolute; left: 27px; top: 108px; width: 140px; text-align: center; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ls-of { position: absolute; left: 27px; top: 158px; width: 140px; text-align: center; font-size: 15px; color: #e4e4e7; }
.ls-list { position: absolute; left: 217px; top: 60px; }
.ls-item { position: absolute; left: 0; height: 20px; display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #f4f4f5; white-space: nowrap; }
.ls-check { position: relative; width: 17px; height: 17px; flex: none; }
.ls-check svg { position: absolute; inset: 0; }
.ls-check .glow {
  position: absolute; inset: -2px; border-radius: 50%;
  background: rgba(52, 211, 153, .55);
  box-shadow: 0 0 12px 5px rgba(52, 211, 153, .45);
}

/* --------------------------------------------------------------------------
   Actividad (535×450) · Notificación (556×186) · Lead Score Promedio (398×199)
   -------------------------------------------------------------------------- */
.act, .notif, .lsp { box-shadow: inset 0 0 0 2px #c4c6c8; }
.act { border-radius: 38px; }
.act .abs, .notif .abs, .lsp .abs { position: absolute; white-space: nowrap; }
.act-title { left: 40px; top: 43px; font-size: 22px; font-weight: 600; color: #2b2a2c; letter-spacing: -.3px; }
.act-hoy { left: 406px; top: 44px; font-size: 20px; color: #373435; display: flex; align-items: center; gap: 14px; }
.act-chart { position: absolute; left: 0; top: 0; overflow: visible; }
.act-label { top: 293px; font-size: 15px; color: #373435; }
.act-val { top: 331px; font-size: 26px; font-weight: 700; color: #2b2a2c; font-variant-numeric: tabular-nums; }
.act-pct { top: 380px; font-size: 15px; font-weight: 500; color: #22c55e; }

.notif { border-radius: 30px; box-shadow: inset 0 0 0 2px #cccecf, 0 22px 48px rgba(15, 23, 42, .10); }
.notif-icon { left: 24px; top: 23px; width: 50px; height: 50px; border-radius: 9px; background: #7c3aed; display: grid; place-items: center; }
.notif-t1 { left: 94px; top: 21px; font-size: 23px; font-weight: 600; color: #18181b; letter-spacing: -.2px; }
.notif-t2 { left: 94px; top: 52px; font-size: 22px; color: #27272a; line-height: 33px; }
.notif-t3 { left: 94px; top: 136px; font-size: 22px; color: #71717a; }

.lsp { border-radius: 22px; box-shadow: inset 0 0 0 1.5px #c9cbcd; }
.lsp-title { left: 36px; top: 33px; font-size: 17px; font-weight: 500; color: #27272a; display: flex; align-items: center; gap: 9px; }
.lsp-num { left: 34px; top: 80px; font-size: 54px; font-weight: 700; color: #e5383b; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.lsp-tag { left: 36px; top: 142px; font-size: 20px; font-weight: 600; color: #e5383b; }

/* --------------------------------------------------------------------------
   Íconos circulares y persona
   -------------------------------------------------------------------------- */
.circle-icon { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; }
.circle-marca { background: linear-gradient(145deg, #25e089, #0fbd78); box-shadow: 0 16px 36px rgba(37, 224, 137, .3); }
.circle-wa  { background: #1fc55a; box-shadow: 0 16px 36px rgba(31, 197, 90, .28); }
/* Canales conectados, cada uno con su color de marca */
.circle-ig   { background: radial-gradient(circle at 30% 107%, #fdd76a 0%, #f58529 25%, #dd2a7b 55%, #8134af 78%, #515bd4 100%); box-shadow: 0 16px 36px rgba(221, 42, 123, .26); }
.circle-ms   { background: linear-gradient(180deg, #0099ff 0%, #a033ff 55%, #ff5280 100%); box-shadow: 0 16px 36px rgba(160, 51, 255, .26); }
.circle-tg   { background: linear-gradient(145deg, #37b7ec, #1d93d2); box-shadow: 0 16px 36px rgba(42, 171, 238, .28); }
.circle-line { background: #06c755; box-shadow: 0 16px 36px rgba(6, 199, 85, .26); }
.circle-mail { background: linear-gradient(145deg, #7c7fe8, #6366d1); box-shadow: 0 16px 36px rgba(99, 102, 209, .3); }

.persona-circle { position: absolute; inset: 0; border-radius: 50%; background: #16b84e; }
.persona-photo {
  position: absolute; inset: 9px; border-radius: 50%;
  background: url('../assets/hero-anim/l3-avatar.webp') 41% 18% / 175% auto no-repeat;
}