/* ==========================================================================
   EDU21.AI — HOME MOTION LAYER
   Capa de animación sobre home-v2.css. Regla de oro: el contenido se ve
   completo sin JS ni animaciones. Todo lo que anima vive bajo html.hm, que
   solo se agrega si el usuario NO pidió reducir movimiento.
   ========================================================================== */

:root {
  --hm-violet: #8068f6;
  --hm-violet-2: #9788ff;
  --hm-cyan: #70d9e3;
  --hm-green: #84deb0;
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── 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, var(--hm-violet), var(--hm-cyan));
  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(12deg) translateY(40px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
html.hm .home-v2 .hero-content > * {
  animation: hm-rise .9s var(--hm-ease) both;
}
html.hm .home-v2 .hero-content > :nth-child(1) { animation-delay: .05s; }
html.hm .home-v2 .hero-content > :nth-child(2) { animation-delay: .15s; }
html.hm .home-v2 .hero-content > :nth-child(3) { animation-delay: .30s; }
html.hm .home-v2 .hero-content > :nth-child(4) { animation-delay: .42s; }
html.hm .home-v2 .hero-content > :nth-child(5) { animation-delay: .52s; }
html.hm .home-v2 .hero-content > :nth-child(6) { animation-delay: .62s; }
html.hm .home-v2 .hero-mockup .mockup-window {
  animation: hm-float-in 1.2s .35s var(--hm-ease) both;
}

/* Degradado del título en movimiento lento */
@keyframes hm-shine { to { background-position: 200% 50%; } }
html.hm .home-v2 .hero-title .gradient-text {
  background-image: linear-gradient(103deg, #d4ceff 0%, #9788ff 25%, #70d9e3 50%, #9788ff 75%, #d4ceff 100%);
  background-size: 200% 100%;
  animation: hm-shine 9s linear infinite;
}

/* Botón principal: brillo que cruza */
html.hm .home-v2 .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
html.hm .home-v2 .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: hm-sweep 4.5s 1.6s 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 */
.home-v2 .hm-spotlight {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--hm-x, 70%) var(--hm-y, 40%), rgba(128, 104, 246, .16), transparent 62%);
  transition: opacity .6s ease;
}
html.hm .home-v2 .hero:hover .hm-spotlight { opacity: 1; }

/* Mockup: inclinación 3D */
html.hm .home-v2 [data-hm-tilt] { perspective: 1400px; }
html.hm .home-v2 [data-hm-tilt] .mockup-window {
  transform: rotateX(var(--hm-rx, 0deg)) rotateY(var(--hm-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--hm-ease);
  will-change: transform;
}

/* Mockup: simulación de generación en vivo */
.home-v2 .workflow-mockup-list article { position: relative; overflow: hidden; }
.home-v2 .hm-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--hm-violet), var(--hm-cyan));
  opacity: 0;
}
.home-v2 [data-hm-topic] { display: inline-block; min-height: 1.2em; }
.home-v2 [data-hm-topic].hm-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--hm-cyan);
  animation: hm-caret .8s steps(1) infinite;
}
@keyframes hm-caret { 50% { opacity: 0; } }

.home-v2 .workflow-mockup-list article.hm-idle { opacity: .45; }
.home-v2 .workflow-mockup-list article.hm-idle b { color: #626980; }
.home-v2 .workflow-mockup-list article.hm-working {
  border-color: rgba(128, 104, 246, .45);
  background: rgba(128, 104, 246, .08);
}
.home-v2 .workflow-mockup-list article.hm-working b { color: #c9c1ff; }
.home-v2 .workflow-mockup-list article.hm-working .hm-bar {
  opacity: 1;
  animation: hm-fill 1.1s var(--hm-ease) forwards;
}
@keyframes hm-fill { to { transform: scaleX(1); } }
.home-v2 .workflow-mockup-list article.hm-done {
  border-color: rgba(132, 222, 176, .28);
  transition: border-color .4s ease, opacity .4s ease;
}
.home-v2 .workflow-mockup-list article.hm-done b { animation: hm-pop .45s var(--hm-ease); }
.home-v2 .workflow-mockup-list article.hm-done .workflow-mockup-icon { animation: hm-pop .45s var(--hm-ease); }
@keyframes hm-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ── Marquee de temas ─────────────────────────────────────────────────── */
.home-v2 .hm-topics {
  padding: 34px 0 38px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, rgba(128, 104, 246, .05), transparent);
  overflow: hidden;
}
.home-v2 .hm-topics-title {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 16px;
  color: #9ba1b8;
  font-size: .95rem;
  text-align: center;
}
.home-v2 .hm-topics-title span { color: #fff; font-weight: 700; }
.home-v2 .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);
}
.home-v2 .hm-marquee-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
}
.home-v2 .hm-marquee-row button {
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: #d9dcea;
  font: 600 .88rem/1 Inter, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.home-v2 .hm-marquee-row button:hover,
.home-v2 .hm-marquee-row button:focus-visible {
  border-color: rgba(128, 104, 246, .7);
  background: rgba(128, 104, 246, .16);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}
/* Con JS + movimiento: filas en desplazamiento infinito (el JS duplica los ítems) */
html.hm .home-v2 .hm-marquee.is-running .hm-marquee-row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  padding: 0;
  animation: hm-marquee 48s linear infinite;
}
html.hm .home-v2 .hm-marquee.is-running .hm-reverse { animation-direction: reverse; animation-duration: 56s; }
html.hm .home-v2 .hm-marquee.is-running:hover .hm-marquee-row,
html.hm .home-v2 .hm-marquee.is-running:focus-within .hm-marquee-row { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* Campo del demo resaltado al elegir un tema */
@keyframes hm-flash {
  0% { box-shadow: 0 0 0 0 rgba(128, 104, 246, .7); }
  100% { box-shadow: 0 0 0 14px rgba(128, 104, 246, 0); }
}
.home-v2 #demo-tema.hm-flash { animation: hm-flash .9s ease-out 2; }

/* ── Flujo: haz que conecta los tres pasos ────────────────────────────── */
.home-v2 [data-hm-flow] { position: relative; }
.home-v2 .hm-beam { display: none; }
html.hm .home-v2 .hm-beam {
  display: block;
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  z-index: 2;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--hm-violet), var(--hm-cyan));
  box-shadow: 0 0 14px rgba(112, 217, 227, .6);
  pointer-events: none;
}
html.hm .home-v2 [data-hm-flow].is-visible .hm-beam { animation: hm-fill 1.6s var(--hm-ease) forwards; }
html.hm .home-v2 [data-hm-flow] .value-pill { transition: background .5s ease; }
html.hm .home-v2 [data-hm-flow] .value-step { transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
html.hm .home-v2 [data-hm-flow].is-visible .value-pill .value-step {
  animation: hm-step-lit .6s var(--hm-ease) both;
}
html.hm .home-v2 [data-hm-flow].is-visible .value-pill:nth-of-type(1) .value-step { animation-delay: .1s; }
html.hm .home-v2 [data-hm-flow].is-visible .value-pill:nth-of-type(2) .value-step { animation-delay: .65s; }
html.hm .home-v2 [data-hm-flow].is-visible .value-pill:nth-of-type(3) .value-step { animation-delay: 1.2s; }
@keyframes hm-step-lit {
  0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(128, 104, 246, .8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(128, 104, 246, 0); }
}

/* ── Sección "Lo que cambia" ──────────────────────────────────────────── */
.home-v2 .hm-contrast { padding: 96px 0; }
.home-v2 .hm-contrast-heading { text-align: center; margin: 0 auto 44px; max-width: 760px; }
.home-v2 .hm-contrast-heading h2 {
  margin: 14px 0 14px;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -.045em;
}
.home-v2 .hm-contrast-heading h2 .gradient-text {
  color: transparent;
  background: linear-gradient(103deg, #d4ceff 5%, #9788ff 46%, #70d9e3 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-v2 .hm-contrast-heading p { color: #9ba1b8; font-size: 1.05rem; line-height: 1.6; }
.home-v2 .hm-contrast-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
}
.home-v2 .hm-col {
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .02);
}
.home-v2 .hm-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.home-v2 .hm-col h3 span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .8rem;
}
.home-v2 .hm-col ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.home-v2 .hm-col li { position: relative; padding-left: 22px; line-height: 1.5; font-size: .98rem; }
.home-v2 .hm-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.home-v2 .hm-col-before h3 { color: #b4b8c9; }
.home-v2 .hm-col-before h3 span { background: rgba(255, 107, 107, .12); color: #ff8a8a; }
.home-v2 .hm-col-before li { color: #8a8fa3; }
.home-v2 .hm-col-before li::before { background: #4b4f63; }
.home-v2 .hm-col-after {
  border-color: rgba(128, 104, 246, .38);
  background: linear-gradient(160deg, rgba(128, 104, 246, .14), rgba(112, 217, 227, .05));
  box-shadow: 0 30px 80px -40px rgba(128, 104, 246, .6);
}
.home-v2 .hm-col-after h3 { color: #fff; }
.home-v2 .hm-col-after h3 span { background: rgba(132, 222, 176, .16); color: var(--hm-green); }
.home-v2 .hm-col-after li { color: #e6e8f2; }
.home-v2 .hm-col-after li::before { background: linear-gradient(135deg, var(--hm-violet-2), var(--hm-cyan)); }
.home-v2 .hm-contrast-arrow {
  display: grid;
  place-items: center;
  color: var(--hm-violet-2);
  font-size: 1.6rem;
  font-weight: 800;
}
.home-v2 .hm-contrast-cta { margin-top: 24px; width: 100%; justify-content: center; }

/* Tachado animado de la columna "antes" + ítems que entran en la de "después" */
.home-v2 .hm-col-before li span {
  background: linear-gradient(#ff8a8a, #ff8a8a) 0 58% / 100% 1.5px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.hm .home-v2 .hm-col-before.hm-armed li span { background-size: 0 1.5px; }
html.hm .home-v2 .hm-col-before.is-visible li span {
  background-size: 100% 1.5px;
  transition: background-size .7s var(--hm-ease);
}
html.hm .home-v2 .hm-col-before.is-visible li:nth-child(2) span { transition-delay: .2s; }
html.hm .home-v2 .hm-col-before.is-visible li:nth-child(3) span { transition-delay: .4s; }
html.hm .home-v2 .hm-col-before.is-visible li:nth-child(4) span { transition-delay: .6s; }
html.hm .home-v2 .hm-col-after.hm-armed li { opacity: 0; transform: translateX(-12px); }
html.hm .home-v2 .hm-col-after.is-visible li {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .6s var(--hm-ease);
}
html.hm .home-v2 .hm-col-after.is-visible li:nth-child(1) { transition-delay: .5s; }
html.hm .home-v2 .hm-col-after.is-visible li:nth-child(2) { transition-delay: .65s; }
html.hm .home-v2 .hm-col-after.is-visible li:nth-child(3) { transition-delay: .8s; }
html.hm .home-v2 .hm-col-after.is-visible li:nth-child(4) { transition-delay: .95s; }

/* ── Aparición de secciones al hacer scroll ───────────────────────────── */
/* Solo se oculta lo que el JS marcó con .hm-armed, y el JS lo desarma por
   timeout si el observer nunca dispara: nada puede quedar invisible. */
html.hm .home-v2 .hm-armed.hm-rev {
  opacity: 0;
  transform: translateY(28px);
}
html.hm .home-v2 .hm-rev.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .9s var(--hm-ease);
}

/* ── Tarjetas: borde luminoso que sigue al cursor ─────────────────────── */
html.hm .home-v2 .hm-glow { position: relative; }
html.hm .home-v2 .hm-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--hm-gx, 50%) var(--hm-gy, 50%), rgba(151, 136, 255, .85), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
html.hm .home-v2 .hm-glow:hover::before { opacity: 1; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .home-v2 .hm-contrast { padding: 64px 0; }
  .home-v2 .hm-contrast-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-v2 .hm-contrast-arrow { transform: rotate(90deg); height: 32px; }
  .home-v2 .hm-col { padding: 24px 20px; }
  html.hm .home-v2 .hm-beam { display: none; }
}

/* ── Movimiento reducido: todo quieto y visible ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .hm-progress,
  .home-v2 .hm-spotlight { display: none; }
  .home-v2 [data-hm-topic].hm-typing::after { animation: none; }
}