/* Movimiento del inicio.
   Todo depende de la clase .motion en <html>, que el <head> de index.html agrega solo si el visitante
   no pidió reducir el movimiento. Sin esa clase la página se ve completa y estática. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1)}
@keyframes motion-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes motion-line{from{transform:translateY(108%)}to{transform:none}}
@keyframes motion-header{from{transform:translateY(-100%)}to{transform:none}}
@keyframes motion-glint{0%{background-position:100% 0}22%,100%{background-position:0 0}}
@keyframes motion-sheen{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(520%)}}
@keyframes motion-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Titular del hero: cada línea vive en su propia máscara (solo vertical, para no cortar palabras largas) */
.hero-line{display:block;overflow-x:visible;overflow-y:clip;padding-bottom:.04em}
.hero-line>span{display:inline-block}

/* 1. Entrada del hero: header, titular línea por línea y el resto escalonado */
.motion .v1-header{animation:motion-header .9s var(--ease-out) both}
.motion #hero-slider .hero-line>span{transform:translateY(108%)}
.motion #hero-slider .max-w-2xl>:not(h1){opacity:0}
.motion-go #hero-slider .hero-line>span{animation:motion-line 1.15s var(--ease-out) both}
.motion-go #hero-slider .hero-line:nth-child(1)>span{animation-delay:.2s}
.motion-go #hero-slider .hero-line:nth-child(2)>span{animation-delay:.32s}
.motion-go #hero-slider .hero-line:nth-child(3)>span{animation-delay:.44s}
.motion-go #hero-slider .max-w-2xl>:nth-child(1){animation:motion-rise .9s var(--ease-out) .05s both}
.motion-go #hero-slider .max-w-2xl>:nth-child(3){animation:motion-rise .9s var(--ease-out) .6s both}
.motion-go #hero-slider .max-w-2xl>:nth-child(4){animation:motion-rise .9s var(--ease-out) .75s both}
.motion-go #hero-slider .max-w-2xl>:nth-child(5){animation:motion-rise .9s var(--ease-out) .9s both}

/* «CONSTRUYE» recibe un brillo de acero lento, cada 7 s */
.motion #hero-slider .hero-line>span.text-azul-claro{background:linear-gradient(100deg,#8A9AC8 40%,#EEF2FB 50%,#8A9AC8 60%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.motion-go #hero-slider .hero-line>span.text-azul-claro{animation:motion-line 1.15s var(--ease-out) .32s both,motion-glint 7s var(--ease-in-out) 2.2s infinite}

/* 2. Slider: zoom lento de la foto activa y progreso en el indicador */
.motion .slide img{transform:scale(1.14);transition:transform 7.5s cubic-bezier(.25,.1,.25,1)}
.motion .slide.kb img{transform:scale(1.02)}
#slider-dots button{position:relative;overflow:hidden;transition:width .6s var(--ease-out),background-color .3s}
#slider-dots button.bg-white{width:40px;background-color:rgba(255,255,255,.3)}
#slider-dots button.bg-white::after{position:absolute;inset:0;border-radius:inherit;background:#fff;content:"";transform-origin:left}
#slider-dots button.is-progress::after{animation:motion-progress 6s linear both}
#hero-slider.is-paused #slider-dots button::after{animation-play-state:paused}

/* 3. Revelado al hacer scroll: motion.js asigna data-reveal y agrega .is-in al entrar en pantalla */
[data-reveal]{transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal="up"]:not(.is-in){opacity:0;transform:translateY(40px)}
[data-reveal="left"]:not(.is-in){opacity:0;transform:translateX(-56px)}
[data-reveal="right"]:not(.is-in){opacity:0;transform:translateX(56px)}
/* Las tarjetas que entran desde los lados no deben ensanchar la página en móvil */
#servicios{overflow-x:hidden;overflow-x:clip}
[data-reveal^="bar"]{transform-origin:left}
[data-reveal="bar-center"]{transform-origin:center}
[data-reveal^="bar"]:not(.is-in){transform:scaleX(0)}
/* Tarjetas de familia: una cortina del color del fondo se recoge hacia arriba y descubre la foto.
   Se usa una capa encima y no clip-path porque el observador de scroll no detecta elementos recortados por completo. */
[data-reveal="curtain"]::after{position:absolute;inset:0;z-index:5;background:#fff;content:"";pointer-events:none;transform-origin:top;transition:transform 1.25s var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal="curtain"].is-in::after{transform:scaleY(0)}
[data-reveal="curtain"]>div:first-child{transition-duration:1.6s;transition-timing-function:var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal="curtain"]:not(.is-in)>div:first-child{transform:scale(1.3)}

/* 4. Brillo de acero que recorre los botones principales */
.sheen{position:relative;overflow:hidden;isolation:isolate}
.sheen::after{position:absolute;top:0;bottom:0;left:-45%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);content:"";pointer-events:none;transform:skewX(-20deg)}
.sheen-dark::after{background:linear-gradient(100deg,transparent,rgba(21,101,192,.25),transparent)}
.motion .sheen:hover::after,.motion .sheen.sheen-play::after{animation:motion-sheen 1.1s var(--ease-in-out)}

/* 5. Progreso de lectura, tarjetas que responden al mouse y botón flotante */
.v1-progress{position:absolute;right:0;bottom:0;left:0;height:2px;background:linear-gradient(90deg,#1565C0,#8A9AC8);transform:scaleX(0);transform-origin:left;pointer-events:none}
.motion #por-que .grid>div:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,31,91,.12)}
.motion .v1-wa,.motion .v1-lucia{animation:motion-rise .8s var(--ease-out) 2.2s both}

/* 6. Resto de páginas: entrada de cabeceras, tarjetas que responden al mouse */
@keyframes motion-zoom{from{transform:scale(1.12)}to{transform:none}}
@keyframes motion-slash{from{transform:rotate(-7deg) translateX(35%)}to{transform:rotate(-7deg)}}
.motion .simple-hero .v1-container>*,.motion .product-cover-v1 article>*,.motion body.catalog-v1>section:first-of-type .max-w-2xl>*,.motion body.catalog-v1>section:first-of-type .max-w-2xl+div{opacity:0}
.motion-go .simple-hero .v1-container>*,.motion-go .product-cover-v1 article>*,.motion-go body.catalog-v1>section:first-of-type .max-w-2xl>*,.motion-go body.catalog-v1>section:first-of-type .max-w-2xl+div{animation:motion-rise .95s var(--ease-out) .05s both}
.motion-go .simple-hero .v1-container>:nth-child(2),.motion-go .product-cover-v1 article>:nth-child(2),.motion-go body.catalog-v1>section:first-of-type .max-w-2xl>:nth-child(2){animation-delay:.17s}
.motion-go .simple-hero .v1-container>:nth-child(3),.motion-go .product-cover-v1 article>:nth-child(3),.motion-go body.catalog-v1>section:first-of-type .max-w-2xl>:nth-child(3){animation-delay:.3s}
.motion-go body.catalog-v1>section:first-of-type .max-w-2xl+div{animation-delay:.45s}
.motion-go .simple-hero::before{animation:motion-zoom 2.6s var(--ease-out) both}
.motion-go .simple-hero::after{animation:motion-slash 1.4s var(--ease-out) .1s both}
.motion .simple-grid article:not([data-reveal]),.motion .related-v1 article:not([data-reveal]),.motion .contact-card:not([data-reveal]){transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.motion .simple-grid article:not([data-reveal]):hover,.motion .related-v1 article:not([data-reveal]):hover,.motion .contact-card:not([data-reveal]):hover{border-color:#1565C0;box-shadow:0 24px 48px rgba(0,31,91,.12);transform:translateY(-6px)}
.motion .related-v1 article{overflow:hidden}.motion .related-v1 article img{transition:transform .8s var(--ease-out)}.motion .related-v1 article:hover img{transform:scale(1.05)}

@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}}