/* Movimiento común de tusgestiones.cl (Elías, 23-oct-2026: «buscaría variedad de animaciones; también quiero animaciones
   para los botones y todo»). Va con tg-movimiento-2026.js. Solo se mueve transform, opacity, clip-path y filter
   (nunca el tamaño ni el lugar de las cosas), y todo queda quieto con «reducir movimiento». */

:root{
  --m-ease:cubic-bezier(0.22,1,0.36,1);      /* entra */
  --m-ease-io:cubic-bezier(0.76,0,0.24,1);   /* viaja a la vista */
  --m-apretar:130ms; --m-pasar:200ms;
}

/* ── títulos: tres maneras (el programa las reparte en turno) ── */
html.mov .m-sube .m-linea{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
html.mov .m-sube .m-pal{display:inline-block;transform:translateY(108%);transition:transform 820ms var(--m-ease) calc(var(--i, 0) * 55ms + 60ms)}
html.mov .m-sube.m-visto .m-pal{transform:none}

html.mov .m-enfoca{opacity:0;filter:blur(12px);transform:translateY(10px) scale(.985);transform-origin:0 100%;
  transition:opacity 700ms var(--m-ease),filter 1000ms var(--m-ease),transform 1000ms var(--m-ease)}
html.mov .m-enfoca.m-visto{opacity:1;filter:none;transform:none}

html.mov .m-cortina{clip-path:inset(-.2em 100% -.2em 0);transition:clip-path 1000ms var(--m-ease-io)}
html.mov .m-cortina.m-visto{clip-path:inset(-.2em 0 -.2em 0)}

/* ── textos, datos y tarjetas: escalonados, en orden de lectura ── */
html.mov .m-pieza{opacity:0;transform:translateY(22px);transition:opacity 650ms var(--m-ease) var(--d, 0ms),transform 850ms var(--m-ease) var(--d, 0ms)}
html.mov .m-pieza.m-visto{opacity:1;transform:none}

/* ── fotos: se abren de abajo hacia arriba y se asientan ──
   El recorte deja un margen de 40 % hacia los lados y abajo: si la imagen tiene sombra (la llave de «Nosotros»), la sombra
   no se corta en el borde del archivo. Recortada al borde se notaba el rectángulo del PNG (Elías, 23-oct). */
html.mov .m-foto{clip-path:inset(100% -40% -40% -40%);transform:scale(1.06);transition:clip-path 1050ms var(--m-ease-io),transform 1500ms var(--m-ease)}
html.mov .m-foto.m-visto{clip-path:inset(-40% -40% -40% -40%);transform:none}

@media (prefers-reduced-motion:no-preference){

  /* ── botones de píldora: suben un poco al pasar, ceden al apretar; la llave gira ── */
  /* (los .boton de la portada y la ficha ya traen su transición; acá solo los del tema y las páginas propias) */
  .tg-cab2-cta,.tg-cab2-prop,a.tg-cleo-boton,.g5ere__submit-contact-agent,.g5ere__contact-actions-phone a.btn,
  .tg-busca-cat button,body.tg26-propia a[style*="999px"]{
    transition:transform var(--m-pasar) var(--m-ease),background-color var(--m-pasar) ease,color var(--m-pasar) ease,opacity var(--m-pasar) ease!important}
  .listo .barra .boton:hover,.listo .barra .boton:active{transition-delay:0s!important}
  .boton:hover,.tg-cab2-cta:hover,.tg-cab2-prop:hover,a.tg-cleo-boton:hover,.g5ere__submit-contact-agent:hover,.g5ere__contact-actions-phone a.btn:hover,
  .tg-busca-cat button:hover,body.tg26-propia a[style*="999px"]:hover{transform:translateY(-2px)!important}
  .boton:active,.tg-cab2-cta:active,.tg-cab2-prop:active,a.tg-cleo-boton:active,.g5ere__submit-contact-agent:active,.g5ere__contact-actions-phone a.btn:active,
  .tg-busca-cat button:active,body.tg26-propia a[style*="999px"]:active{transform:translateY(0) scale(.96)!important;transition-duration:var(--m-apretar)!important}
  /* la llave de los botones gira como si abriera, y vuelve */
  .boton img,a.tg-cleo-boton img,.tg-cab2-llave img,.marca img{transition:transform 420ms var(--m-ease)!important}
  .boton:hover img,a.tg-cleo-boton:hover img,.tg-cab2-llave:hover img,.marca:hover img{transform:rotate(-24deg)!important}
  /* el teléfono de «Llamar» suena */
  .boton.linea:hover svg{animation:m-suena 520ms var(--m-ease)}
  @keyframes m-suena{20%{transform:rotate(-14deg)}45%{transform:rotate(12deg)}70%{transform:rotate(-6deg)}100%{transform:none}}

  /* ── el botón flotante de WhatsApp ── */
  .tg-cleo-flot{transition:transform var(--m-pasar) var(--m-ease),opacity var(--m-pasar) ease,box-shadow var(--m-pasar) ease!important}
  .tg-cleo-flot:hover{transform:translateY(-3px)!important}
  .tg-cleo-flot:active{transform:scale(.96)!important;transition-duration:var(--m-apretar)!important}
  .tg-cleo-flot svg{transition:transform 420ms var(--m-ease)}
  .tg-cleo-flot:hover svg{transform:rotate(-12deg) scale(1.1)}

  /* ── flechas, cerrar y ampliar: crecen al pasar, ceden al apretar ── */
  .flecha,.ampliar,.cerrar,.arriba,.slick-arrow{transition:transform var(--m-pasar) var(--m-ease),background-color var(--m-pasar) ease!important}
  .flecha:hover,.ampliar:hover,.cerrar:hover,.arriba:hover,.slick-arrow:hover{transform:scale(1.08)!important}
  .flecha:active,.ampliar:active,.cerrar:active,.arriba:active,.slick-arrow:active{transform:scale(.92)!important;transition-duration:var(--m-apretar)!important}
  .flecha.antes:hover svg{animation:m-izq 600ms var(--m-ease)}
  .flecha.despues:hover svg{animation:m-der 600ms var(--m-ease)}
  @keyframes m-izq{40%{transform:translateX(-4px)}100%{transform:none}}
  @keyframes m-der{40%{transform:translateX(4px)}100%{transform:none}}

  /* ── tarjetas de hogares: la foto se acerca y el nombre se subraya ── */
  .hogar .foto img,.g5ere__property-item .g5core__post-featured,.g5ere__property-item .g5core__entry-thumbnail{transition:transform 900ms var(--m-ease)!important}
  .hogar a:hover .foto img,.hogar:hover .foto img,.g5ere__property-item:hover .g5core__entry-thumbnail{transform:scale(1.05)!important}
  .hogar .nom,.g5ere__property-item .g5ere__loop-property-title a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
    background-position:0 100%;background-size:0 1.5px;transition:background-size 420ms var(--m-ease)}
  .hogar a:hover .nom,.hogar:hover .nom,.g5ere__property-item:hover .g5ere__loop-property-title a{background-size:100% 1.5px}

  /* ── enlaces dentro del texto y los datos: el subrayado se dibuja ── */
  .ficha .datos dd a,.ficha .caracteristicas a,.ficha .migas a,.ejecutiva .contacto a,.ejecutiva .nombre a{
    text-decoration:none!important;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size 360ms var(--m-ease)}
  .ficha .datos dd a:hover,.ficha .caracteristicas a:hover,.ficha .migas a:hover,.ejecutiva .contacto a:hover,.ejecutiva .nombre a:hover{background-size:100% 1px}

  /* ── miniaturas de la galería y «déjanos tus datos» ── */
  .tira button{transition:opacity var(--m-pasar) ease,transform var(--m-pasar) var(--m-ease)!important}
  .tira button:hover{transform:translateY(-3px)}
  .abre-form{transition:color var(--m-pasar) ease,letter-spacing 300ms var(--m-ease)}
  .abre-form:hover{letter-spacing:.01em}

  /* ── campos del formulario: el borde se enciende ── */
  .form input,.form textarea{transition:border-color var(--m-pasar) ease,box-shadow var(--m-pasar) ease}
  .form input:focus,.form textarea:focus{box-shadow:0 0 0 4px rgba(22,21,20,.07)}
}