

<!doctype html>
<html lang="es" class="no-js">
	<head>
		<meta charset="UTF-8">
		<title>  Portfolio Reader &#8211; Sitio de pruebas : Sitio de Pruebas</title>
		
		<link rel='stylesheet' type='text/css' href='https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/menu.css.php' />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="generator" content="Portfolio micro · portfolio.es/micro">
		<meta name="description" content="Entorno de pruebas para nuestros plugins y desarrollos">
		
		<link rel="stylesheet" href="https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/mapas/leaflet.css" />
   
		<script src="https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/mapas/leaflet.js" ></script>
			 
		<script src="https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/mapas/leaflet-search.js"></script>
		
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		
				<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
		
		<meta name='robots' content='noindex, nofollow' />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://portfoliomultimedia.com/wordpress/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fportfoliomultimedia.com%2Fwordpress%2Fportfolioreader%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://portfoliomultimedia.com/wordpress/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fportfoliomultimedia.com%2Fwordpress%2Fportfolioreader%2F&#038;format=xml" />
<style id='wp-img-auto-sizes-contain-inline-css' type='text/css'>
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id='wp-emoji-styles-inline-css' type='text/css'>

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<style id='wp-block-library-inline-css' type='text/css'>
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*wp_block_styles_on_demand_placeholder:6933be2c6483a*/
/*# sourceURL=wp-block-library-inline-css */
</style>
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
</style>
<link rel='stylesheet' id='contact-form-7-css' href='https://portfoliomultimedia.com/wordpress/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.1' media='all' />
<link rel='stylesheet' id='style-css' href='https://portfoliomultimedia.com/wordpress/wp-content/plugins/cookies-portfolio/css/style.css?ver=6.9' media='all' />
<link rel='stylesheet' id='fullcalendarcss-css' href='https://portfoliomultimedia.com/wordpress/wp-content/plugins/wpb_calendario/css/fullcalendar.css?ver=1.0' media='all' />
<link rel='stylesheet' id='normalize-css' href='https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/normalize.css?ver=1.0' media='all' />
<link rel='stylesheet' id='portfoliomicro-css' href='https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/style.css?ver=1.0' media='all' />
<link rel='stylesheet' id='portfoliomicro_plugin-css' href='https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/style_plugin.css?ver=1.0' media='all' />
<link rel='stylesheet' id='portfoliomicro_php-css' href='https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/menu.css.php?ver=1.0' media='all' />
<link rel='stylesheet' id='dashicons-css' href='https://portfoliomultimedia.com/wordpress/wp-includes/css/dashicons.min.css?ver=6.9' media='all' />
<link rel='stylesheet' id='js_composer_front-css' href='https://portfoliomultimedia.com/wordpress/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=7.4' media='all' />
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/js/scripts.js?ver=1.0.0" id="portfoliomicroscripts-js"></script>
<script type="text/javascript" id="portfoliomicroscript_plugins-js-extra">
/* <![CDATA[ */
var ajax_plugin = {"url":"https://portfoliomultimedia.com/wordpress/wp-admin/admin-ajax.php"};
//# sourceURL=portfoliomicroscript_plugins-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/js/script_plugins.js?ver=1.0.0" id="portfoliomicroscript_plugins-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/wpb_calendario/js/moment-with-locales.js?ver=1.0.0" id="portfoliomicroscriptsa-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/wpb_calendario/js/script_lanza.js?ver=1.0.0" id="portfoliomicroscript_lanza-js"></script>
<script></script><link rel="https://api.w.org/" href="https://portfoliomultimedia.com/wordpress/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://portfoliomultimedia.com/wordpress/wp-json/wp/v2/pages/59" /><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
		'ad_storage': 'denied',
		'analytics_storage': 'denied',
});
</script><script>
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-5ZSRVHRK');
        </script><script async src='https://www.googletagmanager.com/gtag/js?id=G-R9GLCDYEJL'></script><script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-R9GLCDYEJL');
        </script><style id="zoom-simple-mp-inline-css">
#lens {
  position: absolute;
  border: 1px solid #00fff8;
  width: 100px;
  height: 100px;
  opacity: 0.4;
  background-color: #49dfea;
  pointer-events: none;
  display: none;
  z-index: 9999;
}

#result {
  position: absolute;
  width: auto;
  height: auto;
  border: 5px solid #00fff8;
  background-color: #fffbf1;
  display: none;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
}

#result img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  max-width: 50000px;
}
</style><meta name="generator" content="Powered by WPBakery Page Builder - drag and drop page builder for WordPress."/>
<link rel="icon" href="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/cropped-logopequeno-32x32.png" sizes="32x32" />
<link rel="icon" href="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/cropped-logopequeno-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/cropped-logopequeno-180x180.png" />
<meta name="msapplication-TileImage" content="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/cropped-logopequeno-270x270.png" />
<style type="text/css" data-type="vc_custom-css">#menu-principal, #menu-principal-eng, .icosredesmenu, .ico_menu_mvl, .hamburger {display:none !important;}
.logoportada {width:30vw; height:auto;}
.cuadroazul {
    display: inline-block;
    width: 21vw;
    height: 21vw;
    background-color: #00c7ff;
    color: #fff;
    font-size: 1.8vw;
    font-weight: 600;
    padding-top: 6vw;
    padding-left: 2vw;
    padding-right: 1vw;
    text-align: left;
}
.textoint {font-size: 1vw;
display: inline-table;
line-height: 1.6vw; font-weight: 600;}

.paddingizquierdo {}

.cuadroazul.uno {background-color: #00c7ff;}
.cuadroazul.dos {background-color: #0e56c5;}
.cuadroazul.tres {background-color: #3300a5;}
.cuadroazul.cuatro {background-color: #00c7ff;}

.titular h1, .titular h2 {font-size: 3.5vw !important;
line-height: 4vw !important;}

.titular h3, .titular h4 {font-size: 3.5vw !important;
line-height: 4vw !important; font-weight:600;}


.textonormal {font-size: 1.6vw;
line-height: 2.2vw;}

.desk .vc_grid-item:nth-child(1) {
    margin-top: 380px !important;
}

.desk .vc_grid-item:nth-child(2) {
    margin-top: 150px !important;
}


.logosmap a:hover {background-color:#fff; opacity:0.3;}


.ultcol {float:right; margin-right:50px;}



@media screen and (min-width: 1800px) {

.titular h1, .titular h2, .titular h3, .titular h4 {font-size:30px !important; line-height: 37px !important;}

}


@media screen and (max-width: 1280px) {
    
    .desk .vc_grid-item:nth-child(1) {
    margin-top: 320px !important;
}

}

@media screen and (max-width: 1024px) {
    
    .desk .vc_grid-item:nth-child(1) {
    margin-top: 250px !important;
}

}



@media screen and (max-width: 767px) {
    
    
.cuadroazul {
    min-width: 296px;
font-size: 22px;
height: 161px;
padding: 30px;

}

.textoint {font-size: 3vw;
line-height: 5.3vw;
font-weight: 400;
    
}


.cuadroazul .textoint {font-size: 12px; line-height: 15px; font-weight: 600;}

.titular h1, .titular h2 {
    font-size: 6vw !important;
    line-height: 6.8vw !important;
}

.titular h3, .titular h4 {font-size: 5.5vw !important;
line-height: 5.5vw !important;
font-weight: 600;}

.vc_custom_1613510743721, .vc_custom_1613510727341 {
    padding-right: 20vw !important;
    padding-left: 20vw !important;
}

.fotouno .vc_column-inner{
    margin-left: 20vw;
    min-height:350px;
}

.fotodos .vc_column-inner {
    
    min-height:350px;
    max-width: 87vw;
}

.fototres .vc_column-inner {

    min-height:350px;
}

.movilmargeniz {
    margin-left: 12vw;
}

.textonormal {
    font-size: 5vw;
    line-height: 6.4vw;
}



.logoportada {width: 72vw;
height: auto;
margin: 0px !important;}

.paddingmovil {padding-left:7vw !important;}
.ultimacolmovil {margin-top:-80px;}
.imglk {margin-top: -44px !important; margin-bottom:0px !important;}
}</style><style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1614356992678{background-image: url(https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/tienda3.jpg?id=42) !important;background-position: center;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1613510734312{padding-right: 8vw !important;padding-left: 8vw !important;}</style><noscript><style> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript>		
		<style>

	body {
		color: #010c42;
		font-family: 'Montserrat', sans-serif;
	}
	
	body a {
		color: #010c42;
	}
	
	body a:hover {
		color: #00c7ff;
	}
		
	nav .menu_top li a {
		color: #ffffff;
	}
	
	.menuprin li a:hover {
		color: #ffffff;
		border-bottom: 1px solid #ffffff;
	}
	
	main {
		margin-top: 54px;
	}
	
	/* section {
		padding: 0px 20px;
	} */
	
	/*** Tamaños para el ancho de la fila ***/
	
	section article .wpb-content-wrapper > .vc_row.vc_row-fluid.vc_row-no-padding[data-vc-full-width="true"][data-vc-stretch-content="true"] {
		max-width: 100%;
		padding: 0px 0px !important;
	}
	
	section article .wpb-content-wrapper > .vc_row.vc_row-fluid[data-vc-full-width="true"][data-vc-stretch-content="true"] {
		max-width: 100%;
		padding: 0px 20px !important;
	}
	
	section article .wpb-content-wrapper > .vc_row.vc_row-fluid[data-vc-full-width="true"] {
		max-width: 100%;
		padding-left: calc((((var(--anchopantalla)) - 1200px) + (20px * 2)) / 2) !important;
		padding-right: calc((((var(--anchopantalla)) - 1200px) + (20px * 2)) / 2) !important;
	}

	section article .wpb-content-wrapper > .vc_row.vc_row-fluid {
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
		padding: 0px 20px !important;
		left: 0px !important;
	}

	@media screen and (max-width: 1200px) {
		section article .wpb-content-wrapper > .vc_row.vc_row-fluid.vc_row-has-fill[data-vc-full-width-init="true"] {
			padding-left: 20px !important;
			padding-right: 20px !important;
		}
	}

	/******************************************/
	
	.wrapper {
		/* max-width:1200px;
		width:100%; */
		margin:0 auto;
		position:relative;
	}
	
	footer {
		margin-top: 20px;
	}

	.menuprin {
		background-color: #929293;
	}
	
	@media screen and (min-width: 1000px) {
		.menuprin.header .contenedormenu{
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			align-items: center;
			justify-content: space-between;
		}
	}

	@media screen and (max-width: 1000px) {
		
		.hamburger {
			text-align: center;
			transition-property: opacity, filter;
			transition-duration: 0.15s;
			transition-timing-function: linear;
			font: inherit;
			color: inherit;
			text-transform: none;
			background-color: transparent;
			border: 0;
			margin: 0;
			overflow: visible;
			/* margin-top: 20px; */
			position: absolute;
			top: 15px;
			right: 20px;
			z-index: 99;
		}

		.hamburger-box {
			width: 40px;
			height: 24px;
			display: inline-block;
			position: relative;
			cursor: pointer;
		}

		.hamburger--squeeze .hamburger-inner {
			transition-duration: 0.075s;
			transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}

		.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
			width: 40px;
			height: 4px;
			background-color: #454545;
			border-radius: 0px;
			position: absolute;
			transition-property: transform;
			transition-duration: 0.15s;
			transition-timing-function: ease;
		}

		.hamburger-inner {
			display: block;
			top: 50%;
			margin-top: -2px;
		}

		.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
			width: 40px;
			height: 4px;
			border-radius: 0px;
			position: absolute;
			transition-property: transform;
			transition-duration: 0.15s;
			transition-timing-function: ease;
		}

		.hamburger-inner::before, .hamburger-inner::after {
			background-color: #424241;
		}

		.hamburger-inner::before, .hamburger-inner::after {
			content: "";
			display: block;
		}

		.hamburger-inner::before {
			top: -10px;
		}

		.hamburger--squeeze .hamburger-inner::before {
			transition: top 0.075s 0.12s ease, opacity 0.075s ease;
		}

		.hamburger-inner::after {
			bottom: -10px;
		}

		.hamburger--squeeze .hamburger-inner::after {
			transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}
  
		.hamburger--squeeze.is-active .hamburger-inner {
			transform: rotate(45deg);
			transition-delay: 0.12s;
			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}

		.hamburger--squeeze.is-active .hamburger-inner::before {
			top: 0;
			opacity: 0;
			transition: top 0.075s ease, opacity 0.075s 0.12s ease;
		}

		.hamburger--squeeze.is-active .hamburger-inner::after {
			bottom: 0;
			transform: rotate(-90deg);
			transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		
		.nav {
			position: fixed;
			width: 100%;
			top: 0px;
			right: 0px;
			left: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
			z-index: 2;
		}
		
		.nav.abierto {
			left: 0%;
		}
		
		#menu_top {
			padding: 0px;
			display: block;
			margin-left: auto;
			background-color: #ffffff;
			margin-top: 0px;
			height: 100%;
			width: 50%;
			margin-right: initial;
			padding-top: 100px;
		}
		
		nav .cerrar_menu {
			display: block;
			position: absolute;
			top: 8px;
			right: 20px;
			font-size: 30px;
			font-weight: bold;
			cursor: pointer;
		}
		
		nav .cerrar_menu span {
			color: #555555;
		}
		
		nav .menu_top li {
			display: block;
			font-size: 18px;
			line-height: initial;
			width: 60%;
			border-bottom: none;
			margin: auto;
			padding: 3% 0px;
			border: none;
			text-align: center;
		}
		
		nav .menu_top li a {
			color: #000;
		}
		
		.menuprin li a:hover {
			color: #000;
		}
	
		.hamburger-inner {
			background-color: #797979;
		}
		
		.hamburger-inner::before {
			background-color: #424241;
		}
		
		.hamburger-inner::after {
			background-color: #424241;
		}
		
		nav .menu_top li a {
			color: #000000;
		}
		
		.menuprin li a:hover {
			color: #000000;
		}
	}
</style>		<script>
			console.log("1200");
			console.log("Montserrat|sans-serif");
			console.log("Montserrat");
			console.log("sans-serif");
			console.log("Montserrat");
		</script>
	</head>
	<body class="wp-singular page-template-default page page-id-59 wp-theme-portfolio_micro portfolioreader wpb-js-composer js-comp-ver-7.4 vc_responsive">
    		<!-- wrapper -->
		<div class="wrapper">

					<!-- header -->
			<div class="menuprin header clear" role="banner">
				<div class="menusuperior">
									</div>
				<div class="contenedormenu">
					<!-- logo -->
					<div class="logo">
						<a href="https://www.portfolio.es">
							<!-- svg logo - portfolio.es/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
							<img src="https://portfoliomultimedia.com/wordpress/wp-content/themes/portfolio_micro/img/logo.png" alt="Logo" class="logo-img" style="max-width:100px;">
						</a>
					</div>
					<!-- /logo -->

					<!-- nav -->
					<div class="hamburger hamburger--squeeze inicial">
						<div class="hamburger-box">
							<div class="hamburger-inner"></div>
						</div>
					</div>
					<!-- /logo -->

					<!-- nav -->
					<nav class="nav" role="navigation">
						<ul id="menu_top" class="menu_top"><li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-50"><a href="https://portfoliomultimedia.com/wordpress/">Home</a></li>
<li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-227"><a href="https://portfoliomultimedia.com/wordpress/?page_id=84">Portfolio Slider</a></li>
<li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228"><a href="https://portfoliomultimedia.com/wordpress/home-english/">Portfolio Reader – Test site</a></li>
<li id="menu-item-298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-298"><a href="https://portfoliomultimedia.com/wordpress/blog/">Blog</a></li>
</ul>					</nav>
					<!-- /nav -->
				</div>
			</div>
            
			<!-- /header -->

      
<main role="main" class="autoheight">		<!-- section -->
		<section>

				
			<!-- article -->
			<article id="post-59" class="post-59 page type-page status-publish hentry">

				<div class="wpb-content-wrapper"><div data-vc-full-width="true" data-vc-full-width-init="false" data-vc-parallax="1.3" data-vc-parallax-image="" class="vc_row wpb_row vc_row-fluid vc_custom_1614356992678 vc_row-has-fill vc_general vc_parallax vc_parallax-content-moving"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 150px"><span class="vc_empty_space_inner"></span></div>
	<div class="wpb_text_column wpb_content_element " >
		<div class="wpb_wrapper">
			<p><img decoding="async" class="wp-image-44 size-full aligncenter" src="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/logovb.png" alt="" width="115" height="132" /></p>

		</div>
	</div>
<div class="vc_empty_space"   style="height: 150px"><span class="vc_empty_space_inner"></span></div></div></div></div></div><div class="vc_row-full-width vc_clearfix"></div><div class="vc_row wpb_row vc_row-fluid vc_row-o-equal-height vc_row-flex"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner vc_custom_1613510734312"><div class="wpb_wrapper"></div></div></div><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_text_column wpb_content_element " >
		<div class="wpb_wrapper">
			<p style="text-align: center;">Haz clic en el botón de la esquina inferior izquierda para probar Portfolio Reader leyendo este texto:</p>

		</div>
	</div>
<div class="vc_empty_space"   style="height: 15px"><span class="vc_empty_space_inner"></span></div>
	<div class="wpb_text_column wpb_content_element  textonormal readme eltexto" >
		<div class="wpb_wrapper">
			<h3 style="text-align: center;">Constituía un placer especial ver las cosas consumidas, ver los objetos ennegrecidos y cambiados. Con la punta de bronce del soplete en sus puños, con aquella gigantesca serpiente escupiendo su petróleo venenoso sobre el mundo, la sangre le latía en la cabeza y sus manos eran las de un fantástico director tocando todas las sinfonías del fuego y de las llamas para destruir los guiñapos y ruinas de la Historia.</h3>
<p style="text-align: center;">Fahrenheit 451, Ray Bradbury</p>

		</div>
	</div>
<div class="vc_empty_space"   style="height: 15px"><span class="vc_empty_space_inner"></span></div>
	<div class="wpb_text_column wpb_content_element " >
		<div class="wpb_wrapper">
			<h3 style="text-align: center;"><a href="https://portfoliomultimedia.com/wordpress/home-english/">english demo</a></h3>
<h3 style="text-align: center;"><a href="https://www.portfolio.es/tienda">comprar plugin</a></h3>

		</div>
	</div>

	<div class="wpb_raw_code wpb_content_element wpb_raw_html" >
		<div class="wpb_wrapper">
			<script>
var texto = Math.floor(Math.random() * 3);
if (texto == 0){
jQuery('.eltexto').html('<h3 style="text-align: center;">Constituía un placer especial ver las cosas consumidas, ver los objetos ennegrecidos y cambiados. Con la punta de bronce del soplete en sus puños, con aquella gigantesca serpiente escupiendo su petróleo venenoso sobre el mundo, la sangre le latía en la cabeza y sus manos eran las de un fantástico director tocando todas las sinfonías del fuego y de las llamas para destruir los guiñapos y ruinas de la Historia. </h3><p style="text-align: center;">Fahrenheit 451, Ray Bradbury</p>');
}
if (texto == 1){
jQuery('.eltexto').html('<h3 style="text-align: center;">Esta noche he visto alzarse la Máquina nuevamente. Era, en la proa, como una puerta abierta sobre el vasto cielo que ya nos traía olores de tierra por sobre un Océano tan sosegado, tan dueño de su ritmo, que la nave, levemente llevada, parecía adormecerse en su rumbo, suspendida entre un ayer y un mañana que se trasladaran con nosotros. </h3><p style="text-align: center;">El siglo de las luces, Alejo Carpentier</p>');
}
if (texto == 2){
jQuery('.eltexto').html('<h3 style="text-align: center;">Hora crepuscular. Un guardillón con ventano angosto, lleno de sol. Retratos, grabados, autógrafos repartidos por las paredes, sujetos con chinches de dibujante. Conversación lánguida de un hombre ciego y una mujer pelirrubia, triste y fatigada. El hombre ciego es un hiperbólico andaluz, poeta de odas y madrigales, Máximo Estrella. A la pelirrubia, por ser francesa, le dicen en la vecindad Madama Collet. </h3><p style="text-align: center;">Luces de Bohemia, Valle-Inclán</p>');
}
if (texto == 3){
jQuery('.eltexto').html('<h3 style="text-align: center;">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. </h3><p style="text-align: center;">El Quijote, Miguel de Cervantes</p>');
}
</script>
		</div>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper"></div></div></div></div><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 80px"><span class="vc_empty_space_inner"></span></div></div></div></div></div><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 80px"><span class="vc_empty_space_inner"></span></div></div></div></div></div><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 80px"><span class="vc_empty_space_inner"></span></div></div></div></div></div><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_empty_space"   style="height: 80px"><span class="vc_empty_space_inner"></span></div></div></div></div></div>
</div><div class='nosacar' style='display:none;'>Array
(
    [captcha_img] => b54f1
    [numero1] => 1
    [numero2] => 7
    [numero3] => 5
    [numero4] => 4
    [numero5] => 4
    [numero6] => 5
    [portfolioeasytranslate_cadenas_es] => Array
        (
            [0] => Array
                (
                    [0] => casa
                    [1] => hola
                )

            [1] => Array
                (
                    [0] => casa
                    [1] => hola
                )

        )

)
</div>
				<div class="comments">
	


</div>

			

				
			</article>
			<!-- /article -->

		
		
		</section>
		<!-- /section -->
	</main>


			<!-- footer -->
							<footer class="footer" role="contentinfo">
					<div class="wpb-content-wrapper"><div data-vc-full-width="true" data-vc-full-width-init="false" class="vc_row wpb_row vc_row-fluid vc_custom_1644945153350 vc_row-has-fill"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_row wpb_row vc_inner vc_row-fluid vc_row-o-content-middle vc_row-flex"><div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div  class="wpb_single_image wpb_content_element vc_align_center">
		
		<figure class="wpb_wrapper vc_figure">
			<a href="https://www.portfolio.es/" target="_self" class="vc_single_image-wrapper   vc_box_border_grey"><img loading="lazy" decoding="async" width="209" height="84" src="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/logolateraln.png" class="vc_single_image-img attachment-full" alt="" title="logolateraln" srcset="https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/logolateraln.png 209w, https://portfoliomultimedia.com/wordpress/wp-content/uploads/2021/02/logolateraln-120x48.png 120w" sizes="auto, (max-width: 209px) 100vw, 209px" /></a>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner"><div class="wpb_wrapper"></div></div></div><div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="redes_footer #fff"><div class="redes twitter"><a href="https://twitter.com/portfolio_es" target="_blank"><span class="dashicons dashicons-twitter"></span></a></div><div class="redes facebook"><a href="https://www.facebook.com/PortfolioMultimedia/" target="_blank"><span class="dashicons dashicons-facebook"></span></a></div><div style="clear: both;"></div></div><style>.redes_footer .redes span{color: #fff;}.redes_footer .redes a:hover span{color: #00c7ff;}</style></div></div></div></div></div></div></div></div><div class="vc_row-full-width vc_clearfix"></div>
</div><div class='nosacar' style='display:none;'>Array
(
    [captcha_img] => b54f1
    [numero1] => 1
    [numero2] => 7
    [numero3] => 5
    [numero4] => 4
    [numero5] => 4
    [numero6] => 5
    [portfolioeasytranslate_cadenas_es] => Array
        (
            [0] => Array
                (
                    [0] => casa
                    [1] => hola
                )

            [1] => Array
                (
                    [0] => casa
                    [1] => hola
                )

        )

)
</div><style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1644945153350{background-color: #010e42 !important;}</style>					<!-- copyright -->
					<p class="copyright">
						&copy; 2025 Copyright Sitio de Pruebas. Desarrollado con						<a href="//wordpress.org" title="WordPress">WordPress</a> &amp; <a href="//portfolio.es/micro" title="portfolio micro">Portfolio Micro</a>.
					</p>
					<!-- /copyright -->

				</footer>
			<!-- /footer -->
					</div>
		<!-- /wrapper -->

		<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/wordpress/*"},{"not":{"href_matches":["/wordpress/wp-*.php","/wordpress/wp-admin/*","/wordpress/wp-content/uploads/*","/wordpress/wp-content/*","/wordpress/wp-content/plugins/*","/wordpress/wp-content/themes/portfolio_micro/*","/wordpress/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div class="banner_consentimiento flotante_bottom_der" style="background-color: #eaeaea; border-radius:  15px 15px 15px 15px; max-width:600px; box-shadow:4px 4px 24px -13px #000;">
				<div class="textocookies" style="color: #000000;">
			<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
  <g id="Grupo_1" data-name="Grupo 1" transform="translate(-72 -138)">
    <circle id="Elipse_1" data-name="Elipse 1" cx="17" cy="17" r="17" transform="translate(72 138)" fill="#ffffff"/>
    <path id="Icon_awesome-cookie-bite" data-name="Icon awesome-cookie-bite" d="M27.168,13.614a6.808,6.808,0,0,1-6.73-6.8A6.808,6.808,0,0,1,13.634.08,7.023,7.023,0,0,0,9.391.763L5.712,2.637A7.036,7.036,0,0,0,2.637,5.713L.769,9.379a7.059,7.059,0,0,0-.682,4.308L.73,17.746a7.052,7.052,0,0,0,1.978,3.883l2.915,2.914a7.027,7.027,0,0,0,3.869,1.972l4.082.647a7.02,7.02,0,0,0,4.286-.679l3.679-1.874a7.039,7.039,0,0,0,3.075-3.076l1.868-3.666A7.056,7.056,0,0,0,27.168,13.614Zm-17.8,5.97a1.7,1.7,0,1,1,1.7-1.7A1.7,1.7,0,0,1,9.366,19.584Zm1.7-8.515a1.7,1.7,0,1,1,1.7-1.7A1.7,1.7,0,0,1,11.069,11.069Zm8.515,6.812a1.7,1.7,0,1,1,1.7-1.7A1.7,1.7,0,0,1,19.584,17.881Z" transform="translate(75.389 141.388)" fill="#adadad"/>
  </g>
</svg>

<div class="titularaviso">AVISO DE COOKIES</div>
					<p style="font-size:  13px !important;">Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Haga clic en el enlace para mayor información sobre nuestra <a href="https://www.portfolio.es" style="color: #000000;">política de cookies</a>.</p>
				</div>
				<button class="configurar" style="background-color: #a3a3a3; color: #ffffff; border-radius:  15px;">Configurar</button>
				<button class="rechazar" style="background-color: #a3a3a3; color: #ffffff; border-radius:  15px;">Rechazar todas</button>
				<button class="aceptar"  style="background-color: #a3a3a3; color: #ffffff; border-radius:  15px;">Aceptar todas</button>
			</div>
			
			<div class="configurar_cookies">
				<div class="cont_config">
					<div class="cerrar_config"><span class="material-icons"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
  <path id="Icon_ionic-md-close-circle" data-name="Icon ionic-md-close-circle" d="M21.375,3.375a18,18,0,1,0,18,18A17.938,17.938,0,0,0,21.375,3.375Zm9,24.48-2.52,2.52-6.48-6.48-6.48,6.48-2.52-2.52,6.48-6.48-6.48-6.48,2.52-2.52,6.48,6.48,6.48-6.48,2.52,2.52-6.48,6.48Z" transform="translate(-3.375 -3.375)"/>
</svg>
</span></div>
					<div class="titularaviso" style="font-size:13px !important; font-weight:bold;">CONFIGURAR COOKIES</div><br>
					<div class="consent_config">
						<label for="wordpress_check">
							<div style="font-weight:bold; font-size:13px !important;">Cookies técnicas de personalización <input type="checkbox" id="wordpress_check" name="wordpress_check" value="1" checked="checked" disabled="disabled"></div>
							<p style="font-size:13px !important;">Son cookies estrictamente necesarias para el funcionamiento normal de la web. Están exentas del consentimiento.</p>
						</label>
					</div><div class="consent_config">
						<label for="analytics_storage">
							<div style="font-weight:bold; font-size:13px !important;">Cookies de Google Analitycs <input type="checkbox" id="analytics_storage" name="analytics_storage" value="1"></div>
							<p style="font-size:13px !important;">Generan un ID de usuario, que es el que se utiliza para hacer recuento de cuantas veces visita el sitio un usuario. También registra cuando fue la primera y la última vez que visitó la web. Asimismo, calcula cuando se ha terminado una sesión y la fuente de tráfico. Tambien son utilizados para Remarketing, registro de eventos y acciones realizadas por el usuario.</p>
						</label>
					</div><div class="consent_config">
						<label for="ad_storage">
							<div style="font-weight:bold; font-size:13px !important;">Cookies de marketing de Google <input type="checkbox" id="ad_storage" name="ad_storage" value="1"></div>
							<p style="font-size:13px  !important;">Contienen un valor generado aleatoriamente único que permite a la Plataforma para distinguir navegadores y dispositivos. Esta información es utilizada para medir el rendimiento de los anuncios y proporcionar recomendaciones relativas a productos basadas en datos estadísticos.</p>
						</label>
					</div><button class="guardar" style="background-color: #a3a3a3; border-radius:  15px; font-size:13px  !important; font-weight:bold;">GUARDAR</button>
				</div>
			</div>
			
			<div class="btn_configurar">
				<span class="material-icons">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
  <g id="Grupo_1" data-name="Grupo 1" transform="translate(-72 -138)">
    <circle id="Elipse_1" data-name="Elipse 1" cx="17" cy="17" r="17" transform="translate(72 138)" fill="#ffffff"/>
    <path id="Icon_awesome-cookie-bite" data-name="Icon awesome-cookie-bite" d="M27.168,13.614a6.808,6.808,0,0,1-6.73-6.8A6.808,6.808,0,0,1,13.634.08,7.023,7.023,0,0,0,9.391.763L5.712,2.637A7.036,7.036,0,0,0,2.637,5.713L.769,9.379a7.059,7.059,0,0,0-.682,4.308L.73,17.746a7.052,7.052,0,0,0,1.978,3.883l2.915,2.914a7.027,7.027,0,0,0,3.869,1.972l4.082.647a7.02,7.02,0,0,0,4.286-.679l3.679-1.874a7.039,7.039,0,0,0,3.075-3.076l1.868-3.666A7.056,7.056,0,0,0,27.168,13.614Zm-17.8,5.97a1.7,1.7,0,1,1,1.7-1.7A1.7,1.7,0,0,1,9.366,19.584Zm1.7-8.515a1.7,1.7,0,1,1,1.7-1.7A1.7,1.7,0,0,1,11.069,11.069Zm8.515,6.812a1.7,1.7,0,1,1,1.7-1.7A1.7,1.7,0,0,1,19.584,17.881Z" transform="translate(75.389 141.388)" fill="#adadad"/>
  </g>
</svg>

</span>
			</div>
  <script>

jQuery(document).ready(function($){
          
          
var audioon = "off";

    
    
function portfolioReader(text) {
    
    if (audioon == 'on'){
        
      var id = window.setTimeout(function() {}, 0);

while (id--) {
    window.clearTimeout(id); // will do nothing if no timeout with id is present
}
        
     speechSynthesis.cancel();
       
    audioon = 'off';
      //   console.log('off');

}else{
audioon = 'on';
   //  console.log('on');
    
 var introduccion = "";   
    const msg = new SpeechSynthesisUtterance();
var eltextodelapagina;
    
    $( ".readme" ).each(function( index ) {
  eltextodelapagina = eltextodelapagina + $( this ).text() + " *** ";
});
    
if (eltextodelapagina != ""){
    
    text = text + "" + introduccion + "" + eltextodelapagina +"";
}   
    text = text.replaceAll('undefined', '');
    
message = text;
    
    
    
  try {
    const messageParts = message.split(' *** ')

    var currentIndex = 0
      const speak = (textToSpeak) => {
        const msg = new SpeechSynthesisUtterance();
     // const voices = window.speechSynthesis.getVoices();
      // msg.voice = voices[0];
     // msg.volume = 1; // 0 to 1
     // msg.rate = 3; // 0.1 to 10
    //  msg.pitch = .5; // 0 to 2
      msg.text = textToSpeak;
          
          var voices = speechSynthesis.getVoices();
          
          
                    if ((($('html').attr('lang') == 'en') || ($('html').attr('lang') == 'en-US') || ($('html').attr('lang') == 'en_US')) && msg.voice == null && voices[2].name == 'Alex'){
          msg.voice = voices[2];
          }

          
      msg.onend = function() {
           if (audioon == 'on'){ audioon = "off";
        currentIndex++;
        if (currentIndex < messageParts.length) {
          var id = window.setTimeout(() => {
            speak(messageParts[currentIndex])
          }, 500)
        }
           }
      };
      speechSynthesis.speak(msg);
    }
    speak(messageParts[0])
  } catch (e) {
    console.error(e)
  }
    
}
    
    
}

      

$( '.portfolioreadericon' ).click(function() { portfolioReader(''); });
 
        
if ($(".readme")[0]){$('.portfolioreadericon').css('opacity',1);
                                                                                                            
                                                                                                                                                                                                                         
                                                                                                            }else{ $('.portfolioreadericon').remove();}
    
    });

</script>
<!-- Portfolio Reader www.portfolio.es -->
<div style="position: fixed; height: 50px; z-index: 10000; cursor:pointer;bottom: 20px; left: 20px;"><img class="portfolioreadericon" style="height: 100%; width: auto; opacity: 1;" title="Portfolio Audio Reader" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/portfolioreader/assets/icon100.png" alt="Portfolio Audio Reader"></div>

  <script id="zoom-simple-mp-inline-js">
const zoomWidthSetting = "image-width200";
const zoomHeightSetting = "image-height";

document.addEventListener('DOMContentLoaded', function () {
  if (!document.querySelector('.zoomable')) return;

  let lens = document.getElementById('lens');
  if (!lens) {
    lens = document.createElement('div');
    lens.id = 'lens';
    document.body.appendChild(lens);
  }

  let result = document.getElementById('result');
  if (!result) {
    result = document.createElement('div');
    result.id = 'result';
    const zoomImg = document.createElement('img');
    zoomImg.id = 'zoom-img';
    result.appendChild(zoomImg);
    document.body.appendChild(result);
  }

  const zoomImg = document.getElementById('zoom-img');

  document.querySelectorAll('.zoomable').forEach(container => {
    const img = container.tagName.toLowerCase() === 'img' ? container : container.querySelector('img');
    if (!img) return;

// Convertir valor de usuario (ej: "30vw" o "400px") a px
function parseWidthValue(value) {
  if (!value) return 400;
  if (value.endsWith('vw')) {
    const vw = parseFloat(value);
    return window.innerWidth * vw / 100;
  } else if (value.endsWith('px')) {
    return parseFloat(value);
  } else if (value.startsWith('image-width')) {
    return null; // señal para que JS lo calcule después
  }
  return 400;
}

function applyDynamicZoomSize(imgRect) {


  // Alto
  if (zoomHeightSetting === 'image-height') {
    result.style.height = imgRect.height + 'px';
  } else if (zoomHeightSetting === 'image-height50') {
    result.style.height = (imgRect.height * 0.5) + 'px';
  } else if (zoomHeightSetting === 'image-height200') {
    result.style.height = (imgRect.height * 2) + 'px';
  } else {
    result.style.height = zoomHeightSetting;
  }
}


 container.addEventListener('mouseenter', () => {

  const imgRect = img.getBoundingClientRect();
   applyDynamicZoomSize(imgRect);
  const imgCenter = imgRect.left + imgRect.width / 2;
  const viewportCenter = window.innerWidth / 2;
  const gap = 10;

  const minWidth = 40;
  var anchoreferencia = 40;
	 if (zoomWidthSetting === 'image-width') {
    anchoreferencia = imgRect.width;
  } else if (zoomWidthSetting === 'image-width50') {
    anchoreferencia = (imgRect.width * 0.5);
  } else if (zoomWidthSetting === 'image-width200') {
    anchoreferencia = (imgRect.width * 2);
  } else {
   anchoreferencia = parseWidthValue(zoomWidthSetting);
  }
	 

  let availableSpace, finalWidth, resultLeft;
	 

  if (imgCenter < viewportCenter) {
    // Imagen a la izquierda → visor a la derecha
    
	  console.log (imgRect.width +' '+ result.style.width + ' ' + zoomWidthSetting);

    availableSpace = window.innerWidth - imgRect.right - gap;
	finalWidth = Math.max(minWidth, Math.min(anchoreferencia || availableSpace, availableSpace));
    resultLeft = imgRect.right + gap + window.scrollX;
  } else {
    // Imagen a la derecha → visor a la izquierda
    availableSpace = imgRect.left - gap;
	finalWidth = Math.max(minWidth, Math.min(anchoreferencia || availableSpace, availableSpace));
    resultLeft = imgRect.left - finalWidth - gap + window.scrollX;
  }

  // Posicionar y dimensionar
  result.style.left = resultLeft + 'px';
  result.style.width = finalWidth + 'px';
	
	 
  // Mostrar visor y lente
  lens.style.width = (imgRect.width / 8) + 'px';
  lens.style.height = (imgRect.height / 8) + 'px';
  lens.style.display = 'block';
  result.style.display = 'block';
  
   const verticalOffset = (imgRect.height - result.offsetHeight) / 2;

const resultTop = (imgRect.top + window.scrollY) + verticalOffset;
result.style.top = resultTop + 'px';


  zoomImg.src = img.src;
  zoomImg.style.width = (imgRect.width * 8) + 'px';
  zoomImg.style.height = (imgRect.height * 8) + 'px';

  function moveLens(e) {
  const pos = getCursorPos(e, img);
  const lensWidth = lens.offsetWidth;
  const lensHeight = lens.offsetHeight;

  let x = pos.x - lensWidth / 2;
  let y = pos.y - lensHeight / 2;

  // Limitar la lente dentro de la imagen
  if (x < 0) x = 0;
  if (y < 0) y = 0;
  if (x > img.width - lensWidth) x = img.width - lensWidth;
  if (y > img.height - lensHeight) y = img.height - lensHeight;

  const rect = img.getBoundingClientRect();
  lens.style.left = (x + rect.left + window.scrollX) + 'px';
  lens.style.top = (y + rect.top + window.scrollY) + 'px';

  // Posición relativa dentro del visor
  const offsetX = result.offsetWidth / (2 * 8);
  const offsetY = result.offsetHeight / (2 * 8);

  let adjustedX = pos.x - offsetX;
  let adjustedY = pos.y - offsetY;

  // Limitar desplazamiento para que no se vea el fondo del visor
  const maxX = img.width - result.offsetWidth / 8;
  const maxY = img.height - result.offsetHeight / 8;

  if (adjustedX < 0) adjustedX = 0;
  if (adjustedY < 0) adjustedY = 0;
  if (adjustedX > maxX) adjustedX = maxX;
  if (adjustedY > maxY) adjustedY = maxY;

  zoomImg.style.left = (-adjustedX * 8) + 'px';
  zoomImg.style.top = (-adjustedY * 8) + 'px';
}

  container.addEventListener('mousemove', moveLens);
  lens.addEventListener('mousemove', moveLens);

  container.addEventListener('mouseleave', () => {
    lens.style.display = 'none';
    result.style.display = 'none';
    container.removeEventListener('mousemove', moveLens);
    lens.removeEventListener('mousemove', moveLens);
  }, { once: true });
});
  });

  function getCursorPos(e, img) {
    const rect = img.getBoundingClientRect();
    const x = e.pageX - rect.left - window.scrollX;
    const y = e.pageY - rect.top - window.scrollY;
    return { x, y };
  }
});
</script><script type="text/javascript" id="captcha-script-js-extra">
/* <![CDATA[ */
var captchaPreguntas = {"preguntas":{"Introduce el texto que ves en la imagen: ":"e17e1a80fd746b970aea7c2fbdd57ae9018e4a8c6bc445d5d697fc1e79fcb15a"},"captchaUrl":"https://portfoliomultimedia.com/wordpress/wp-content/plugins/captcha-mp/captcha-mp.php"};
//# sourceURL=captcha-script-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/captcha-mp/assets/captcha_MP.js" id="captcha-script-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script>
<script type="text/javascript" id="wp-i18n-js-after">
/* <![CDATA[ */
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
/* ]]> */
</script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1" id="swv-js"></script>
<script type="text/javascript" id="contact-form-7-js-translations">
/* <![CDATA[ */
( function( domain, translations ) {
	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
	localeData[""].domain = domain;
	wp.i18n.setLocaleData( localeData, domain );
} )( "contact-form-7", {"translation-revision-date":"2025-06-26 10:54:55+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"es"},"This contact form is placed in the wrong place.":["Este formulario de contacto est\u00e1 situado en el lugar incorrecto."],"Error:":["Error:"]}},"comment":{"reference":"includes\/js\/index.js"}} );
//# sourceURL=contact-form-7-js-translations
/* ]]> */
</script>
<script type="text/javascript" id="contact-form-7-js-before">
/* <![CDATA[ */
var wpcf7 = {
    "api": {
        "root": "https:\/\/portfoliomultimedia.com\/wordpress\/wp-json\/",
        "namespace": "contact-form-7\/v1"
    }
};
//# sourceURL=contact-form-7-js-before
/* ]]> */
</script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1" id="contact-form-7-js"></script>
<script type="text/javascript" id="script-js-extra">
/* <![CDATA[ */
var cookies_options = {"analytics_id":"G-R9GLCDYEJL","gtm_tag":"GTM-5ZSRVHRK","analitycs":"on","marketing":"on","iconborde_color":"#ffffff","icon_color":"#adadad","bckg_color":"#eaeaea","anchocaja":"600px","tamanotexto":"13px","bordesbotones":"15px","sombracaja":"4px 4px 24px -13px #000","bordescaja":"15px 15px 15px 15px","txt_color":"#000000","url_politicas":"https://www.portfolio.es","url_color":"#000000","posicion_banner":"absolute","contenido_texto_politicas":"pol\u00edtica de cookies","texto_politicas":"Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Haga clic en el enlace para mayor informaci\u00f3n sobre nuestra [politica]."};
//# sourceURL=script-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/cookies-portfolio/js/script.js" id="script-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/wpb_calendario/js/fullcalendar.js?ver=1.0.0" id="portfoliomicroscriptsb-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/js_composer/assets/js/dist/js_composer_front.min.js?ver=7.4" id="wpb_composer_front_js-js"></script>
<script type="text/javascript" src="https://portfoliomultimedia.com/wordpress/wp-content/plugins/js_composer/assets/lib/bower/skrollr/dist/skrollr.min.js?ver=7.4" id="vc_jquery_skrollr_js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://portfoliomultimedia.com/wordpress/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}}
</script>
<script type="module">
/* <![CDATA[ */
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://portfoliomultimedia.com/wordpress/wp-includes/js/wp-emoji-loader.min.js
/* ]]> */
</script>
<script></script>
	</body>
</html>
