/* =========================================================
   Tarde Libre · Motion graphics «Atardecer» (nov 2026)
   Solo transform/opacity/clip-path. Todo se apaga con
   prefers-reduced-motion (motion-head.js no pone html.mo).
   Bucles: ninguno dura más de 5 s (WCAG 2.2.2).
   ========================================================= */
@property --mo-a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--mo-ease:cubic-bezier(.16,1,.3,1);--mo-ease2:cubic-bezier(.65,0,.35,1)}

/* ---------- keyframes ---------- */
@keyframes mo-rise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes mo-show{to{opacity:1}}
@keyframes mo-word{from{translate:0 112%;rotate:5deg}to{translate:0 0;rotate:0deg}}
@keyframes mo-panel{from{opacity:0;transform:perspective(1200px) translateX(60px) rotateY(-14deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes mo-line{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
@keyframes mo-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-sunrise{0%{transform:translateY(9px) scale(.2);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes mo-drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-kb{from{scale:1.12}to{scale:1.02}}
@keyframes mo-sunin{from{opacity:0;transform:translateY(80px) scale(.7)}to{opacity:1;transform:none}}
@keyframes mo-ring{0%{box-shadow:0 0 0 0 rgba(255,122,61,.65)}100%{box-shadow:0 0 0 22px rgba(255,122,61,0)}}
@keyframes mo-spin{0%{--mo-a:0deg;opacity:0}12%{opacity:1}88%{opacity:1}100%{--mo-a:360deg;opacity:0}}
@keyframes mo-shine{0%{transform:translateX(-120%) skewX(-20deg)}55%,100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes mo-flowx{to{background-position:28px 0}}
@keyframes mo-flowy{to{background-position:0 28px}}
@keyframes mo-glow{0%,100%{box-shadow:0 0 0 1px var(--sun) inset,0 0 0 0 rgba(255,122,61,0)}50%{box-shadow:0 0 0 1px var(--sun) inset,0 0 46px -6px rgba(255,122,61,.55)}}
@keyframes mo-node{0%{border-color:var(--line2)}40%{border-color:var(--sun);box-shadow:0 0 22px -6px rgba(255,122,61,.7)}100%{border-color:var(--line2);box-shadow:none}}
@keyframes mo-bar{from{transform:scaleX(0)}}
@keyframes mo-dawn{from{transform:translate(-50%,70%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes mo-vt-out{to{opacity:0;transform:translateY(-14px) scale(.985)}}
@keyframes mo-vt-in{from{opacity:0;transform:translateY(26px)}}

/* ---------- transiciones entre páginas (navegación del propio sitio) ---------- */
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:mo-vt-out .32s cubic-bezier(.4,0,1,1) both}
 ::view-transition-new(root){animation:mo-vt-in .6s var(--mo-ease) both}
 header.site{view-transition-name:mo-header}
 .mo-progress{view-transition-name:mo-progress}
}

/* ---------- barra de progreso de lectura: el sol recorre la página ---------- */
.mo-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;transform-origin:0 50%;
 transform:scaleX(var(--mo-p,0));background:linear-gradient(90deg,#924A29,var(--sun) 55%,var(--sun2));box-shadow:0 0 12px rgba(255,122,61,.6)}

/* ---------- cabecera: el sol del logotipo sale al cargar y se pone al bajar ---------- */
html.mo header.site .logo svg path{transform-box:fill-box;transform-origin:50% 100%;animation:mo-sunrise 1.2s .15s var(--mo-ease) both;translate:0 calc(var(--mo-p,0) * 4px)}
html.mo header.site .logo svg rect{transform-box:fill-box;transform-origin:50% 50%;animation:mo-drawx .9s var(--mo-ease) both}
html.mo header.site .logo svg rect+rect{animation-delay:.25s}
html.mo header.site nav.main>a{animation:mo-rise .7s var(--mo-ease) both}
html.mo header.site nav.main>a:nth-child(1){animation-delay:.10s}html.mo header.site nav.main>a:nth-child(2){animation-delay:.16s}
html.mo header.site nav.main>a:nth-child(3){animation-delay:.22s}html.mo header.site nav.main>a:nth-child(4){animation-delay:.28s}
html.mo header.site nav.main>a:nth-child(5){animation-delay:.34s}html.mo header.site nav.main>a:nth-child(6){animation-delay:.40s}
html.mo header.site nav.main>a:nth-child(7){animation-delay:.52s}

/* ---------- primera sección: coreografía de entrada (solo CSS, sin parpadeo) ---------- */
html.mo main>section:first-child .stack>*{animation:mo-rise 1s var(--mo-ease) both}
html.mo main>section:first-child .stack>*:nth-child(1){animation-delay:.10s}
html.mo main>section:first-child .stack>*:nth-child(2){animation-delay:.6s}
html.mo main>section:first-child .stack>*:nth-child(3){animation-delay:.75s}
html.mo main>section:first-child .stack>*:nth-child(4){animation-delay:.95s}
html.mo main>section:first-child .stack>*:nth-child(5){animation-delay:1.10s}
html.mo main>section:first-child .stack>*:nth-child(n+6){animation-delay:1.25s}
/* el titular entra palabra a palabra (motion.js lo trocea); si el JS no llega, aparece igual a los 1,4 s */
html.mo main>section:first-child :is(h1,.h1){animation:none!important}
html.mo main>section:first-child :is(h1,.h1):not(.mo-split){opacity:0;animation:mo-show 0s 1.4s forwards!important}
html.mo .mo-split .mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
html.mo .mo-split .mw>span{display:inline-block;transform-origin:0 100%}
html.mo main>section:first-child .mo-split .mw>span{animation:mo-word 1.05s var(--mo-ease) both;animation-delay:calc(.22s + var(--w) * 75ms)}
/* panel de la derecha (consola, formulario o tarjeta) */
html.mo main>section:first-child :is(.console,form.form,.hero-grid>.card){animation:mo-panel 1.3s .45s var(--mo-ease) both}
/* consola: las líneas se escriben una a una */
html.mo .console .l{animation:mo-line .45s var(--mo-ease) both}
html.mo .console .l .x{animation:mo-type .6s steps(28,end) both}
html.mo .console .l:nth-child(1),html.mo .console .l:nth-child(1) .x{animation-delay:1.20s}
html.mo .console .l:nth-child(2),html.mo .console .l:nth-child(2) .x{animation-delay:1.65s}
html.mo .console .l:nth-child(3),html.mo .console .l:nth-child(3) .x{animation-delay:2.10s}
html.mo .console .l:nth-child(4),html.mo .console .l:nth-child(4) .x{animation-delay:2.55s}
html.mo .console .l:nth-child(5),html.mo .console .l:nth-child(5) .x{animation-delay:3.00s}
html.mo .console .l:nth-child(6),html.mo .console .l:nth-child(6) .x{animation-delay:3.45s}
html.mo .console .foot{animation:mo-rise .7s 3.95s var(--mo-ease) both}
html.mo .console .foot .tag.ok{animation:mo-ring 1.2s 4.4s ease-out 2}

/* ---------- portada con foto: cielo en movimiento, sol y horizonte ---------- */
html.mo .hero-photo.mo-hero{overflow:hidden;isolation:isolate}
.mo-bg{position:absolute;inset:-8% 0;z-index:-1;opacity:0;background:var(--bgimg) center/cover no-repeat;animation:mo-kb 16s cubic-bezier(.2,.6,.2,1) both,mo-show 1.2s .1s ease forwards;translate:0 calc(var(--hs,0) * 140px);will-change:translate}
.mo-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,17,.97) 0%,rgba(14,15,17,.88) 46%,rgba(14,15,17,.30) 100%)}
.mo-sun{position:absolute;z-index:-1;right:9%;top:16%;width:min(36vw,480px);aspect-ratio:1;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(255,214,190,.50) 0,rgba(255,150,95,.34) 22%,rgba(255,122,61,.12) 45%,rgba(255,122,61,0) 68%);mix-blend-mode:screen;
 animation:mo-sunin 2.6s .3s var(--mo-ease) both;translate:0 calc(var(--hs,0) * 260px);opacity:calc(1 - var(--hs,0) * .9)}
.mo-horizon{position:absolute;z-index:-1;left:0;right:0;bottom:64px;height:1px;transform-origin:50% 50%;
 background:linear-gradient(90deg,transparent,rgba(255,176,138,.55) 50%,transparent);animation:mo-drawx 1.8s 1.1s var(--mo-ease) both}

/* ---------- aparición al bajar (motion.js pone .mo-i y después .mo-in) ---------- */
.mo-i{opacity:0;translate:0 38px;transition:opacity .9s var(--mo-ease),translate 1.1s var(--mo-ease),scale 1.1s var(--mo-ease),clip-path 1.2s var(--mo-ease),filter .9s var(--mo-ease);transition-delay:var(--d,0ms)}
.mo-i.mo-left{translate:-60px 0}.mo-i.mo-right{translate:60px 0}
.mo-i.mo-zoom{translate:0 30px;scale:.9}
.mo-i.mo-pop{translate:0 14px;scale:.6}
.mo-i.mo-in{opacity:1;translate:0 0;scale:1}
html.mo-fx .mo-i.mo-blur{filter:blur(8px)}html.mo-fx .mo-i.mo-blur.mo-in{filter:none}
/* titulares h2: palabra a palabra */
.mo-i.mo-words{opacity:1;translate:0 0}
.mo-words .mw>span{translate:0 112%;rotate:5deg;transition:translate 1s var(--mo-ease),rotate 1s var(--mo-ease);transition-delay:calc(var(--d,0ms) + var(--w) * 55ms)}
.mo-words.mo-in .mw>span{translate:0 0;rotate:0deg}
/* antetítulos: se escriben como en la consola */
.mo-i.mo-eye{opacity:1;translate:0 0;clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(24,end)}
.mo-i.mo-eye.mo-in{clip-path:inset(0 0 0 0)}
/* fotos: cortina que se abre y la imagen se asienta */
.mo-i.mo-wipe{opacity:1;translate:0 0;clip-path:inset(0 0 100% 0 round 16px)}
.mo-i.mo-wipe.mo-in{clip-path:inset(0 0 0 0 round 16px)}
.mo-wipe img,img.mo-wipe{scale:1.22;transition:scale 1.8s var(--mo-ease) var(--d,0ms)}
.mo-wipe.mo-in img,img.mo-wipe.mo-in{scale:1}
.photo-card{isolation:isolate}
/* vídeo y demo: llegan con perspectiva */
.mo-i.mo-3d{opacity:0;translate:0 0;transform:perspective(1100px) rotateX(14deg) translateY(60px) scale(.94);transition:opacity 1s var(--mo-ease),transform 1.4s var(--mo-ease)}
.mo-i.mo-3d.mo-in{opacity:1;transform:none}

/* ---------- cuatro pasos: la línea se dibuja y los números se encienden ---------- */
.steps4.mo-steps:before{transform:scaleX(0);transform-origin:0 50%;transition:transform 2s var(--mo-ease2) .2s}
.steps4.mo-steps.mo-in:before{transform:scaleX(1)}
.mo-steps .num{scale:.3;opacity:0;transition:scale .8s cubic-bezier(.34,1.56,.64,1),opacity .4s;transition-delay:calc(.25s + var(--s) * .45s)}
.mo-steps.mo-in .num{scale:1;opacity:1;animation:mo-ring 1.1s ease-out 1 both;animation-delay:calc(.55s + var(--s) * .45s)}
.mo-steps .step .stack{opacity:0;translate:0 18px;transition:opacity .8s var(--mo-ease),translate .8s var(--mo-ease);transition-delay:calc(.4s + var(--s) * .45s)}
.mo-steps.mo-in .step .stack{opacity:1;translate:0 0}

/* ---------- tarjeta destacada: borde de luz que da dos vueltas ---------- */
html.mo .card.hi{position:relative;isolation:isolate}
html.mo .card.hi.mo-on:before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
 background:conic-gradient(from var(--mo-a),transparent 0 62%,rgba(255,176,138,.0) 66%,var(--sun2) 76%,#fff6ef 80%,var(--sun) 86%,transparent 96%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 animation:mo-spin 2.3s .6s linear 2 both}
html.mo .card.hi.mo-on{animation:mo-glow 2.3s .6s ease-in-out 2}

/* ---------- arquitectura: los datos fluyen y los nodos se encienden ---------- */
.arch.mo-on .flow{animation:mo-flowx .6s linear 8}
@media (max-width:860px){.arch.mo-on .flow{animation-name:mo-flowy}}
.arch.mo-on .col .node{animation:mo-node 1.4s ease-out both;animation-delay:calc(var(--n,0) * .18s + .4s)}
.arch.mo-on .core{animation:mo-glow 1.6s 1.2s ease-in-out 2}

/* ---------- botón principal: destello y brillo ---------- */
html.mo .btn.sun{position:relative;overflow:hidden;isolation:isolate}
html.mo .btn.sun:after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-20deg);animation:mo-shine 2.6s 2.2s ease-in-out 2}
html.mo .btn{transition:translate .35s var(--mo-ease),box-shadow .35s,background-color .25s,border-color .25s}
html.mo .btn.sun:hover{box-shadow:0 10px 34px -8px rgba(255,122,61,.75)}

/* ---------- plazas libres: se encienden una a una ---------- */
.mo-dots i{scale:0;transition:scale .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.3s + var(--k) * .12s)}
.mo-dots.mo-in i{scale:1}

/* ---------- final de página: el sol se pone tras el horizonte ---------- */
html.mo .cta.mo-cta{position:relative;overflow:hidden;isolation:isolate}
html.mo .cta.mo-cta>.wrap{position:relative;z-index:1}
.mo-sunset{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mo-sunset:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,0) 20%,rgba(146,74,41,.30) 78%,rgba(255,122,61,.30) 100%);opacity:var(--cs,0)}
.mo-sunset .s{position:absolute;left:56%;bottom:0;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;
 transform:translate(-50%,calc(5% + var(--cs,0) * 52%));
 background:radial-gradient(circle,#FFE3D2 0,#FFB08A 18%,#FF7A3D 34%,rgba(255,122,61,.35) 46%,rgba(255,122,61,0) 66%);opacity:.5;mix-blend-mode:screen}
.mo-sunset .h{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--sun) 30%,#FFE3D2 56%,var(--sun) 80%,transparent);opacity:calc(.25 + var(--cs,0) * .75);box-shadow:0 0 24px 2px rgba(255,122,61,.55)}
.mo-sunset .r{position:absolute;left:0;right:0;bottom:2px;height:40%;background:repeating-linear-gradient(180deg,rgba(255,122,61,.10) 0 2px,transparent 2px 9px);
 -webkit-mask:radial-gradient(60% 100% at 56% 100%,#000,transparent 70%);mask:radial-gradient(60% 100% at 56% 100%,#000,transparent 70%);opacity:calc(var(--cs,0) * .9)}
@media (max-width:860px){.mo-sunset .s{left:50%;width:120vw}.mo-sunset .r{-webkit-mask:radial-gradient(80% 100% at 50% 100%,#000,transparent 70%);mask:radial-gradient(80% 100% at 50% 100%,#000,transparent 70%)}}

/* ---------- página de gracias: amanece ---------- */
.mo-dawn{position:absolute;z-index:0;left:72%;bottom:-34%;width:min(60vw,620px);aspect-ratio:1;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,#FFE3D2 0,#FFB08A 16%,#FF7A3D 32%,rgba(255,122,61,.25) 46%,rgba(255,122,61,0) 66%);opacity:.55;mix-blend-mode:screen;animation:mo-dawn 2.8s .3s var(--mo-ease) both}
html.mo main>section.mo-dawn-sec{position:relative;overflow:hidden;isolation:isolate}
html.mo main>section.mo-dawn-sec>.wrap{position:relative;z-index:1}

/* ---------- solo escritorio con ratón: inclinación, foco de luz e imán ---------- */
html.mo-fx .mo-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--mo-ease),border-color .3s,box-shadow .3s}
html.mo-fx .mo-tilt.mo-hov{transition:transform .12s linear,border-color .3s,box-shadow .3s;box-shadow:0 26px 50px -30px rgba(0,0,0,.9)}
html.mo-fx .card.mo-tilt{background-image:radial-gradient(420px circle at var(--mx,-500px) var(--my,-500px),rgba(255,122,61,.11),transparent 45%)}
html.mo-fx .card.mo-tilt.mo-hov:not(.hi){border-color:var(--line2)}
html.mo-fx .mo-par{translate:0 var(--py,0px)}
html.mo-fx .mo-wipe.mo-in img.mo-par{scale:1.1}
html.mo-fx .btn.mo-mag{translate:var(--bx,0px) var(--by,0px)}

/* el sistema anterior de aparición (tl.js) queda neutralizado cuando hay motion */
html.mo .reveal.pre{opacity:1;transform:none;transition:none}

@media (max-width:860px){
 .mo-bg:after{background:linear-gradient(180deg,rgba(14,15,17,.80) 0%,rgba(14,15,17,.93) 55%,rgba(14,15,17,.98) 100%)}
 .mo-sun{right:-38vw;top:-14%;width:95vw;opacity:calc(.75 - var(--hs,0) * .7)}
 .mo-horizon{bottom:70px}
 .mo-i{translate:0 26px}.mo-i.mo-left,.mo-i.mo-right{translate:0 26px}
 html.mo main>section:first-child :is(.console,form.form,.hero-grid>.card){animation-name:mo-rise}
}
@media (prefers-reduced-motion:reduce){
 .mo-progress,.mo-bg,.mo-sun,.mo-horizon,.mo-sunset,.mo-dawn{display:none!important}
 .mo-i{opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important;filter:none!important;transform:none!important}
}