/* ==========================================================================
   Déjalo a la IA — capa de animación de la web pública.
   Regla: el contenido se ve completo sin JS y sin animaciones. Todo lo que
   anima vive bajo html.hm, que sólo existe si el visitante NO pidió reducir
   movimiento. Sólo se carga en páginas públicas (partials/marketing_motion).
   ========================================================================== */

:root { --hm-ease: cubic-bezier(.22, 1, .36, 1); --hm-green: #19b96b; --hm-mint: #76e7a4; }

/* Barra de progreso de lectura */
.hm-progress { position: fixed; inset: 0 0 auto 0; z-index: 3000; height: 3px; transform-origin: 0 50%;
  transform: scaleX(0); background: linear-gradient(90deg, #19b96b, #76e7a4 60%, #0ea5e9); pointer-events: none; }

/* ── Hero: entrada escalonada ─────────────────────────────────────────── */
@keyframes hm-rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hm-float-in { from { opacity: 0; transform: perspective(1200px) rotateX(10deg) translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
html.hm .m-hero-copy > *, html.hm .g-hero-grid > div:first-child > * { animation: hm-rise .9s var(--hm-ease) both; }
html.hm .m-hero-copy > :nth-child(2), html.hm .g-hero-grid > div:first-child > :nth-child(2) { animation-delay: .12s; }
html.hm .m-hero-copy > :nth-child(3), html.hm .g-hero-grid > div:first-child > :nth-child(3) { animation-delay: .26s; }
html.hm .m-hero-copy > :nth-child(4), html.hm .g-hero-grid > div:first-child > :nth-child(4) { animation-delay: .38s; }
html.hm .m-hero-copy > :nth-child(5), html.hm .g-hero-grid > div:first-child > :nth-child(5) { animation-delay: .48s; }
html.hm .m-hero-visual { animation: hm-float-in 1.2s .3s var(--hm-ease) both; }

/* Palabras destacadas con degradado en movimiento lento */
.m-grad { color: var(--m-green-dark, #087048); }
@keyframes hm-shine { to { background-position: 200% 50%; } }
html.hm .m-grad { background-image: linear-gradient(100deg, #087048 0%, #19b96b 25%, #0ea5e9 50%, #19b96b 75%, #087048 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hm-shine 8s linear infinite; }

/* Botón principal: brillo que cruza */
html.hm .m-btn-primary { position: relative; overflow: hidden; isolation: isolate; }
html.hm .m-btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: hm-sweep 4.8s 1.4s ease-in-out infinite; }
@keyframes hm-sweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Foco de luz que sigue al cursor en el hero */
.hm-spotlight { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(560px circle at var(--hm-x, 70%) var(--hm-y, 40%), rgba(25, 185, 107, .13), transparent 62%);
  transition: opacity .6s ease; }
html.hm .m-hero:hover .hm-spotlight, html.hm .g-hero:hover .hm-spotlight { opacity: 1; }
.m-hero-grid { position: relative; }

/* Inclinación 3D de la tarjeta de chat */
html.hm [data-hm-tilt] { perspective: 1400px; }
html.hm [data-hm-tilt] .m-chat-card, html.hm [data-hm-tilt] .x-phone { transform: rotateX(var(--hm-rx, 0deg)) rotateY(var(--hm-ry, 0deg));
  transition: transform .5s var(--hm-ease); will-change: transform; }

/* Chat del hero: conversación que se reproduce en bucle */
@keyframes hm-bubble { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
html.hm [data-hm-chat].is-playing { align-content: start; }
html.hm [data-hm-chat].is-playing [data-hm-step] { display: none; }
html.hm [data-hm-chat].is-playing [data-hm-step].is-shown { display: block; animation: hm-bubble .45s var(--hm-ease) both; }
html.hm [data-hm-chat].is-playing .m-handoff.is-shown { display: flex; }
html.hm [data-hm-chat].is-playing .x-voice.is-shown { display: flex; }

/* iPhone del hero: flotación suave del marco (la inclinación va en .x-phone) */
@keyframes hm-phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
html.hm .m-hero .x-phone-frame { animation: hm-phone-float 6.5s ease-in-out infinite; }
/* Cursor en la barra de mensaje mientras el cliente tipea */
html.hm .x-field.has-text::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px;
  vertical-align: -2px; background: #1fa855; animation: hm-caret .8s steps(1) infinite; }
@keyframes hm-caret { 50% { opacity: 0; } }
.hm-typing { display: none; width: 58px; padding: 12px 14px; border-radius: 15px; background: #fff;
  box-shadow: 0 3px 10px rgba(10, 22, 40, .06); }
.hm-typing.me { margin-left: auto; background: #d9fdd3; }
.hm-typing i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #94a3b8;
  animation: hm-dot 1.1s infinite ease-in-out; }
.hm-typing i:nth-child(2) { animation-delay: .15s; } .hm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hm-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
html.hm [data-hm-chat].is-playing .hm-typing.is-shown { display: block; }
html.hm .m-chat-dot { animation: hm-pulse 2.2s infinite; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(25, 185, 107, .45); } 70% { box-shadow: 0 0 0 9px rgba(25, 185, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 185, 107, 0); } }

/* ── Cinta de consultas de ejemplo ─────────────────────────────────────── */
.hm-questions { padding: 30px 0 34px; border-bottom: 1px solid var(--m-line, #dce4ea); background: #fff; overflow: hidden; }
.hm-questions-title { max-width: 1180px; margin: 0 auto 16px; padding: 0 20px; color: var(--m-muted, #657186);
  font-size: 15px; text-align: center; }
.hm-questions-title b { color: var(--m-ink, #0a1628); }
.hm-marquee { display: grid; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-marquee-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0 16px; list-style: none; }
.hm-marquee-row li { padding: 9px 15px; border: 1px solid #d9e7df; border-radius: 999px; background: #f5fbf7;
  color: var(--m-text, #27364a); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hm-marquee-row li.me { background: #e7fbe3; border-color: #c7efbf; }
html.hm .hm-marquee.is-running .hm-marquee-row { flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  padding: 0; animation: hm-marquee 52s linear infinite; }
html.hm .hm-marquee.is-running .hm-reverse { animation-direction: reverse; animation-duration: 60s; }
html.hm .hm-marquee.is-running:hover .hm-marquee-row { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* ── Apariciones al hacer scroll (sólo elementos armados por el JS) ─────── */
html.hm .hm-armed { opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity .8s var(--hm-ease), transform .8s var(--hm-ease), filter .8s var(--hm-ease);
  transition-delay: var(--hm-delay, 0s); }
html.hm .hm-armed.is-visible { opacity: 1; transform: none; filter: none; }

/* Pasos numerados: el número "late" al aparecer */
@keyframes hm-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
html.hm .m-result.is-visible .m-number { animation: hm-pop .5s .25s var(--hm-ease) both; }

/* Flujo AIA → persona → equipo → AIA: el turno recorre los nodos */
.m-team-node { transition: background .45s ease, color .45s ease, transform .45s var(--hm-ease), box-shadow .45s ease; }
.m-team-arrow { transition: color .45s ease, transform .45s var(--hm-ease); }
html.hm .m-team-flow .is-active.m-team-node { background: var(--m-ink, #0a1628); color: #fff; transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(10, 22, 40, .18); }
html.hm .m-team-flow .is-active.m-team-node small { color: #76e7a4; }
html.hm .m-team-flow .is-active.m-team-arrow { color: var(--hm-green); transform: translateX(3px); }

/* Recompensas: la barra se completa al entrar en pantalla */
html.hm [data-hm-progress] span { transition: background .5s ease, transform .5s var(--hm-ease); }
html.hm [data-hm-progress].is-filling span { background: #c9d9d0; }
html.hm [data-hm-progress].is-filling span.is-on { background: var(--hm-green); transform: scaleY(1.25); }
html.hm [data-hm-progress].is-filling span.is-last.is-on { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, .18); }

/* Audio: la onda "suena" */
@keyframes hm-wave { 0%, 100% { opacity: .35; transform: scaleY(.7); } 50% { opacity: .75; transform: scaleY(1.1); } }
html.hm .m-audio-wave { animation: hm-wave 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
html.hm .m-audio-button { animation: hm-pulse-orange 2.4s infinite; }
@keyframes hm-pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(231, 111, 60, .45); } 70% { box-shadow: 0 0 0 10px rgba(231, 111, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 111, 60, 0); } }

/* Tarjetas con borde luminoso que sigue al cursor */
html.hm .hm-glow { position: relative; isolation: isolate;
  transition: transform .35s var(--hm-ease), box-shadow .35s ease, border-color .35s ease; }
html.hm .hm-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--hm-gx, 50%) var(--hm-gy, 50%), rgba(25, 185, 107, .12), transparent 60%);
  transition: opacity .35s ease; }
html.hm .hm-glow:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(10, 22, 40, .09); }
html.hm .hm-glow:hover::before { opacity: 1; }

/* Llamado final: brillo suave de fondo */
html.hm .m-final { position: relative; overflow: hidden; isolation: isolate; }
html.hm .m-final::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; left: 50%; top: 50%;
  border-radius: 50%; background: radial-gradient(circle, rgba(25, 185, 107, .22), transparent 65%);
  transform: translate(-50%, -50%); animation: hm-breathe 7s ease-in-out infinite; pointer-events: none; }
@keyframes hm-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }

/* Rubros: el panel elegido entra suave */
html.hm .x-tabs.is-tabbed .x-panel:not([hidden]) { animation: hm-rise .55s var(--hm-ease) both; }

/* Un día con AIA: la línea se dibuja y los hitos se encienden */
html.hm [data-x-timeline].is-drawing::before { transform: scaleY(0); transition: transform 1.8s var(--hm-ease); }
html.hm [data-x-timeline].is-drawn::before { transform: scaleY(1); }
html.hm .x-moment::before { transition: background .4s ease, box-shadow .4s ease; }
html.hm [data-x-timeline].is-drawn .x-moment::before { background: var(--hm-green); box-shadow: 0 0 0 5px rgba(25, 185, 107, .16); }

@media (max-width: 640px) {
  .hm-questions { padding: 24px 0 26px; }
  .hm-marquee-row li { font-size: 13px; padding: 8px 13px; }
}

/* Red de seguridad: si el sistema pide menos movimiento, nada anima. */
@media (prefers-reduced-motion: reduce) {
  html.hm *, html.hm *::before, html.hm *::after { animation: none !important; transition: none !important; }
  html.hm .hm-armed { opacity: 1; transform: none; filter: none; }
}
@media print { html.hm .hm-armed { opacity: 1 !important; transform: none !important; filter: none !important; } }