/* 
Theme Name: Rozu
Theme URI: https://eclosione.com/
Description: Custom WordPress theme for Rozu.
Author: Eclosione
Author URI: https://eclosione.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: rozu
*/

/* Admin Fix */
@media screen {
    body.admin-bar #smooth-wrapper {
        margin-top: 32px;
    }
    /* En móvil el admin bar mide 46px */
    @media screen and (max-width: 782px) {
        body.admin-bar #smooth-wrapper {
            margin-top: 46px;
        }
    }
}

/* Menu */
#main-menu .hfe-menu-item {
	transition: color 0.3s;
	border-bottom: 1px solid transparent;
}
#main-menu .current_page_item .hfe-menu-item {
	border-bottom: 1px solid var(--e-global-color-v4-granite);
}
#main-menu .hfe-menu-item.elementor-button {
	color: var(--e-global-color-v4-porcelain);
	transition: background-color 0.3s;
}
#main-menu #menu-1-b0fa801 {
	align-items: center;
}
.hfe-nav-menu__toggle .hfe-nav-menu-icon {
	padding: 0;
}
#main-menu .menu-item.hablemos a.hfe-menu-item {
	padding: 12px 20px 12px 20px;
	background-color: var(--e-global-color-v4-granite);
	color: var(--e-global-color-v4-porcelain);
	border-radius: 24px 24px 24px 24px;
	transition: background-color 0.3s;
}
#main-menu .menu-item.hablemos a.hfe-menu-item:hover {
	background-color: var(--e-global-color-v4-eucalyptus);
}
@media (max-width: 1024px) {
	#main-menu .hfe-nav-menu-icon {
		display: flex;
		padding-top: 3px;
	}
	#main-menu #menu-1-b0fa801 {
		background: var(--e-global-color-v4-granite);
		padding: 30px 20px;
	}
	#main-menu #menu-1-b0fa801 li {
		background: transparent;
		border-bottom: 0;
	}
	#main-menu #menu-1-b0fa801 li a {
		color: var(--e-global-color-v4-porcelain);
		background: transparent;
		padding: 16px 0;
		border-bottom: 1px solid var(--e-global-color-v4-porcelain);
	}
	#main-menu #menu-1-b0fa801 li a:hover,
	#main-menu #menu-1-b0fa801 li a:focus {
		color: var(--e-global-color-v4-eucalyptus);
	}
	#main-menu #menu-1-b0fa801 li#menu-item-38 a {
		border-bottom: 0;
	}
	#main-menu #menu-1-b0fa801 .menu-item.hablemos a {
		padding: 16px 0;
		background: var(--e-global-color-v4-porcelain);
		color: var(--e-global-color-v4-granite);
		display: flex;
		justify-content: center;
		margin-top: 10px;
		border-bottom: 0;
		transition: color 0.3s, background 0.3s;
	}
	#main-menu #menu-1-b0fa801 .menu-item.hablemos a:focus,
	#main-menu #menu-1-b0fa801 .menu-item.hablemos a:hover {
		background: var(--e-global-color-v4-eucalyptus);
		color: var(--e-global-color-v4-porcelain);
	}
}
/* Layout */
html {
	background: var(--e-global-color-v4-granite);
}
.balance {
	text-wrap: balance;
}
.gsap-animate-fix {
	transition: none;
	will-change: none;
}
.boton-icon::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='5 5 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.8335 5.83337H14.1668V14.1667' stroke='%23465145' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.8335 14.1667L14.1668 5.83337' stroke='%23465145' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");	
	background-repeat: no-repeat;
	background-size: contain;
	transition: filter 0.3s ease;
}
.boton-icon:hover::after,
.boton-icon:focus::after {
	filter: brightness(0) invert(1);
}
/* Metodologia */
@media (min-width: 769px) {
	.pasos {
		position: relative;
		cursor: pointer;
		z-index: 20;
	}
	.pasos img {
		position: absolute;
		right: 8%;
		top: 50%;
		margin-top: -175px; /* La mitad del height (350/2) */
		width: 350px;
		height: 350px;
		object-fit: cover;
		border-radius: 0;
		z-index: 10;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		--move-x: 0px;
		--move-y: 0px;
		translate: var(--move-x) var(--move-y);
		scale: 0;
		transform-origin: center center;
		transition: 
			opacity 0.3s ease, 
			visibility 0.3s, 
			scale 0.8s cubic-bezier(0.25, 1, 0.5, 1),
			translate 0.15s ease-out;
	}
	.pasos:hover img {
		opacity: 1;
		visibility: visible;
		scale: 1;
	}
}
@media (max-width: 768px) {
	.pasos img {
		margin-bottom: 20px;
	}
}