.elementor-2216 .elementor-element.elementor-element-33e66fcf:not(.elementor-motion-effects-element-type-background), .elementor-2216 .elementor-element.elementor-element-33e66fcf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.ecopastos.cl/wp-content/uploads/2024/01/lawn-gd4f49a2bd_1920-1.jpg");background-position:-337px 175px;background-size:auto;}.elementor-2216 .elementor-element.elementor-element-33e66fcf > .elementor-background-overlay{background-color:#000000;opacity:0.68;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2216 .elementor-element.elementor-element-33e66fcf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:40px 40px 40px 40px;}.elementor-2216 .elementor-element.elementor-element-53c47e53{text-align:left;}.elementor-2216 .elementor-element.elementor-element-53c47e53 .elementor-heading-title{color:#FFFFFF;font-family:"Raleway", Sans-serif;font-size:30px;font-weight:400;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-2216 .elementor-element.elementor-element-53c47e53 > .elementor-widget-container{margin:0px 0px 8px 0px;}.elementor-2216 .elementor-element.elementor-element-2d29d69{--spacer-size:55px;}.elementor-2216 .elementor-element.elementor-element-d88da5f{width:var( --container-widget-width, 101.988% );max-width:101.988%;--container-widget-width:101.988%;--container-widget-flex-grow:0;}.elementor-2216 .elementor-element.elementor-element-9eb5337{--spacer-size:97px;}@media(max-width:1024px){.elementor-2216 .elementor-element.elementor-element-33e66fcf:not(.elementor-motion-effects-element-type-background), .elementor-2216 .elementor-element.elementor-element-33e66fcf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-2216 .elementor-element.elementor-element-d88da5f{width:var( --container-widget-width, 309.545px );max-width:309.545px;--container-widget-width:309.545px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-2216 .elementor-element.elementor-element-33e66fcf:not(.elementor-motion-effects-element-type-background), .elementor-2216 .elementor-element.elementor-element-33e66fcf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-2216 .elementor-element.elementor-element-d88da5f{width:var( --container-widget-width, 339.531px );max-width:339.531px;--container-widget-width:339.531px;--container-widget-flex-grow:0;}}/* Start custom CSS for shortcode, class: .elementor-element-d88da5f *//* Styles for the product container */
.producto {
    width: 25%;
    min-height: 458px; /* Asegura una altura mínima para evitar problemas de diseño en pantallas pequeñas */
    float: left;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border: 1px solid #ccc;
}

.producto img {
    width: 100%;
    height: auto;
}

/* Yellow border hover effect */
.producto:hover {
    border: 2px solid #F3A424;
}

/* Heading */
.elementor-element-33e66fcf .elementor-widget-heading h2 {
    left: -187px;
}

/* Categoria producto */
.elementor-shortcode a .categoria-producto {
    font-size: 12px;
    color: #727272;
    position: relative;
    top: -8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

/* Bdi */
.elementor-shortcode .actual bdi {
    position: relative;
    top: -19px;
}

/* Actual */
.elementor-shortcode a .actual {
    position: relative;
    left: 0px;
}

/* Precio metro cuadrado */
.elementor-shortcode a .precio-metro-cuadrado {
    position: relative;
    top: -19px;
    left: 15px;
}

/* Bdi */
.regular .woocommerce-Price-amount bdi {
    position: relative;
    left: -132px;
    top: 5px;
    font-size: 18px;
    color: #aba39f;
    text-decoration: line-through;
}

/* Element 1dabe3f */
#page .elementor .elementor-element-1dabe3f {
    /* Add any styles for this element */
}

/* 1439px and smaller screen sizes */
@media (max-width: 1439px) {
    /* Heading */
    .elementor-element-33e66fcf .elementor-widget-heading h2 {
        left: -109px;
    }
}

/* 782px and smaller screen sizes */
@media (max-width: 782px) {
    /* Heading */
    .elementor-element-33e66fcf .elementor-widget-heading h2 {
        left: -7px;
    }

    /* Estilo para la etiqueta de oferta y descuento */
    .etiqueta-oferta,
    .etiqueta-descuento {
        position: static;
        background-color: initial; /* Revert background color */
        color: initial; /* Revert text color */
        font-size: initial; /* Revert font size */
        padding: initial; /* Revert padding */
        border-radius: initial; /* Revert border-radius */
        top: initial; /* Revert top position */
        left: initial; /* Revert left position */
        bottom: initial; /* Revert bottom position */
        right: initial; /* Revert right position */
    }

    /* Estilos para la vista móvil */
    .producto {
        width: 100%; /* Ocupa el ancho completo en la vista móvil */
        height: auto; /* Ajusta la altura según el contenido */
        padding: 5px; /* Reduce el padding para el espaciado */
        border: 1px solid #ccc; /* Revertir borde para el espaciado */
    }

    /* Muestra el botón "Ver producto" en la vista móvil */
    .producto .ver-producto-btn {
        display: block;
        bottom: 10px; /* Ajusta la posición vertical */
        padding: 6px 12px; /* Ajusta el tamaño del botón */
        font-size: 14px; /* Ajusta el tamaño de la fuente del botón */
    }
}

/* Styles for the "Ver producto" button */
.producto .ver-producto-btn {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #F3A424;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.producto:hover .ver-producto-btn {
    display: block;
}

/* Estilo para el precio del producto en la grilla */
.productos-container .precio {
    font-weight: 800;
    font-size: 20px;
    font-family: Trebuchet MS;
    color: #ba4016;
}

/* Estilo para el título del producto en la grilla */
.productos-container .producto h2 {
    font-weight: 700;
    font-size: 16px;
    color: #3F3F40;
}

/* Estilo para la etiqueta de oferta */
.etiqueta-oferta {
    background-color: #ba4016;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    top: 17px;
    left: 13px;
}

/* Estilo para la etiqueta de descuento */
.etiqueta-descuento {
    background-color: #ba4016;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 172px;
    right: 13px;
    height: F3A424
}

/* Estilo para la etiqueta "m²" al lado del precio */
.precio-metro-cuadrado {
    font-size: 22px;
    font-weight: bold;
    color: #ba4016;
    margin-left: 5px; /* Ajusta el espacio entre el precio y la etiqueta "m²" según tus preferencias */
}

/* 479px and smaller screen sizes */
@media (max-width: 479px) {
    /* Producto */
    .producto {
        min-height: 327px;
    }
}

/* Estilos para pantallas móviles (menos de 768px de ancho) */
@media (max-width: 767px) {
    .productos-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .producto {
        width: calc(50% - 5px); /* El 10px es para el espacio entre las columnas */
        margin-bottom: 10px; /* Espacio entre los productos */
    }
}


/* 782px and smaller screen sizes */
@media (max-width: 782px) {
    /* Estilo para la etiqueta de descuento */
    .etiqueta-descuento {
        position: absolute;
        /* Ajusta la posición de la etiqueta de descuento en la vista móvil */
        bottom: 180px; /* Cambia el valor según tu preferencia */
        right: 10px; /* Cambia el valor según tu preferencia */
        background-color: #ba4016;
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 4px;
    }
}
/* 782px and smaller screen sizes */
@media (max-width: 782px) {
    /* Estilo para el precio anterior */
    .regular .woocommerce-Price-amount bdi {
        position: relative;
        /* Ajusta la posición vertical del precio anterior en la vista móvil */
        top: -30px; /* Cambia el valor según tu preferencia para moverlo hacia arriba */
        left: 3px; /* Puedes ajustar la posición horizontal si es necesario */
        font-size: 16px;
        color: #aba39f;
        text-decoration: line-through;
    }
}
/* 782px and smaller screen sizes */
@media (max-width: 782px) {
    /* Estilo para el botón "Ver producto" */
    .producto .ver-producto-btn {
        position: absolute;
        /* Ajusta la posición vertical del botón en la vista móvil */
        bottom:30px; /* Cambia el valor según tu preferencia para moverlo hacia arriba */
        left: 50%;
        transform: translateX(-50%);
        background-color: #F3A424;
        color: #FFFFFF;
        padding: 1px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size:14px; /* Puedes ajustar el tamaño de fuente según sea necesario */
    }
}
/* 782px and smaller screen sizes */
@media (max-width: 782px) {
    /* Estilo para el botón "Ver producto" */
    .producto .ver-producto-btn {
        position: absolute;
        /* Ajusta la posición vertical del botón en la vista móvil */
        bottom: 10px; /* Cambia el valor según tu preferencia para moverlo hacia arriba */
        left: 50%;
        transform: translateX(-50%);
        background-color: #F3A424;
        color: #FFFFFF;
        padding: 4px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px; /* Puedes ajustar el tamaño de fuente según sea necesario */
        white-space: nowrap; /* Evita que el texto del botón se divida en múltiples líneas */
    }
}

/* Estilo para la etiqueta de oferta en móvil */
@media (max-width: 782px) {
    .etiqueta-oferta {
        /* Cambia el estilo de la etiqueta de oferta en dispositivos móviles */
        background-color: #ba4016;
        color: #fff;
        font-size: 10px; /* Cambia el tamaño de fuente en dispositivos móviles */
        padding: 6px 10px; /* Ajusta el padding en dispositivos móviles */
        border-radius: 4px;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}
/* Etiqueta oferta */
.elementor-shortcode a .etiqueta-oferta{
	background-color:#4fa730;
}

/* Etiqueta descuento */
.elementor-shortcode a .etiqueta-descuento{
	background-color:#4fa730;
}

/* Bdi */
.elementor-shortcode .actual bdi{
	color:#4fa730;
}

/* Precio metro cuadrado */
.elementor-shortcode a .precio-metro-cuadrado{
	color:#4fa730;
}

/* Ver producto */
.elementor-shortcode a .ver-producto-btn{
	background-color:#309215;
	
}

/* 1439px and smaller screen sizes */
@media (max-width:1439px){

	/* Producto */
	.elementor-shortcode .producto{
		display:inline-block;
		transform:translatex(0px) translatey(0px) !important;
	}
	
}/* End custom CSS */