/* ============================================================================ MOVIMIENTO — Arcotechos Tehuacán Portado del portal de proveedores de Wise. UNA sola física para todo: dos curvas y ninguna más. Se anima ÚNICAMENTE `transform` y `opacity`, que el navegador resuelve en el compositor. Nada de will-change. Guarda anti-página-en-blanco: todo lo que oculta cuelga de `.anim`, que el script del pone en el . Si el JS falla o el visitante pidió menos movimiento, la página se ve completa y estática. ========================================================================== */ :root{ --sal:cubic-bezier(.22,1,.36,1); --suave:cubic-bezier(.4,0,.2,1); } /* ---------- 1. Aparecer al entrar en pantalla ---------- */ .anim [data-anim]{opacity:0} .anim [data-anim="sube"] {transform:translate3d(0,30px,0)} .anim [data-anim="escala"]{transform:translate3d(0,34px,0) scale(.968)} .anim [data-anim="izq"] {transform:translate3d(-34px,0,0)} .anim [data-anim="der"] {transform:translate3d(34px,0,0)} .anim [data-anim].dentro{opacity:1;transform:none; transition:opacity .85s var(--sal), transform .85s var(--sal); transition-delay:var(--d,0ms)} /* ---------- 2. Hijos que entran uno tras otro ---------- El contenedor lleva data-stagger=""; el JS numera los hijos en --i. */ .anim [data-stagger] > *, .anim [data-stagger] .estagger{opacity:0;transform:translate3d(0,26px,0)} .anim [data-stagger].dentro > *, .anim [data-stagger].dentro .estagger{opacity:1;transform:none; transition:opacity .8s var(--sal), transform .8s var(--sal); transition-delay:calc(var(--i,0) * .085s)} /* ---------- 3. HERO: cascada de entrada ---------- */ .anim [data-hero-cab] > *{opacity:0;transform:translate3d(0,28px,0)} .anim.listo-hero [data-hero-cab] > *{opacity:1;transform:none; transition:opacity .9s var(--sal), transform .9s var(--sal); transition-delay:calc(.06s + var(--i,0) * .09s)} /* El titular entra por palabras, desde abajo de su propia línea. El

conserva su texto para lectores de pantalla (aria-label) y los fragmentos van ocultos a la accesibilidad. */ /* El padding+margen negativo evita que overflow:hidden le corte los acentos a las mayúsculas (CIMENTACIÓN) sin mover el renglón. */ .h1-palabra{display:inline-block;overflow:hidden; padding:.15em .04em .15em;margin:-.15em -.04em -.15em} .h1-palabra > span{display:inline-block;transform:translate3d(0,105%,0)} .anim.listo-hero .h1-palabra > span{transform:none; transition:transform 1s var(--sal); transition-delay:calc(.18s + var(--i,0) * .045s)} /* La foto del hero entra con un acercamiento lento que nunca se detiene del todo: es la firma visual del tema Salient. */ .anim [data-hero-media]{transform:scale(1.09);transform-origin:center 45%} .anim.listo-hero [data-hero-media]{transform:scale(1); transition:transform 1.9s var(--sal)} /* ---------- 4. Imágenes que se destapan (cortinilla) ---------- ⚠️ El clip-path va en los HIJOS, nunca en el elemento observado: un `inset(0 0 100% 0)` deja el área de intersección en cero y el IntersectionObserver jamás llega al umbral. Se observa el contenedor. */ .anim [data-cortina] > a{clip-path:inset(0 0 100% 0)} .anim [data-cortina].dentro > a{clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--sal); transition-delay:calc(var(--i,0) * .11s)} .anim [data-cortina] > a img{transform:scale(1.14)} .anim [data-cortina].dentro > a img{transform:scale(1); transition:transform 1.5s var(--sal); transition-delay:calc(var(--i,0) * .11s)} /* el zoom del cursor manda por encima del de entrada */ .anim [data-cortina].dentro > a:hover img{transform:scale(1.06); transition:transform .7s var(--sal)!important} /* ---------- 5. Barra superior: se compacta al bajar ---------- */ header{transition:height .35s var(--sal), background-color .35s var(--suave), box-shadow .35s var(--suave)} header .nav{transition:height .35s var(--sal)} header.bajado .nav{height:62px} header .nav img{transition:transform .35s var(--sal)} header.bajado .nav img{transform:scale(.9)} /* ---------- 6. Acordeón de preguntas con altura animada ---------- El truco de grid-template-rows 0fr → 1fr; el
se mantiene abierto durante el cierre para que la transición alcance a correr. */ /* Solo se colapsa cuando el JS ya cableó el acordeón (.listo). Si motion.js no carga, .faq-caja es un div normal y el
nativo sigue sirviendo. */ .faq.listo .faq-caja{display:grid;grid-template-rows:0fr; transition:grid-template-rows .45s var(--sal)} .faq.listo details.abierto .faq-caja{grid-template-rows:1fr} .faq.listo .faq-caja > div{overflow:hidden} /* ---------- 7. Contador de los datos duros ---------- */ [data-num]{font-variant-numeric:tabular-nums} /* ---------- 8. Botón flotante: entra cuando ya bajaste ---------- */ .anim .flot{opacity:0;transform:translate3d(0,16px,0) scale(.86); transition:opacity .5s var(--sal), transform .5s var(--sal)} .anim .flot.dentro{opacity:1;transform:none} /* ---------- 9. Micro-interacciones ---------- */ .btn{transition:background-color .28s var(--suave), color .28s var(--suave), transform .28s var(--sal), box-shadow .28s var(--suave), border-color .28s var(--suave)} a,.dato a,.redes a,.apps span,.apps article,.serv article,.tst article, .tabla .fila,.proc article,.galeria a{transition-timing-function:var(--sal)} /* ---------- Respeto absoluto por quien pidió menos movimiento ---------- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} [data-anim],[data-stagger]>*,[data-hero-cab]>*,[data-cortina]{opacity:1!important; transform:none!important;clip-path:none!important} }