/*
 * Capa premium de las plantillas (body.hww-premium). Solo CSS, sin JS ni librerías, y sin tocar el marcado:
 * se engancha a las clases hwx-* que pone el motor y a las animaciones de entrada nativas de Elementor.
 *
 * 1. Entradas con más oficio: las fadeInUp / fadeIn / zoomIn de Elementor pasan a subir con desenfoque, y las
 *    fotos se destapan desde un recorte rectangular. Se sustituye la animación, no se añade otra encima.
 * 2. Movimiento ligado al scroll (animation-timeline): las fotos se desplazan dentro de su marco (object-position,
 *    así no se salen ni rompen esquinas), el fondo de la portada baja más despacio y su texto se aleja al salir.
 * 3. Fotos menos cuadradas: marco desplazado detrás de la foto de los bloques a dos columnas, grano fino sobre la
 *    portada y sombra larga en las fotos superpuestas.
 * 4. Tarjetas que se levantan, transición suave entre páginas.
 *
 * Reglas de MOTION.md: lo ligado al scroll va dentro de @supports + prefers-reduced-motion + fuera del editor; se
 * animan scale/translate sueltos (no transform) para sumarse al hover. Sin soporte o con movimiento reducido, la web
 * queda como sin esta capa.
 */

/* ── 3. Fotos menos cuadradas (estático) ─────────────────────────────────────────────────────────────────────── */
.hww-premium .hwx-split-media{isolation:isolate}
.hww-premium .hwx-split-media::before{
	content:"";position:absolute;z-index:-1;pointer-events:none;
	inset:34px -26px -26px 34px;
	border:1px solid color-mix(in srgb,var(--a) 60%,transparent);
	border-radius:var(--r);
}
.hww-premium .hwx-split-media:has(> .hwx-flota[class*="elementor-widget"]:not(:first-child))::before{inset:34px 34px -26px -26px}
.hww-premium .hwx-flota img{box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 12px 24px -12px rgba(0,0,0,.25)}

/* Grano fino sobre la portada: las fotos dejan de verse «de banco». Encima de todo, sin capturar clics. */
.hww-premium .hwx-hero::after,.hww-premium .hwx-band::after,.hww-premium .hwx-cab-pag.hwx-hero-dark::after{
	content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hww-premium .hwx-band{position:relative}

/* Mosaico: velo suave al pasar por encima, la foto respira. */
.hww-premium .hwx-tesela::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));opacity:0;transition:opacity .6s var(--ease)}
.hww-premium .hwx-tesela:hover::after{opacity:1}
.hww-premium .hwx-tesela img{transition:transform 1.4s var(--ease),scale 1.4s var(--ease)}

/* Tarjetas que se levantan (translate suelto: se suma a la animación de entrada). */
.hww-premium .hwx-tarjeta{transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.hww-premium .hwx-tarjeta:hover{translate:0 -6px;box-shadow:0 28px 50px -28px rgba(0,0,0,.35)}

/* Botones: un punto de vida al pasar. */
.hww-premium .hwx-btn .elementor-button{transition:translate .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,color .3s}
.hww-premium .hwx-btn .elementor-button:hover{translate:0 -2px;box-shadow:0 14px 26px -14px rgba(0,0,0,.45)}

/* ── 1. Entradas con más oficio (sustituyen a las de Elementor) ──────────────────────────────────────────────── */
@keyframes hwp-sube{from{opacity:0;translate:0 34px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes hwp-aparece{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes hwp-destapa{from{opacity:.001;clip-path:inset(14% 10% 14% 10%)}to{opacity:1;clip-path:inset(0)}}
@keyframes hwp-acerca{from{scale:1.16}to{scale:1}}

@media (prefers-reduced-motion:no-preference){
	body.hww-premium:not(.elementor-editor-active) .elementor-element.animated.fadeInUp,
	body.hww-premium:not(.elementor-editor-active) .elementor-element.animated.zoomIn{
		animation-name:hwp-sube;animation-duration:1.1s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
	body.hww-premium:not(.elementor-editor-active) .elementor-element.animated.fadeIn{
		animation-name:hwp-aparece;animation-duration:1.2s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
	/* Las fotos (teselas del mosaico, imágenes sueltas que entran) se destapan y se acercan a la vez. */
	body.hww-premium:not(.elementor-editor-active) .hwx-tesela.animated,
	body.hww-premium:not(.elementor-editor-active) .elementor-widget-image.animated:not(.hwx-flota){
		animation-name:hwp-destapa;animation-duration:1.4s;animation-timing-function:cubic-bezier(.65,0,.15,1)}
	body.hww-premium:not(.elementor-editor-active) .hwx-tesela.animated img,
	body.hww-premium:not(.elementor-editor-active) .elementor-widget-image.animated:not(.hwx-flota) img{
		animation:hwp-acerca 2s cubic-bezier(.2,.75,.15,1) both;animation-delay:inherit}
	/* La foto superpuesta llega flotando, más tarde. */
	body.hww-premium:not(.elementor-editor-active) .hwx-flota.animated{animation-name:hwp-sube;animation-duration:1.4s}

	/* Transición suave entre páginas de la misma web (las demos son varias páginas). */
	@view-transition{navigation:auto}
	::view-transition-old(root){animation:.25s cubic-bezier(.4,0,1,1) both hwp-vt-sale}
	::view-transition-new(root){animation:.5s cubic-bezier(.2,.8,.2,1) .06s both hwp-vt-entra}
}
@keyframes hwp-vt-sale{to{opacity:0}}
@keyframes hwp-vt-entra{from{opacity:0;translate:0 16px}}

/* ── 2. Movimiento ligado al scroll ─────────────────────────────────────────────────────────────────────────── */
@keyframes hwp-paralaje{from{object-position:50% 18%}to{object-position:50% 82%}}
@keyframes hwp-fondo{from{background-position-y:50%}to{background-position-y:85%}}
@keyframes hwp-aleja{to{translate:0 -70px;opacity:.15}}
@keyframes hwp-flota{from{translate:0 40px}to{translate:0 -40px}}
@keyframes hwp-marco{from{translate:-14px -14px}to{translate:10px 10px}}

@supports (animation-timeline:view()){
	@media (prefers-reduced-motion:no-preference){
		/* Cada foto recortada (object-fit: cover) se desliza dentro de su marco al cruzar la pantalla. En las
		   fotos sin recorte object-position no hace nada, así que no hace falta distinguirlas. */
		body.hww-premium:not(.elementor-editor-active) .elementor-widget-image:not(.hwx-flota) img{
			animation:hwp-paralaje linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
		/* …salvo mientras se destapa al entrar: primero la entrada, luego el desplazamiento. */
		body.hww-premium:not(.elementor-editor-active) .hwx-tesela.animated img,
		body.hww-premium:not(.elementor-editor-active) .elementor-widget-image.animated:not(.hwx-flota) img{
			animation:hwp-acerca 2s cubic-bezier(.2,.75,.15,1) both,hwp-paralaje linear both;
			animation-timeline:auto,view();animation-range:normal,cover 0% cover 100%}

		/* Portada con foto fija de fondo: la foto baja más despacio que la página y el texto se aleja al salir. */
		body.hww-premium:not(.elementor-editor-active) .hwx-hero:not(:has(.elementor-background-video-container,.elementor-background-slideshow)){
			animation:hwp-fondo linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
		body.hww-premium:not(.elementor-editor-active) .hwx-hero.hwx-hero-dark > .e-con-inner{
			animation:hwp-aleja linear both;animation-timeline:view();animation-range:exit 5% exit 90%}

		/* La foto superpuesta va a otro ritmo que la principal, y el marco desplazado se mueve un poco. */
		body.hww-premium:not(.elementor-editor-active) .hwx-flota .elementor-widget-container{
			animation:hwp-flota linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
		body.hww-premium:not(.elementor-editor-active) .hwx-split-media::before{
			animation:hwp-marco linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
	}
}

@media (max-width:767px){
	.hww-premium .hwx-split-media::before{inset:22px -12px -14px 22px}
	.hww-premium .hwx-split-media:has(> .hwx-flota[class*="elementor-widget"]:not(:first-child))::before{inset:22px 22px -14px -12px}
}
@media (prefers-reduced-motion:reduce){
	.hww-premium .hwx-tarjeta,.hww-premium .hwx-btn .elementor-button,.hww-premium .hwx-tesela img{transition:none}
}