/* ==========================================================================
   Movimiento — inspirado en Animate UI (animate-ui.com): resortes, ondas al
   tocar, resaltado que sigue al cursor, números que se deslizan, diálogos
   que entran con profundidad, acordeones suaves, casillas que se dibujan,
   tooltips con rebote, íconos que se mueven, burbuja que sigue al cursor y
   transición entre pantallas. Implementado solo con CSS + motion.js.
   Complementa effects.css, con la misma regla: el movimiento acompaña,
   nunca distrae. Todo se apaga con prefers-reduced-motion.
   ========================================================================== */

/* ---------- Resortes ----------
   Las curvas imitan los resortes de Animate UI (rigidez / amortiguación):
   --mo-spring 200/20 (aparecer, deslizar), --mo-spring-snappy 350/35
   (resaltado), --mo-spring-bouncy 400/20 (saltitos), --mo-spring-soft
   100/30 (barras de progreso). Sin linear() quedan curvas parecidas. */
:root {
  --mo-spring: cubic-bezier(.34, 1.3, .64, 1);
  --mo-spring-snappy: cubic-bezier(.2, .8, .2, 1);
  --mo-spring-bouncy: cubic-bezier(.34, 1.7, .64, 1);
  --mo-spring-soft: cubic-bezier(.16, 1, .3, 1);
  --mo-d: 590ms;
  --mo-d-snappy: 410ms;
  --mo-d-bouncy: 680ms;
  --mo-d-soft: 1200ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mo-spring: linear(0, 0.025, 0.088, 0.176, 0.277, 0.38, 0.485, 0.584, 0.674, 0.752, 0.821, 0.879, 0.926, 0.964, 0.991, 1.012, 1.027, 1.036, 1.041, 1.043, 1.042, 1.039, 1.036, 1.032, 1.027, 1.023, 1.018, 1.015, 1.011, 1.008, 1.006, 1.003, 1.002, 1.001, 1, 0.999, 1);
    --mo-spring-snappy: linear(0, 0.021, 0.073, 0.143, 0.222, 0.301, 0.383, 0.461, 0.533, 0.597, 0.656, 0.709, 0.756, 0.796, 0.829, 0.859, 0.884, 0.905, 0.922, 0.937, 0.95, 0.96, 0.968, 0.975, 0.98, 0.984, 0.988, 0.991, 0.993, 0.995, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1);
    --mo-spring-bouncy: linear(0, 0.065, 0.221, 0.42, 0.625, 0.805, 0.955, 1.063, 1.129, 1.158, 1.16, 1.142, 1.113, 1.08, 1.049, 1.021, 0.999, 0.985, 0.977, 0.974, 0.975, 0.979, 0.984, 0.989, 0.994, 0.998, 1.001, 1.003, 1.004, 1.004, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1);
    --mo-spring-soft: linear(0, 0.071, 0.195, 0.318, 0.427, 0.518, 0.597, 0.662, 0.717, 0.763, 0.801, 0.833, 0.861, 0.883, 0.902, 0.918, 0.931, 0.942, 0.952, 0.96, 0.966, 0.972, 0.976, 0.98, 0.983, 0.986, 0.988, 0.99, 0.992, 0.993, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 1);
    --mo-d-soft: 1670ms;
  }
}

/* ---------- Botones: crecen un poco al pasar el mouse y se hunden al tocar (Button) ---------- */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform var(--mo-d) var(--mo-spring); }
.icon-btn, .menu-toggle, .chip, .space-link, .tab { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform var(--mo-d) var(--mo-spring); }
.quiz-answer { transition: border-color .15s ease, background-color .15s ease, transform var(--mo-d) var(--mo-spring); }
.web-tier { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform var(--mo-d) var(--mo-spring); }
.mini-card { transition: border-color .15s ease, box-shadow .2s ease, transform var(--mo-d) var(--mo-spring); }
.rubro-card { transition: border-color .2s ease, box-shadow .2s ease, transform var(--mo-d) var(--mo-spring), opacity .7s ease, filter .7s ease; }
.rubro-icon { transition: transform var(--mo-d) var(--mo-spring-bouncy); }
.help-fab { transition: background-color .2s ease, transform var(--mo-d) var(--mo-spring); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: scale(1.03); }
  .btn-block:hover:not(:disabled) { transform: scale(1.015); }
  .icon-btn:hover:not(:disabled), .menu-toggle:hover { transform: scale(1.06); }
  .space-link:hover { transform: scale(1.04); }
  .chip:hover { transform: scale(1.04); }
  .help-fab:hover { transform: translateY(-2px) scale(1.03); }
}
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .menu-toggle:active, .space-link:active,
.chip:active, .tab:active, .quiz-answer:active, .web-tier:active, .help-fab:active {
  transform: scale(.96);
  transition-duration: .12s;
}

/* ---------- Ondas al tocar (Ripple Button) ---------- */
.mo-ondas { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.mo-ondas i { position: absolute; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); }

/* ---------- Resaltado que sigue al cursor (Highlight / Tabs) ---------- */
.has-mo-hl { isolation: isolate; }
.tabs.has-mo-hl { position: relative; }
@media (min-width: 1241px) {
  html:not(.text-lg) .site-nav.has-mo-hl { position: relative; }
}
.mo-hl {
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: var(--r-s);
  background: var(--surface-2);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform var(--mo-d-snappy) var(--mo-spring-snappy), width var(--mo-d-snappy) var(--mo-spring-snappy), height var(--mo-d-snappy) var(--mo-spring-snappy), opacity .18s ease;
}
.mo-hl.is-on { opacity: 1; }
.mo-hl.is-quieto { transition: opacity .18s ease; }
.mo-hl.is-tab { border-radius: var(--r-full); background: var(--surface); box-shadow: var(--shadow-1); }
.site-nav.has-mo-hl a:hover, .site-nav.has-mo-hl a[aria-current="page"] { background: transparent; }
.tabs.has-mo-hl .tab[aria-current="page"], .tabs.has-mo-hl .tab[aria-selected="true"] { background: transparent; box-shadow: none; }

/* ---------- Números que se deslizan (Sliding Number) ----------
   Cada dígito es una columna del 0 al 9 que se desliza hasta su número.
   Los dígitos se dibujan con CSS: el texto real queda una sola vez, para
   lectores de pantalla y para quien copie el precio. Usan etiquetas
   propias (mo-num, mo-d, mo-s) para que ninguna regla de "span" las alcance. */
mo-num { display: inline-flex; font-variant-numeric: tabular-nums; white-space: nowrap; }
mo-d, mo-s { display: inline-block; height: var(--mo-lh, 1.15em); line-height: var(--mo-lh, 1.15em); overflow: hidden; }
mo-d { width: 1ch; text-align: center; }
mo-d::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  display: block;
  white-space: pre;
  transform: translateY(calc(var(--d, 0) * var(--mo-lh, 1.15em) * -1));
  transition: transform var(--mo-d) var(--mo-spring);
}
mo-d.is-nuevo { animation: mo-aparece .3s ease backwards; }
mo-s::before { content: attr(data-c); white-space: pre; }
.web-total strong { --mo-lh: 1em; }
@keyframes mo-aparece { from { opacity: 0; } }

/* ---------- Diálogo con profundidad (Dialog) ---------- */
dialog.modal[open] { animation: mo-dialogo-entra var(--mo-d) var(--mo-spring) backwards; }
dialog.modal[open]::backdrop { animation: mo-fondo-entra .3s ease backwards; }
dialog.modal.is-closing { animation: mo-dialogo-sale .17s ease-in forwards; }
dialog.modal.is-closing::backdrop { animation: mo-fondo-sale .17s ease-in forwards; }
@keyframes mo-dialogo-entra {
  from { opacity: 0; filter: blur(4px); transform: perspective(700px) rotateX(-12deg) scale(.9) translateY(14px); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes mo-dialogo-sale { to { opacity: 0; filter: blur(4px); transform: perspective(700px) rotateX(8deg) scale(.95) translateY(8px); } }
@keyframes mo-fondo-entra { from { opacity: 0; } }
@keyframes mo-fondo-sale { to { opacity: 0; } }

/* "¡Listo!": el círculo y el check se dibujan */
.envio-head.is-ok > svg circle { stroke-dasharray: 57; stroke-dashoffset: 57; animation: mo-trazo .6s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.envio-head.is-ok > svg path { stroke-dasharray: 12; stroke-dashoffset: 12; animation: mo-trazo .35s cubic-bezier(.65, 0, .35, 1) .6s forwards; }
@keyframes mo-trazo { to { stroke-dashoffset: 0; } }

/* ---------- Casillas que se dibujan (Checkbox) ---------- */
.web-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .28s cubic-bezier(.65, 0, .35, 1); }
.web-extra:has(input:checked) .web-check svg path { stroke-dashoffset: 0; transition-delay: .06s; }
.web-extra:has(input:checked) .web-check { animation: mo-pop var(--mo-d-bouncy) var(--mo-spring-bouncy); }
.check input:checked { animation: mo-pop var(--mo-d-bouncy) var(--mo-spring-bouncy); }
@keyframes mo-pop { from { transform: scale(.55); } }

/* ---------- Acordeón suave (Accordion): crece al abrir y la flecha gira con resorte ---------- */
.mo-acc { display: flow-root; }
.faq summary::after { transition: transform var(--mo-d) var(--mo-spring); }
.faq details.is-closing summary::after { transform: rotate(45deg) translateY(-3px); }

/* ---------- Tooltips con resorte (Tooltip) ---------- */
.mo-tip {
  position: fixed;
  z-index: 400;
  top: 0; left: 0;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  box-shadow: var(--shadow-2);
  font-size: .78rem;
  font-weight: 620;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(.5);
  transform-origin: var(--ox, 50%) 0;
  transition: opacity .12s ease, transform var(--mo-d-bouncy) var(--mo-spring-bouncy);
}
.mo-tip.is-on { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); }
.mo-tip.is-deslizando { transition: opacity .12s ease, transform var(--mo-d-snappy) var(--mo-spring-snappy); }
.mo-tip.is-quieto { transition: opacity .12s ease; }
.mo-tip.is-arriba { transform-origin: var(--ox, 50%) 100%; }
.mo-tip::before {
  content: "";
  position: absolute;
  top: -4px;
  left: var(--ox, 50%);
  width: 8px; height: 8px;
  border-radius: 2px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.mo-tip.is-arriba::before { top: auto; bottom: -4px; }

/* ---------- Íconos que se mueven al pasar el mouse (Animated Icons) ---------- */
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .icon-btn, .help-fab):hover svg[data-i="phone"] { animation: mo-timbre .7s ease; }
  :is(.btn, .icon-btn, .chip):hover svg:is([data-i="whatsapp"], [data-i="chat"], [data-i="send"]) { animation: mo-salto .6s var(--mo-spring-bouncy); }
  :is(.btn, .icon-btn, .chip):hover svg[data-i="search"] { animation: mo-lupa .6s ease; }
  :is(.btn, .chip):hover svg[data-i="spark"] { animation: mo-giro .7s var(--mo-spring); }
  :is(.btn, .hero-video-link):hover svg[data-i="play"] { animation: mo-latido .6s ease; }
  .btn:hover svg[data-i="check"] path { stroke-dasharray: 20; animation: mo-redibuja .45s cubic-bezier(.65, 0, .35, 1); }
  /* Íconos de tarjetas: un saltito al pasar por la tarjeta */
  :is(.servicio, .how-step, .bento-cell, .mini-card):hover :is(.servicio-icono, .how-icon, .std-icon) svg { animation: mo-salto .6s var(--mo-spring-bouncy); }
}
@keyframes mo-timbre {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-9deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}
@keyframes mo-salto { 40% { transform: translateY(-3px) scale(1.1); } }
@keyframes mo-lupa { 50% { transform: scale(1.15) rotate(-8deg); } }
@keyframes mo-giro { to { transform: rotate(180deg); } }
@keyframes mo-latido { 50% { transform: scale(1.15); } }
@keyframes mo-redibuja { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* El ícono del tema entra girando al cambiar */
.theme-btn svg.mo-entra { animation: mo-tema .6s var(--mo-spring-bouncy); }
@keyframes mo-tema { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }

/* ---------- Burbuja que sigue al cursor (Bubble Background) ---------- */
.aurora .mo-burbuja {
  left: 0; top: 0;
  width: 34%; height: 46%;
  background: color-mix(in srgb, var(--negocio) 40%, transparent);
  opacity: 0;
  animation: none;
  transform: translate(calc(var(--bx, 50%) - 50%), calc(var(--by, 50%) - 50%));
  transition: transform var(--mo-d-soft) var(--mo-spring-soft), opacity .8s ease;
}
.aurora.is-siguiendo .mo-burbuja { opacity: 1; }

/* ---------- Test de 1 minuto: cada pregunta entra de lado (Tabs) ---------- */
.quiz > :not(.quiz-progress) { animation: mo-entra-lado var(--mo-d) var(--mo-spring) backwards; }
.quiz > :nth-child(3) { animation-delay: 40ms; }
.quiz > :nth-child(4) { animation-delay: 80ms; }
.quiz > :nth-child(5) { animation-delay: 120ms; }
.quiz > :nth-child(n+6) { animation-delay: 160ms; }
.quiz[data-dir="atras"] > :not(.quiz-progress) { animation-name: mo-entra-lado-atras; }
@keyframes mo-entra-lado { from { opacity: 0; transform: translateX(28px); filter: blur(4px); } }
@keyframes mo-entra-lado-atras { from { opacity: 0; transform: translateX(-28px); filter: blur(4px); } }
/* El tramo recién respondido se llena */
.quiz-progress i.is-done:has(+ .is-current), .quiz-progress i.is-done:last-child {
  background: linear-gradient(var(--negocio), var(--negocio)) left / 100% 100% no-repeat, var(--line);
  animation: mo-llena .7s var(--mo-spring-snappy) backwards;
}
@keyframes mo-llena { from { background-size: 0% 100%; } }

/* ---------- Barras y avisos con resorte (Progress / Toast) ---------- */
.web-scale-bar i { transition: width var(--mo-d-soft) var(--mo-spring-soft); }
.toast { animation: mo-aviso var(--mo-d) var(--mo-spring); }
@keyframes mo-aviso { from { opacity: 0; filter: blur(4px); transform: translateY(16px) scale(.96); } }

/* ---------- Transición entre pantallas (View Transitions + Blur Fade) ----------
   La pantalla nueva aparece sobre la anterior, que se desenfoca debajo sin
   desaparecer: así nunca se ve un fondo vacío. El header y el botón de ayuda
   quedan quietos. */
html.mo-vt-pagina .site-header { view-transition-name: mo-header; }
html.mo-vt-pagina .help-fab { view-transition-name: mo-ayuda; }
html.mo-vt-pagina .demo-bar { view-transition-name: mo-demo; }
html.mo-vt-pagina::view-transition-old(root) { animation: mo-pagina-sale .4s ease both; }
html.mo-vt-pagina::view-transition-new(root) { animation: mo-pagina-entra .45s var(--mo-spring) both; }
@keyframes mo-pagina-sale { to { filter: blur(4px); } }
@keyframes mo-pagina-entra { from { opacity: 0; filter: blur(4px); transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .mo-ondas, .mo-burbuja { display: none; }
  .mo-hl { transition: none; }
  .mo-tip { transition: none; }
}