/* ============================================= */
/* MOTION — animaciones del landing               */
/* html.mo lo pone un script en <head> si el      */
/* usuario no pidió "reducir movimiento".         */
/* Sin JS o con reduce: todo quieto y completo.   */
/* ============================================= */

/* Barra de progreso de lectura */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1100;background:linear-gradient(90deg,var(--primary),#0ea5e9 60%,var(--orange));transform:scaleX(0);transform-origin:left;pointer-events:none}

/* HERO: entrada escalonada */
html.mo .hero-inner>div:first-child>*{animation:moHeroIn .7s cubic-bezier(.2,.7,.2,1) both}
html.mo .hero-inner>div:first-child>:nth-child(1){animation-delay:.1s}
html.mo .hero-inner>div:first-child>:nth-child(2){animation-delay:.22s}
html.mo .hero-inner>div:first-child>:nth-child(3){animation-delay:.36s}
html.mo .hero-inner>div:first-child>:nth-child(4){animation-delay:.5s}
html.mo .hero-inner>div:first-child>:nth-child(5){animation-delay:.64s}
html.mo .hero-visual{animation:moHeroVis .9s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes moHeroIn{from{opacity:0;transform:translateY(22px)}}
@keyframes moHeroVis{from{opacity:0;transform:translateY(30px) scale(.97)}}

/* HERO: mockup con capturas que se turnan */
.hero-screens{position:relative;aspect-ratio:1825/905;background:var(--bg-light);overflow:hidden}
.browser .hero-screens img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s ease}
.browser .hero-screens img.on{opacity:1}
.fake-cursor{display:none;position:absolute;left:var(--cx,72%);top:var(--cy,30%);width:22px;height:22px;z-index:2;pointer-events:none;transition:left 1s cubic-bezier(.5,0,.2,1),top 1s cubic-bezier(.5,0,.2,1);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.9L4 20z' fill='%23fff' stroke='%230f172a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
html.mo .fake-cursor{display:block}
.fake-cursor::after{content:'';position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:2px solid var(--primary);opacity:0}
.fake-cursor.click::after{animation:moClick .5s ease-out}
@keyframes moClick{from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}

/* Números que cuentan: ancho fijo para que no salte */
.hero-stat b{font-variant-numeric:tabular-nums}

/* Destello en botones */
.btn-primary-lg,.btn-outline-lg,.btn-portal,.btn-sumate,.contact-form button{position:relative;overflow:hidden;isolation:isolate}
.btn-primary-lg::after,.btn-outline-lg::after,.btn-portal::after,.btn-sumate::after,.contact-form button::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-outline-lg::after{background:linear-gradient(100deg,transparent,rgba(37,99,235,.16),transparent)}
html.mo .btn-primary-lg:hover::after,html.mo .btn-outline-lg:hover::after,html.mo .btn-portal:hover::after,html.mo .btn-sumate:hover::after,html.mo .contact-form button:hover:not(:disabled)::after{left:130%;transition:left .7s ease}
html.mo .hero-buttons>:first-child::after{animation:moShine 1s ease 1.4s}
@keyframes moShine{from{left:-60%}to{left:130%}}

/* Tarjetas: brillo que sigue al mouse (--mx/--my los pone motion.js) */
html.mo .module:hover{background-image:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),rgba(96,165,250,.2),transparent 70%)}
html.mo .coverage-item:hover{background-image:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%),rgba(96,165,250,.22),transparent 70%)}
html.mo .step:hover{background-image:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),rgba(37,99,235,.07),transparent 70%)}
.module__icon,.step__icon{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
html.mo .module:hover .module__icon,html.mo .step:hover .step__icon{transform:rotate(-7deg) scale(1.1)}

/* CÓMO FUNCIONA: línea que une los 3 pasos, con un pulso que la recorre */
.steps-line{display:none}
@media(min-width:768px){
  .steps-line{display:block;position:absolute;top:-1.5px;left:16.66%;right:16.66%;height:3px;border-radius:3px;background:var(--border);z-index:2;pointer-events:none}
  .steps-line::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--orange))}
  .steps-line i{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--primary),0 0 14px 5px rgba(37,99,235,.55);opacity:0}
  .step__num{z-index:3}
  html.mo .steps-line::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s ease .3s}
  html.mo .steps.in .steps-line::before{transform:scaleX(1)}
  html.mo .steps.in .steps-line i{animation:moRun 3.2s ease-in-out 1.8s infinite}
  /* el pulso pasa por cada paso a 0, 1,6 y 3,2 s de su vuelta */
  html.mo .steps.in .step__icon{animation:moPing 3.2s linear 1.7s infinite}
  html.mo .steps.in .step:nth-child(2) .step__icon{animation-delay:3.3s}
  html.mo .steps.in .step:nth-child(3) .step__icon{animation-delay:4.9s}
}
@keyframes moRun{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes moPing{0%,14%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}5%{box-shadow:0 0 0 9px rgba(37,99,235,.16)}}

/* COBERTURA: mapa con puntos */
.coverage-layout{display:grid;gap:36px;align-items:center}
@media(max-width:767px){.coverage-layout .coverage-item:last-child{grid-column:span 2}}
@media(min-width:992px){
  .coverage-layout{grid-template-columns:250px 1fr;gap:64px}
  .coverage-layout .coverage-grid{grid-template-columns:repeat(2,1fr)}
  .coverage-layout .coverage-item:last-child{grid-column:span 2}
}
.cov-map{width:100%;max-width:200px;margin:0 auto}
@media(min-width:992px){.cov-map{max-width:250px}}
.cov-map svg{display:block;width:100%;height:auto;overflow:visible}
.cov-land{fill:rgba(37,99,235,.16);stroke:#60a5fa;stroke-width:1.2;stroke-linejoin:round}
.cov-dot .core{fill:var(--orange)}
.cov-dot .ring{fill:none;stroke:var(--orange);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
html.mo .cov-land{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
html.mo .cov-map.in .cov-land{animation:moDraw 2s ease forwards,moFill 1s ease 1.4s forwards}
html.mo .cov-dot{opacity:0}
html.mo .cov-map.in .cov-dot{animation:moDot .4s calc(1.3s + var(--d)) forwards}
html.mo .cov-map.in .cov-dot .ring{animation:moRing 2.8s calc(1.7s + var(--d)) infinite}
@keyframes moDraw{to{stroke-dashoffset:0}}
@keyframes moFill{to{fill-opacity:1}}
@keyframes moDot{from{opacity:0;transform:scale(0)}to{opacity:1}}
@keyframes moRing{0%{transform:scale(.4);opacity:.9}75%,100%{transform:scale(2.4);opacity:0}}
html.mo .coverage-layout .coverage-item{opacity:0}
html.mo .coverage-layout.in .coverage-item{animation:moUp .5s ease forwards}
@keyframes moUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.mo .coverage-layout.in .coverage-item:nth-child(2){animation-delay:.12s}
html.mo .coverage-layout.in .coverage-item:nth-child(3){animation-delay:.24s}
html.mo .coverage-layout.in .coverage-item:nth-child(4){animation-delay:.36s}
html.mo .coverage-layout.in .coverage-item:nth-child(5){animation-delay:.48s}

/* Reducir movimiento: lo que ya se movía en landing.css, quieto */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg .slide{transition:none}
  .hero-bg .slide.active{animation:none;transform:scale(1.15)}
  .float-chip{animation:none}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:24px}
  .tab-panel,.pf-panel.active,.lightbox.open,.modal-acceso.open,.modal-sumate.open{animation:none}
  .read-progress{display:none}
}